/* =========================================
   1. Design Token & Themes
   ========================================= */
:root {
  /* 基础参数 */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-md: 16px;
  --radius-full: 999px;
  --container-width: 1024px;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* [Light Mode] 默认日间模式变量 */
  --bg-body: #f8fafc;
  --bg-card: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.8);
  --bg-hover: #f1f5f9;

  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-invert: #ffffff;

  --primary: #2563eb;       /* 核心蓝 */
  --primary-glow: rgba(37, 99, 235, 0.2);

  --border-light: rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --gradient-title: linear-gradient(135deg, #0f172a 0%, #3b82f6 100%);
  --decoration-blob: #e2e8f0;
    --team-bg: #f8fafc;
    --team-card-bg: #ffffff;
    --team-shadow: rgba(0,0,0,0.18);
    --team-title: #111;
    --team-highlight: #0c52a1;
    --team-icon: #333;
}

/* [Dark Mode] 深色模式变量覆盖 */
[data-theme="dark"] {
  --bg-body: #0f172a;       /* 深岩灰背景 */
  --bg-card: #1e293b;       /* 稍亮的卡片背景 */
  --bg-glass: rgba(15, 23, 42, 0.8);
  --bg-hover: #334155;

  --text-main: #f1f5f9;     /* 亮灰白 */
  --text-muted: #94a3b8;    /* 柔和灰 */

  --primary: #60a5fa;       /* 亮蓝，暗色下更显眼 */
  --primary-glow: rgba(96, 165, 250, 0.25);

  --border-light: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(96, 165, 250, 0.15); /* 加点蓝色光晕 */

  --gradient-title: linear-gradient(135deg, #f8fafc 0%, #60a5fa 100%);
  --decoration-blob: #1e293b;
  --team-bg: F1729FF;
  --team-card-bg: #1C2333;
  --team-card-shadow: rgba(96, 165, 250, 0.12);  /* 蓝色光晕 */
  --team-card-border: rgba(255, 255, 255, 0.05);
  --team-title: #e8e8e8;
  --team-highlight: #6ea7ff;
  --team-icon: #d4d4d4;
}

/* =========================================
   2. Global Reset & Layout
   ========================================= */
* { margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

}

body {
  font-family: var(--font-main);
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.6;
  /* 关键：平滑过渡背景色和文字颜色 */
  transition: background-color 0.4s ease, color 0.4s ease;
  /*overflow: hidden;*/
  overflow-x: hidden;
}
/*i{*/
/*    position:absolute;*/
/*    width: 4px;*/
/*    height: 4px;*/
/*    background: #d2075c;*/
/*    pointer-events: none;*/
/*    animation: animate 2s linear forwards;*/
/*}*/
/*@keyframes animate {*/
/*    0%*/
/*    {*/
/*        opactity: 1;*/
/*        transform: translate(0,0);*/
/*    }*/
/*    100%*/
/*    {*/
/*        opactity: 0;*/
/*        transform:translate(var(--x),var(--y));*/
/*    }*/
/*}*/


/* 新增：全局图片约束，防止图片撑破布局 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { text-decoration: none; color: inherit; transition: var(--transition-base); }
ul { list-style: none; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding { padding: 80px 0; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.column { flex-direction: column; }

/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; opacity: 0.5; }

/* =========================================
   3. Navigation (Glassmorphism)
   ========================================= */
/*nav {*/
/*  position: sticky;*/
/*  top: 0;*/
/*  z-index: 100;*/
/*  !*background: var(--bg-glass);*!*/
/*  background: rgba(255, 255, 255, 0.05);*/
/*  !*backdrop-filter: blur(16px);*!*/
/*    backdrop-filter:blur(12px);*/
/*  !*-webkit-backdrop-filter: blur(16px);*!*/
/*    -webkit-backdrop-filter:blur(12px);*/
/*  !*border-bottom: 1px solid var(--border-light);*!*/
/*    border-bottom:1px solid rgba(255, 255, 255, 0.08);*/
/*  transition: background 0.4s ease, border-color 0.4s ease;*/
/*}*/

/*[data-theme="dark"] nav {*/
/*    background: rgba(15, 23, 42, 0.35); !* 深色下微磨砂 *!*/
/*    border-bottom: 1px solid rgba(255, 255, 255, 0.06);*/
/*}*/


/*原始静态玻璃版本-2323*/
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    backdrop-filter: blur(0px);
    transition: all 0.4s ease;
}
nav.scrolled {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] nav.scrolled {
    background: rgba(15, 23, 42, 0.35);
}


.nav-container {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-main);
}

.logo-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--primary);
}

.nav-actions { display: flex; align-items: center; gap: 32px; }

.nav-links { display: flex; gap: 24px; }
.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--primary); }

.nav-controls { display: flex; align-items: center; gap: 12px; }

/* 按钮通用样式 */
.control-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-main);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
  color: var(--primary);
}

/* 主题切换按钮特殊处理 */
.theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.theme-toggle i {
  position: absolute;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.5s;
}

/* 图标切换动画逻辑 */
[data-theme="light"] .moon-icon { transform: translateY(20px) rotate(90deg); opacity: 0; }
[data-theme="light"] .sun-icon { transform: translateY(0) rotate(0); opacity: 1; }
[data-theme="dark"] .sun-icon { transform: translateY(-20px) rotate(-90deg); opacity: 0; }
[data-theme="dark"] .moon-icon { transform: translateY(0) rotate(0); opacity: 1; }

/* =========================================
   4. Hero Section / Intro
   ========================================= */
.intro {
  padding: 100px 0 60px;
  position: relative;
  text-align: center;
}

/* 背景装饰球 */
.bg-decoration {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--decoration-blob) 0%, transparent 70%);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

/*.avatar-container {*/
/*  position: relative;*/
/*  margin-bottom: 24px;*/
/*}*/

/*.avatar {*/
/*  width: 140px;*/
/*  height: 140px;*/
/*  border-radius: 50%;*/
/*  object-fit: cover;*/
/*  border: 4px solid var(--bg-card);*/
/*  position: relative;*/
/*  z-index: 2;*/
/*  flex-shrink: 0; !* 防止头像被挤压 *!*/
/*}*/

/*.avatar-glow {*/
/*  position: absolute;*/
/*  inset: 0;*/
/*  border-radius: 50%;*/
/*  background: var(--primary);*/
/*  filter: blur(25px);*/
/*  opacity: 0.4;*/
/*  z-index: 1;*/
/*  transform: scale(0.9);*/
/*  transition: opacity 0.3s;*/
/*}*/
/*.avatar-container:hover .avatar-glow { opacity: 0.7; }*/

.avatar-container {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(96,165,250,0.3);
    box-shadow: 0 0 20px rgba(96,165,250,0.25);
    transition: all 0.5s ease;
    z-index: 2;
}

/* 头像 hover 轻微上浮 + 强光 */
/*.avatar:hover {*/
/*    transform: translateY(-4px) scale(1.03);*/
/*    box-shadow: 0 0 40px rgba(96,165,250,0.5);*/
/*}*/

/*!* 外层呼吸光圈 *!*/
/*.avatar-glow {*/
/*    position: absolute;*/
/*    width: 140px;*/
/*    height: 140px;*/
/*    border-radius: 50%;*/
/*    background: radial-gradient(circle, rgba(96,165,250,0.4) 0%, rgba(96,165,250,0.05) 70%);*/
/*    filter: blur(20px);*/
/*    z-index: 1;*/
/*    animation: avatarPulse 4s ease-in-out infinite;*/
/*}*/

/*@keyframes avatarPulse {*/
/*    0%, 100% {*/
/*        transform: scale(1);*/
/*        opacity: 0.8;*/
/*    }*/
/*    50% {*/
/*        transform: scale(1.15);*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/*!* 暗色模式优化 *!*/
/*[data-theme="dark"] .avatar {*/
/*    border: 3px solid rgba(147,197,253,0.4);*/
/*    box-shadow: 0 0 25px rgba(96,165,250,0.4);*/
/*}*/

/*[data-theme="dark"] .avatar-glow {*/
/*    background: radial-gradient(circle, rgba(147,197,253,0.5) 0%, rgba(59,130,246,0.1) 70%);*/
/*    filter: blur(25px);*/
/*}*/

/*旋转霓虹环*/
/*.avatar-container {*/
/*    position: relative;*/
/*    width: 140px;*/
/*    height: 140px;*/
/*    margin-bottom: 24px;*/
/*}*/

/*.avatar {*/
/*    width: 120px;*/
/*    height: 120px;*/
/*    border-radius: 50%;*/
/*    object-fit: cover;*/
/*    position: relative;*/
/*    z-index: 2;*/
/*}*/

/*.avatar-glow {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    border-radius: 50%;*/
/*    background: conic-gradient(*/
/*            from 0deg,*/
/*            #60a5fa,*/
/*            #a855f7,*/
/*            #f472b6,*/
/*            #60a5fa*/
/*    );*/
/*    animation: spin-ring 6s linear infinite;*/
/*    filter: blur(6px);*/
/*    z-index: 1;*/
/*}*/

/*@keyframes spin-ring {*/
/*    0% {*/
/*        transform: rotate(0deg);*/
/*    }*/
/*    100% {*/
/*        transform: rotate(360deg);*/
/*    }*/
/*}*/

/*[data-theme="dark"] .avatar-glow {*/
/*    filter: blur(10px) brightness(1.3);*/
/*}*/


/*跳动脉冲环 - 就刷新时候变一下*/
/*.avatar-container {*/
/*    position: relative;*/
/*    width: 140px;*/
/*    height: 140px;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

/*.avatar {*/
/*    width: 120px;*/
/*    height: 120px;*/
/*    border-radius: 50%;*/
/*    object-fit: cover;*/
/*    z-index: 2;*/
/*}*/

/*.avatar-glow {*/
/*    position: absolute;*/
/*    width: 140px;*/
/*    height: 140px;*/
/*    border-radius: 50%;*/
/*    background: radial-gradient(circle, rgba(96,165,250,0.4), transparent 70%);*/
/*    animation: pulse 1.8s infinite ease-in-out;*/
/*    z-index: 1;*/
/*}*/

/*@keyframes pulse {*/
/*    0%, 100% {*/
/*        transform: scale(1);*/
/*        opacity: 0.8;*/
/*    }*/
/*    50% {*/
/*        transform: scale(1.3);*/
/*        opacity: 0.4;*/
/*    }*/
/*}*/

/*浮光粒子*/
/*.avatar-container {*/
/*    position: relative;*/
/*    width: 140px;*/
/*    height: 140px;*/
/*    margin-bottom: 24px;*/
/*}*/

/*.avatar {*/
/*    width: 120px;*/
/*    height: 120px;*/
/*    border-radius: 50%;*/
/*    object-fit: cover;*/
/*    z-index: 3;*/
/*    position: relative;*/
/*}*/

/*.avatar-glow {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    z-index: 1;*/
/*}*/

/*.avatar-glow::before,*/
/*.avatar-glow::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    border-radius: 50%;*/
/*    animation: float-particles 6s infinite ease-in-out;*/
/*}*/

/*.avatar-glow::before {*/
/*    width: 140px;*/
/*    height: 140px;*/
/*    background: radial-gradient(circle, rgba(96,165,250,0.3), transparent 70%);*/
/*    animation-delay: 0s;*/
/*}*/

/*.avatar-glow::after {*/
/*    width: 150px;*/
/*    height: 150px;*/
/*    background: radial-gradient(circle, rgba(147,51,234,0.25), transparent 70%);*/
/*    animation-delay: 2s;*/
/*}*/

/*@keyframes float-particles {*/
/*    0%, 100% {*/
/*        transform: rotate(0deg) scale(1);*/
/*    }*/
/*    50% {*/
/*        transform: rotate(180deg) scale(1.1);*/
/*    }*/
/*}*/

/*价个边框*/
/*.avatar-container {*/
/*    position: relative;*/
/*    width: 150px;*/
/*    height: 150px;*/
/*    margin-bottom: 24px;*/
/*}*/

/*.avatar {*/
/*    width: 120px;*/
/*    height: 120px;*/
/*    border-radius: 50%;*/
/*    object-fit: cover;*/
/*    position: relative;*/
/*    z-index: 2;*/
/*    box-shadow: 0 0 20px rgba(0, 255, 255, 0.25);*/
/*}*/

/*.avatar-glow {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    border-radius: 50%;*/
/*    border: 2px solid rgba(0,255,255,0.5);*/
/*    box-shadow: 0 0 30px rgba(0,255,255,0.5), inset 0 0 20px rgba(0,255,255,0.4);*/
/*    animation: rotate-glow 5s linear infinite;*/
/*}*/

/*@keyframes rotate-glow {*/
/*    0% {*/
/*        transform: rotate(0deg);*/
/*    }*/
/*    100% {*/
/*        transform: rotate(360deg);*/
/*    }*/
/*}*/


.avatar-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, rgba(96,165,250,0.1) 60%, rgba(255,255,255,0) 100%);
    box-shadow: 0 0 50px rgba(96,165,250,0.2);
    animation: mistBreath 6s ease-in-out infinite;
    overflow: visible;
}

/* 背景呼吸柔光 */
@keyframes mistBreath {
    0%, 100% {
        box-shadow: 0 0 40px rgba(96,165,250,0.18), 0 0 100px rgba(147,197,253,0.08);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 80px rgba(96,165,250,0.3), 0 0 150px rgba(147,197,253,0.12);
        transform: scale(1.03);
    }
}

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.2);
    z-index: 2;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* 鼠标悬停：轻弹旋转 */
.avatar:hover {
    animation: bounceAndSpin 0.8s cubic-bezier(0.28, 0.84, 0.42, 1);
    filter: brightness(1.1) saturate(1.1);
}

@keyframes bounceAndSpin {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-14px) rotate(-8deg) scale(1.05); }
    50% { transform: translateY(4px) rotate(6deg) scale(0.97); }
    75% { transform: translateY(-4px) rotate(-4deg) scale(1.02); }
    100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* 最外层光雾呼吸层 */
.avatar-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147,197,253,0.25), rgba(59,130,246,0.05) 70%);
    filter: blur(60px);
    z-index: 0;
    animation: cloudPulse 7s ease-in-out infinite;
}

@keyframes cloudPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

/* 暗色模式：冷蓝光雾 */
[data-theme="dark"] .avatar-container {
    background: radial-gradient(circle at center, rgba(59,130,246,0.05) 0%, rgba(147,197,253,0.08) 60%, rgba(255,255,255,0) 100%);
    box-shadow: 0 0 60px rgba(96,165,250,0.15);
}
[data-theme="dark"] .avatar-glow {
    background: radial-gradient(circle, rgba(96,165,250,0.25), rgba(37,99,235,0.05) 70%);
}



/*头像之下*/
.gradient-text {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 16px;
  background: var(--gradient-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* 关键：文字透明显示背景渐变 */
  letter-spacing: -1px;
}

.subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto;
}

/* =========================================
   5. Projects Grid & Detail Images
   ========================================= */
h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 48px;
  color: var(--text-main);
  position: relative;
  display: inline-block;
  width: 100%;
}

.project-titleone{
    font-family: "Calibri", sans-serif;
    font-size: 2rem;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 35px;
    color: var(--text-main);
    position: relative;
    display: inline-block;
    width: 100%;
}

/*.project-titleone::before {*/
/*    font-family: "Times New Roman", Times, serif;*/
/*    content: "🌟 SSCI TOP";*/
/*    background: #ff0000; !* 深酒红，象征权威 *!*/
/*    color: #ffffff;*/
/*    font-size: 0.5em;*/
/*    font-weight: 600;*/
/*    padding: 4px 12px;*/
/*    border-radius: 12px; !* 圆角但不过分，稳重学术感 *!*/
/*    position: absolute;*/
/*    top: -50px;   !* 根据视觉可调 *!*/
/*    right: -32px; !* 根据视觉可调 *!*/
/*    border: 1px solid rgba(255, 215, 0, 0.45); !* 微金边，低调而高贵 *!*/
/*    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); !* 非炫光，增强权威感 *!*/
/*}*/

.project-titleone::before {
    font-family: "Times New Roman", Times, serif;
    content: "🌟 SSCI TOP";
    position: absolute;
    top: -50px;
    right: -32px;

    /* 主色：红金渐变 */
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 40%, #fbbf24 100%);
    color: #fffaf0;
    font-size: 0.55em;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 15px;
    letter-spacing: 0.6px;

    border: 1px solid rgba(255, 215, 0, 0.45);
    box-shadow:
            0 0 10px rgba(255, 0, 0, 0.25),
            0 0 16px rgba(255, 187, 0, 0.25),
            inset 0 0 6px rgba(255, 255, 255, 0.15);

    text-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
    background-size: 200% 200%;
    animation: redBreathGold 3.2s ease-in-out infinite;
    transition: all 0.3s ease;
}

/* 呼吸动画：红金内光，节奏更快 */
@keyframes redBreathGold {
    0%, 100% {
        filter: brightness(1);
        box-shadow:
                0 0 10px rgba(255, 0, 0, 0.25),
                0 0 16px rgba(255, 187, 0, 0.25),
                inset 0 0 6px rgba(255, 255, 255, 0.15);
    }
    50% {
        filter: brightness(1.15);
        box-shadow:
                0 0 14px rgba(255, 59, 59, 0.35),
                0 0 22px rgba(255, 196, 0, 0.3),
                inset 0 0 10px rgba(255, 255, 255, 0.2);
    }
}

/* 暗色模式优化：柔化光源、减亮 20% */
[data-theme="dark"] .project-titleone::before {
    background: linear-gradient(135deg, #641414 0%, #8b1c1c 45%, #b45309 100%);
    color: #fef3c7;
    box-shadow:
            0 0 6px rgba(255, 99, 71, 0.25),
            0 0 14px rgba(255, 193, 7, 0.15),
            inset 0 0 5px rgba(255, 255, 255, 0.1);
    filter: brightness(0.9);
    animation: redBreathGoldDark 3.2s ease-in-out infinite;
}

/* 暗色呼吸动画：更柔、更内敛 */
@keyframes redBreathGoldDark {
    0%, 100% {
        box-shadow:
                0 0 6px rgba(255, 99, 71, 0.25),
                0 0 14px rgba(255, 193, 7, 0.15),
                inset 0 0 5px rgba(255, 255, 255, 0.1);
        filter: brightness(0.85);
    }
    50% {
        box-shadow:
                0 0 10px rgba(255, 120, 80, 0.3),
                0 0 18px rgba(255, 215, 0, 0.25),
                inset 0 0 8px rgba(255, 255, 255, 0.15);
        filter: brightness(1);
    }
}


/*第二篇 徽章*/
.project-titletwo{
    font-family: "Calibri", sans-serif;
    font-size: 2rem;
    text-align: left;
    margin-bottom: 35px;
    color: var(--text-main);
    position: relative;
    display: inline-block;
    width: 100%;

    overflow:visible;
    z-index: 2;

}

/*.project-titletwo::before {*/
/*    font-family: "Times New Roman", Times, serif;*/
/*    content: "⭐️ SSCI Q1";*/
/*    background: #0D3B66; !* 深酒红，象征权威 *!*/
/*    color: #ffffff;*/
/*    font-size: 0.5em;*/
/*    font-weight: 600;*/
/*    padding: 4px 12px;*/
/*    border-radius: 12px; !* 圆角但不过分，稳重学术感 *!*/
/*    position: absolute;*/
/*    top: -32px;   !* 根据视觉可调 *!*/
/*    right: -32px; !* 根据视觉可调 *!*/
/*    border: 1px solid rgba(255, 255, 255, 0.55); !* 银色微边，权威感 *!*/
/*    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);*/
/*    letter-spacing: 0.5px; !* 让 “Q1 JOURNAL” 更有正式感 *!*/
/*}*/

.project-titletwo::before {
    font-family: "Times New Roman", Times, serif;
    content: "💠 SSCI Q1";
    position: absolute;
    top: -32px;
    right: -24px;

    transform: translate(10%, -10%);

    /* 蓝灰渐变 */
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 45%, #cbd5e1 100%);
    color: #f8fafc;
    font-size: 0.55em;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 15px; /* 去掉右下角弧度 */
    letter-spacing: 0.6px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
            0 0 10px rgba(37, 99, 235, 0.25),
            0 0 18px rgba(147, 197, 253, 0.25),
            inset 0 0 6px rgba(255, 255, 255, 0.2);

    text-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
    background-size: 200% 200%;
    animation: blueBreathQ2 3.8s ease-in-out infinite;
    transition: all 0.3s ease;
}

.project-img {
    position: relative;
    z-index: 1; /* 图片位于徽章之下 */
    display: block;
    margin: 1rem auto;
    max-width: 100%;
    height: auto;
    /*margin-top: 1rem;*/

}


/* 呼吸动画：轻柔亮度变化 */
@keyframes blueBreathQ2 {
    0%, 100% {
        filter: brightness(1);
        box-shadow:
                0 0 10px rgba(37, 99, 235, 0.25),
                0 0 18px rgba(147, 197, 253, 0.25),
                inset 0 0 6px rgba(255, 255, 255, 0.2);
    }
    50% {
        filter: brightness(1.15);
        box-shadow:
                0 0 14px rgba(37, 99, 235, 0.35),
                0 0 24px rgba(147, 197, 253, 0.3),
                inset 0 0 10px rgba(255, 255, 255, 0.3);
    }
}

/* 暗色模式：低亮度柔化版 */
[data-theme="dark"] .project-titletwo::before {
    background: linear-gradient(135deg, #1a2850 0%, #2f5db6 45%, #9fb8dc 100%);
    color: #e5e7eb;
    box-shadow:
            0 0 8px rgba(59, 130, 246, 0.25),
            0 0 16px rgba(147, 197, 253, 0.15),
            inset 0 0 6px rgba(255, 255, 255, 0.12);
    filter: brightness(0.92);
    animation: blueBreathQ2Dark 4s ease-in-out infinite;
}

/* 暗色呼吸动画 */
@keyframes blueBreathQ2Dark {
    0%, 100% {
        box-shadow:
                0 0 8px rgba(59, 130, 246, 0.25),
                0 0 16px rgba(147, 197, 253, 0.15),
                inset 0 0 6px rgba(255, 255, 255, 0.12);
        filter: brightness(0.9);
    }
    50% {
        box-shadow:
                0 0 12px rgba(59, 130, 246, 0.3),
                0 0 20px rgba(147, 197, 253, 0.25),
                inset 0 0 10px rgba(255, 255, 255, 0.15);
        filter: brightness(1);
    }
}





/*第三篇*/
.project-titlethree{
    align-items: flex-start;
    font-family: "Calibri", sans-serif;
    font-size: 2rem;
    text-align: left;
    margin-bottom: 35px;
    color: var(--text-main);
    position: relative;
    display: inline-block;
    width: 100%;
}

/*.project-titlethree::before {*/
/*    font-family: "Times New Roman", Times, serif;*/
/*    content: "⭐️ SSCI Q1";*/
/*    background: #0D3B66; !* 深酒红，象征权威 *!*/
/*    color: #ffffff;*/
/*    font-size: 0.5em;*/
/*    font-weight: 600;*/
/*    padding: 4px 12px;*/
/*    border-radius: 12px; !* 圆角但不过分，稳重学术感 *!*/
/*    position: absolute;*/
/*    top: -32px;   !* 根据视觉可调 *!*/
/*    right: -32px; !* 根据视觉可调 *!*/
/*    border: 1px solid rgba(255, 255, 255, 0.55); !* 银色微边，权威感 *!*/
/*    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);*/
/*    letter-spacing: 0.5px; !* 让 “Q1 JOURNAL” 更有正式感 *!*/
/*}*/

.project-titlethree::before {
    font-family: "Times New Roman", Times, serif;
    content: "💠 SSCI Q1";
    position: absolute;
    top: -40px;
    right: -40px;

    /* 蓝灰过渡：比 Q1 更柔和、更学术 */
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 45%, #cbd5e1 100%);
    color: #f8fafc;
    font-size: 0.55em;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 15px; /* 去掉右下角弧度 */
    letter-spacing: 0.6px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
            0 0 10px rgba(37, 99, 235, 0.25),
            0 0 18px rgba(147, 197, 253, 0.25),
            inset 0 0 6px rgba(255, 255, 255, 0.2);

    text-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
    background-size: 200% 200%;
    animation: blueBreathQ2 3.8s ease-in-out infinite;
    transition: all 0.3s ease;
}

/* 呼吸动画：更轻、更柔 */
@keyframes blueBreathQ2 {
    0%, 100% {
        filter: brightness(1);
        box-shadow:
                0 0 10px rgba(37, 99, 235, 0.25),
                0 0 18px rgba(147, 197, 253, 0.25),
                inset 0 0 6px rgba(255, 255, 255, 0.2);
    }
    50% {
        filter: brightness(1.15);
        box-shadow:
                0 0 14px rgba(37, 99, 235, 0.35),
                0 0 24px rgba(147, 197, 253, 0.3),
                inset 0 0 10px rgba(255, 255, 255, 0.3);
    }
}

[data-theme="dark"] .project-titlethree::before {
    background: linear-gradient(135deg, #1a2850 0%, #2f5db6 45%, #9fb8dc 100%);
    color: #e5e7eb; /* 柔和白，不刺眼 */
    box-shadow:
            0 0 8px rgba(59, 130, 246, 0.25),  /* 外层柔光 */
            0 0 16px rgba(147, 197, 253, 0.15), /* 次层冷光 */
            inset 0 0 6px rgba(255, 255, 255, 0.12); /* 内部柔和呼吸光 */
    filter: brightness(0.92); /* 整体降亮度 */
    animation: blueBreathQ2Dark 4s ease-in-out infinite;
}

/* 呼吸动画 - 暗色模式特调，内部更轻柔、节奏略慢 */
@keyframes blueBreathQ2Dark {
    0%, 100% {
        box-shadow:
                0 0 8px rgba(59, 130, 246, 0.25),
                0 0 16px rgba(147, 197, 253, 0.15),
                inset 0 0 6px rgba(255, 255, 255, 0.12);
        filter: brightness(0.9);
    }
    50% {
        box-shadow:
                0 0 12px rgba(59, 130, 246, 0.3),
                0 0 20px rgba(147, 197, 253, 0.25),
                inset 0 0 10px rgba(255, 255, 255, 0.15);
        filter: brightness(1);
    }
}

/*!* 标题下划线 *!*/
/*h2::after {*/
/*  content: '';*/
/*  display: block;*/
/*  width: 40px;*/
/*  height: 4px;*/
/*  background: var(--primary);*/
/*  margin: 12px auto 0;*/
/*  border-radius: 2px;*/
/*}*/

/*.projects-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
/*  gap: 32px;*/
/*}*/

/*.card {*/
/*  background: var(--bg-card);*/
/*  border-radius: var(--radius-md);*/
/*  border: 1px solid var(--border-light);*/
/*  overflow: hidden;*/
/*  transition: var(--transition-base);*/
/*  !* 解决 Safari 下圆角溢出问题 *!*/
/*  transform: translateZ(0);*/
/*}*/

/*.card:hover {*/
/*  transform: translateY(-8px);*/
/*  box-shadow: var(--shadow-hover);*/
/*  border-color: var(--primary-glow);*/
/*}*/

/*!* 首页项目卡片缩略图 - 优化适配 *!*/
/*.project-thumbnail {*/
/*  width: 100%;*/
/*  height: 220px;           !* 调整高度，显示更佳 *!*/
/*  object-fit: cover;       !* 填满容器，防止拉伸 *!*/
/*  object-position: center; !* 居中裁剪 *!*/
/*  border-bottom: 1px solid var(--border-light);*/
/*  transition: transform 0.5s ease;*/
/*  background-color: var(--bg-hover);*/
/*}*/

/*.card:hover .project-thumbnail { transform: scale(1.05); }*/

/*.project-info { padding: 24px; }*/

/*.project-info h3 {*/
/*  font-size: 1.25rem;*/
/*  margin-bottom: 8px;*/
/*  color: var(--text-main);*/
/*}*/

/*.project-info p {*/
/*  font-size: 0.95rem;*/
/*  color: var(--text-muted);*/
/*  margin-bottom: 20px;*/
/*  display: -webkit-box;*/
/*  -webkit-line-clamp: 3;*/
/*  -webkit-box-orient: vertical;*/
/*  overflow: hidden;*/
/*}*/

/*.project-link {*/
/*  font-weight: 600;*/
/*  color: var(--primary);*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  gap: 4px;*/
/*}*/
/*.project-link::after { content: '→'; transition: transform 0.2s; }*/
/*.project-link:hover::after { transform: translateX(4px); }*/

/*!* 子页面：详情大图样式 (新增) *!*/
/*.project-img {*/
/*  display: block;*/
/*  width: 100%;             !* 强制宽度撑满容器 *!*/
/*  max-width: 100%;         !* 防止超出父容器 *!*/
/*  height: auto;            !* 高度自动，保持比例 *!*/
/*  object-fit: contain;     !* 保证图片内容完整显示 *!*/
/*  border-radius: var(--radius-md);*/
/*  margin: 32px auto;       !* 上下增加间距 *!*/
/*  box-shadow: var(--shadow-card);*/
/*  border: 1px solid var(--border-light);*/
/*}*/
/* =========================================
   * 邮箱CSS
   ========================================= */
/*.mail-special {*/
/*    font-family: Calibri, "Times New Roman", serif;*/
/*    font-size: 1rem;*/
/*    font-weight: 600;*/
/*    color: #0077cc;*/
/*    text-decoration: none;*/
/*    position: relative;*/
/*    transition: all 0.25s ease;*/
/*    border-bottom: 2px solid rgba(0, 119, 204, 0.25);*/
/*    padding-bottom: 2px;*/
/*    !* 平滑缩放关键 *!*/
/*    display: inline-block;*/
/*    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),color 0.25s ease,*/
/*                border-bottom 0.25s ease;*/
/*}*/

/*!* 悬停高亮 *!*/
/*.mail-special:hover {*/
/*    color: #005a9c;*/
/*    transform: scale(1.08);*/
/*    border-bottom: 2px solid #005a9c;*/
/*    cursor: pointer;*/
/*    color: #005a9c;*/
/*    transform: scale(1.12);   !* 科研主页视觉更明显 *!*/
/*    border-bottom: 2px solid #005a9c;*/
/*    cursor: pointer;*/
/*}*/

/*!* Tooltip 气泡 *!*/
/*.mail-special::after {*/
/*    content: "点击即可给我发邮件哦~ :)";*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: -42px;*/
/*    transform: translateX(-50%);*/
/*    background: #005a9c;*/
/*    color: #fff;*/
/*    font-size: 0.75rem;*/
/*    padding: 6px 10px;*/
/*    border-radius: 6px;*/
/*    white-space: nowrap;*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*    transition: 0.25s ease;*/
/*}*/

/*!* Tooltip 小三角形 *!*/
/*.mail-special::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: -8px;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    border: 6px solid transparent;*/
/*    border-top-color: #005a9c;*/
/*    opacity: 0;*/
/*    transition: 0.25s ease;*/
/*}*/

/*!* 悬停时显示 Tooltip *!*/
/*.mail-special:hover::after,*/
/*.mail-special:hover::before {*/
/*    opacity: 1;*/
/*}*/

/*!* 点击成功反馈 *!*/
/*.mail-special.copied {*/
/*    animation: copied-flash 1s ease;*/
/*}*/
/*@keyframes copied-flash {*/
/*    0% { background-color: transparent; }*/
/*    30% { background-color: rgba(255, 215, 0, 0.5); }*/
/*    100% { background-color: transparent; }*/
/*}*/

/*.mail-special2 {*/
/*    font-family: Calibri, "Times New Roman", serif;*/
/*    font-size: 1rem;*/
/*    font-weight: 600;*/
/*    color: #0077cc;*/
/*    text-decoration: none;*/
/*    position: relative;*/
/*    transition: all 0.25s ease;*/
/*    border-bottom: 2px solid rgba(0, 119, 204, 0.25);*/
/*    padding-bottom: 2px;*/
/*    !* 平滑缩放关键 *!*/
/*    display: inline-block;*/
/*    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),color 0.25s ease,*/
/*    border-bottom 0.25s ease;*/
/*}*/

/*!* 悬停高亮 *!*/
/*.mail-special2:hover {*/
/*    color: #005a9c;*/
/*    transform: scale(1.08);*/
/*    border-bottom: 2px solid #005a9c;*/
/*    cursor: pointer;*/
/*    color: #005a9c;*/
/*    transform: scale(1.12);   !* 科研主页视觉更明显 *!*/
/*    border-bottom: 2px solid #005a9c;*/
/*    cursor: pointer;*/
/*}*/

/*!* Tooltip 气泡 *!*/
/*.mail-special2::after {*/
/*    content: "Click it to mail xiaoma~ :)";*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: -42px;*/
/*    transform: translateX(-50%);*/
/*    background: #005a9c;*/
/*    color: #fff;*/
/*    font-size: 0.75rem;*/
/*    padding: 6px 10px;*/
/*    border-radius: 6px;*/
/*    white-space: nowrap;*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*    transition: 0.25s ease;*/
/*}*/

/*!* Tooltip 小三角形 *!*/
/*.mail-special2::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: -8px;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    border: 6px solid transparent;*/
/*    border-top-color: #005a9c;*/
/*    opacity: 0;*/
/*    transition: 0.25s ease;*/
/*}*/

/*!* 悬停时显示 Tooltip *!*/
/*.mail-special2:hover::after,*/
/*.mail-special2:hover::before {*/
/*    opacity: 1;*/
/*}*/

/*!* 点击成功反馈 *!*/
/*.mail-special2.copied {*/
/*    animation: copied-flash 1s ease;*/
/*}*/
/*@keyframes copied-flash {*/
/*    0% { background-color: transparent; }*/
/*    30% { background-color: rgba(255, 215, 0, 0.5); }*/
/*    100% { background-color: transparent; }*/
/*}*/

/*!* ===== 邮箱链接美化（科研主页风格） ===== *!*/
/*.mail-special, .mail-special2 {*/
/*    font-family: Calibri, "Times New Roman", serif;*/
/*    font-size: 1rem;*/
/*    font-weight: 600;*/
/*    color: #0077cc;*/
/*    text-decoration: none;*/
/*    position: relative;*/
/*    display: inline-block;*/
/*    border-bottom: 2px solid rgba(0, 119, 204, 0.25);*/
/*    padding-bottom: 2px;*/
/*    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),*/
/*    color 0.25s ease, border-bottom 0.25s ease;*/
/*}*/

/*!* ===== 悬停高亮 ===== *!*/
/*.mail-special:hover, .mail-special2:hover {*/
/*    color: transparent;*/
/*    background: linear-gradient(90deg, #a77ff7, #6f9bf8);*/
/*    background-clip: text;*/
/*    -webkit-background-clip: text;*/
/*    transform: scale(1.12);*/
/*    border-bottom: 2px solid #6f9bf8;*/
/*    text-shadow: 0 0 6px rgba(111, 155, 248, 0.3);*/
/*    cursor: pointer;*/
/*}*/

/*!* ===== Tooltip 气泡 ===== *!*/
/*.mail-special::after, .mail-special2::after {*/
/*    content: attr(data-tooltip);*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: -45px;*/
/*    transform: translateX(-50%) translateY(10px);*/
/*    background: rgba(20, 60, 140, 0.9);*/
/*    backdrop-filter: blur(6px);*/
/*    color: #fff;*/
/*    font-size: 0.75rem;*/
/*    padding: 6px 10px;*/
/*    border-radius: 8px;*/
/*    white-space: nowrap;*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*    transition: all 0.3s ease;*/
/*    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);*/
/*}*/

/*!* Tooltip 小三角形 *!*/
/*.mail-special::before, .mail-special2::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: -10px;*/
/*    left: 50%;*/
/*    transform: translateX(-50%) scale(0.8);*/
/*    border: 6px solid transparent;*/
/*    border-top-color: rgba(20, 60, 140, 0.9);*/
/*    opacity: 0;*/
/*    transition: all 0.3s ease;*/
/*}*/

/*!* 悬停时显示 Tooltip *!*/
/*.mail-special:hover::after,*/
/*.mail-special2:hover::after,*/
/*.mail-special:hover::before,*/
/*.mail-special2:hover::before {*/
/*    opacity: 1;*/
/*    transform: translateX(-50%) translateY(0);*/
/*}*/

/*!* 点击成功反馈 *!*/
/*.mail-special.copied, .mail-special2.copied {*/
/*    animation: copied-flash 1s ease;*/
/*}*/

/*@keyframes copied-flash {*/
/*    0% { background-color: transparent; }*/
/*    30% { background-color: rgba(255, 215, 0, 0.45); }*/
/*    100% { background-color: transparent; }*/
/*}*/

/*!* ===== 暗色主题适配 ===== *!*/
/*[data-theme="dark"] .mail-special,*/
/*[data-theme="dark"] .mail-special2 {*/
/*    color: #6ba8ff;*/
/*    border-bottom: 2px solid rgba(147, 197, 253, 0.35);*/
/*}*/

/*[data-theme="dark"] .mail-special:hover,*/
/*[data-theme="dark"] .mail-special2:hover {*/
/*    color: transparent;*/
/*    background: linear-gradient(90deg, #b48efc, #7cb8ff);*/
/*    -webkit-background-clip: text;*/
/*    border-bottom: 2px solid rgba(147, 197, 253, 0.6);*/
/*    text-shadow: 0 0 10px rgba(147, 197, 253, 0.4);*/
/*}*/

/*!* 暗色模式 Tooltip 优化 *!*/
/*[data-theme="dark"] .mail-special::after,*/
/*[data-theme="dark"] .mail-special2::after {*/
/*    background: rgba(80, 100, 160, 0.85);*/
/*    border: 1px solid rgba(255, 255, 255, 0.05);*/
/*    box-shadow: 0 0 8px rgba(147, 197, 253, 0.2);*/
/*}*/

.mail-special,
.mail-special2 {
    font-family: Calibri, "Times New Roman", serif;
    font-size: 1rem;
    font-weight: 600;
    color: #0077cc;
    text-decoration: none;
    position: relative;
    display: inline-block;
    border-bottom: 2px solid rgba(0, 119, 204, 0.25);
    padding-bottom: 2px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== 悬停渐变高亮 ===== */
.mail-special:hover,
.mail-special2:hover {
    background: linear-gradient(90deg, #6f9bf8 0%, #a77ff7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 8px rgba(111, 155, 248, 0.35);
    transform: scale(1.1);
    border-bottom: 2px solid #6f9bf8;
    cursor: pointer;
}

/* ===== 点击反馈动画 ===== */
.mail-special.copied,
.mail-special2.copied {
    animation: copied-flash 1s ease;
}
@keyframes copied-flash {
    0% { background-color: transparent; }
    30% { background-color: rgba(255, 215, 0, 0.45); }
    100% { background-color: transparent; }
}

/* ===== 暗色主题适配 ===== */
[data-theme="dark"] .mail-special,
[data-theme="dark"] .mail-special2 {
    color: #a3b8ff;
    border-bottom: 2px solid rgba(147, 197, 253, 0.35);
}
[data-theme="dark"] .mail-special:hover,
[data-theme="dark"] .mail-special2:hover {
    background: linear-gradient(90deg, #b48efc, #7cb8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 2px solid rgba(147, 197, 253, 0.6);
    text-shadow: 0 0 12px rgba(147, 197, 253, 0.4);
}
/* =========================================
   6. Documents & Buttons
   ========================================= */
.publish-links-wrapper { text-align: center; }

.publish-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  background: var(--bg-card);
  padding: 12px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.publish-link {
  padding: 10px 24px;
  border-radius: var(--radius-full);
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.publish-link:hover {
  background: var(--bg-hover);
  color: var(--primary);
  transform: translateY(-2px);
}

/* =========================================
   7. Contact & Footer
   ========================================= */
.contact {
  background: var(--bg-card); /* 改为卡片色，不再是大色块 */
  border-top: 1px solid var(--border-light);
}

.contact-links {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 40px;
}

.contact-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
}

.contact-item i {
  font-size: 2rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text-main);
}

.contact-item:hover i {
  transform: scale(1.2) rotate(8deg);
  color: var(--primary);
}
.contact-item:hover p { color: var(--primary); }

footer {
  text-align: center;
  padding: 30px;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
  background: var(--bg-body);
}

/* ===== 聊一聊标题（蓝紫柔光渐变版） ===== */
/* ===== 聊一聊标题（星环流光呼吸特效） ===== */
/* ===== 聊一聊标题（快节奏蓝光呼吸版） ===== */
/* ===== 聊一聊标题：呼吸+字体同步变化 ===== */
h2[data-i18n="contact.title"] {
    position: relative;
    text-align: center;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1e293b; /* 默认沉稳黑 */
    margin: 3rem auto 2rem;
    letter-spacing: 0.8px;
    transition: all 0.35s ease;
}

/* 悬浮触发呼吸动画 */
h2[data-i18n="contact.title"]:hover {
    color: #2563eb;
    animation: pulseText 1.4s ease-in-out infinite;
    cursor: pointer;
}

/* 核心动画：快速呼吸 + 光晕同步 */
@keyframes pulseText {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
        text-shadow:
                0 0 8px rgba(96,165,250,0.4),
                0 0 14px rgba(96,165,250,0.25);
    }
    50% {
        transform: scale(1.12); /* 字体随呼吸变大 */
        filter: brightness(1.4);
        text-shadow:
                0 0 20px rgba(96,165,250,0.7),
                0 0 40px rgba(96,165,250,0.5);
    }
}

/* 下划线特效 */
h2[data-i18n="contact.title"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.25);
    transition: all 0.4s ease;
}

h2[data-i18n="contact.title"]:hover::after {
    width: 120px;
    background: rgba(96,165,250,0.8);
    box-shadow: 0 0 12px rgba(96,165,250,0.5);
}

/* 暗色模式适配 */
[data-theme="dark"] h2[data-i18n="contact.title"] {
    color: #e2e8f0;
}
[data-theme="dark"] h2[data-i18n="contact.title"]:hover {
    color: #60a5fa;
    text-shadow:
            0 0 14px rgba(96,165,250,0.7),
            0 0 26px rgba(96,165,250,0.5);
}
[data-theme="dark"] h2[data-i18n="contact.title"]::after {
    background: rgba(96,165,250,0.25);
}
[data-theme="dark"] h2[data-i18n="contact.title"]:hover::after {
    background: rgba(147,197,253,0.8);
    box-shadow: 0 0 14px rgba(147,197,253,0.5);
}

/* 离开悬浮后自动“平滑落地” */
h2[data-i18n="contact.title"]:not(:hover) {
    transform: scale(1);
    filter: brightness(1);
    text-shadow: none;
}

/* =========================================
   8. Mobile Responsive
   ========================================= */
@media (max-width: 768px) {
  .nav-links { display: none; } /* 暂时简化手机端 */

  .intro { padding-top: 60px; }
  .gradient-text { font-size: 2.2rem; }

  /* 手机端图片适配 */
  .avatar {
    width: 120px;
    height: 120px;
  }
  .project-thumbnail {
    height: 180px;
  }
  .project-img {
    margin: 20px auto;
    border-radius: 8px;
  }

  .publish-links {
    flex-direction: column;
    border-radius: var(--radius-md);
    width: 100%;
  }

  .contact-links {
    gap: 24px;
    flex-wrap: wrap;
  }
}


/* Paste this AFTER your existing CSS */

/* =========================================
   9. Open Source Section (New)
   ========================================= */
/*.opensource-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
/*  gap: 24px;*/
/*}*/

/*.os-card {*/
/*  background: var(--bg-card);*/
/*  border: 1px solid var(--border-light);*/
/*  border-radius: var(--radius-md);*/
/*  padding: 24px;*/
/*  transition: var(--transition-base);*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  height: 100%;*/
/*}*/

/*.os-card:hover {*/
/*  transform: translateY(-5px);*/
/*  border-color: var(--primary);*/
/*  box-shadow: var(--shadow-card);*/
/*}*/

/*.os-header {*/
/*  display: flex;*/
/*  align-items: flex-start;*/
/*  justify-content: space-between;*/
/*  margin-bottom: 12px;*/
/*}*/

/*.os-title {*/
/*  font-size: 1.1rem;*/
/*  font-weight: 700;*/
/*  color: var(--text-main);*/
/*}*/

/*.os-desc {*/
/*  font-size: 0.9rem;*/
/*  color: var(--text-muted);*/
/*  margin-bottom: 16px;*/
/*  flex-grow: 1;*/
/*}*/

/*.os-tags {*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  !*gap: 8px;*!*/
/*  gap: 8px;*/
/*  margin-bottom: 20px;*/
/*}*/

/*!* 彩色系列 *!*/
/*.os-tag {*/
/*    font-size: 0.75rem;*/
/*    padding: 4px 10px;*/
/*    border-radius: 20px;*/
/*    font-weight: 500;*/
/*    background: var(--bg-hover);*/
/*    color: var(--text-muted);*/
/*    transition: all 0.3s ease;*/
/*}*/


/*!* 一定要写在下面！！ *!*/
/*.tag-scope-opensource .os-tag {*/
/*    font-family: "Times New Roman", Times, serif;*/
/*    font-weight: 700;*/
/*    background: rgba(255, 32, 32, 0.7);*/
/*    color: #ffffff;*/
/*}*/
/*[data-theme="dark"] .tag-scope-opensource .os-tag {*/
/*    background: rgba(192,132,252,0.25);*/
/*    color: #c084fc;*/
/*}*/

/*!* 让具体标签颜色规则覆盖紫色范围 *!*/
/*!* ✅ 覆盖紫色区域 *!*/
/*.tag-scope-opensource .os-tag[data-tag] {*/
/*    background: unset !important;*/
/*    color: unset !important;*/
/*}*/


/*!* ✅ 彩色规则写在最后 *!*/

/*!* 悬浮高亮 *!*/
/*.os-tag:hover {*/
/*    transform: scale(1.05);*/
/*    box-shadow: 0 2px 6px rgba(0,0,0,0.1);*/
/*    filter: brightness(1.6);*/
/*}*/

/*.os-actions {*/
/*  display: flex;*/
/*  gap: 12px;*/
/*}*/

/*!*.os-btn {*!*/
/*!*  font-size: 0.85rem;*!*/
/*!*  font-weight: 600;*!*/
/*!*  color: var(--primary);*!*/
/*!*  display: flex;*!*/
/*!*  align-items: center;*!*/
/*!*  gap: 6px;*!*/
/*!*}*!*/
/*!*.os-btn:hover {*!*/
/*!*    text-decoration: none;*!*/
/*!*}*!*/

/*.os-btn {*/
/*    position: relative;*/
/*    font-size: 0.85rem;*/
/*    font-weight: 600;*/
/*    color: var(--primary);*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 6px;*/
/*    transition: all 0.25s ease;*/
/*    border-radius: 8px;*/
/*    padding: 4px 10px;*/
/*}*/

/*!* 悬浮：轻微提亮、柔光融合 *!*/
/*.os-btn:hover {*/
/*    text-decoration: none;*/
/*    transform: translateY(-1px);*/
/*    background: rgba(37, 99, 235, 0.06); !* 轻微底光 *!*/
/*    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);*/
/*    filter: brightness(1.05);*/
/*}*/

/*!* 点击反馈 *!*/
/*.os-btn:active {*/
/*    transform: scale(0.98);*/
/*    box-shadow: 0 0 4px rgba(37, 99, 235, 0.15);*/
/*}*/

/*!* 暗色主题 *!*/
/*[data-theme="dark"] .os-btn:hover {*/
/*    background: rgba(96, 165, 250, 0.08);*/
/*    box-shadow: 0 0 8px rgba(96, 165, 250, 0.25);*/
/*    filter: brightness(1.1);*/
/*}*/

/* ========== OPEN SOURCE SECTION 增强版（红金柔光） ========== */
.opensource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    padding-top: 1rem;
}

/* 卡片主体 */
.os-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 24px;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp 0.6s ease forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ✨ 悬浮特效 */
.os-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow:
            0 6px 20px rgba(239, 68, 68, 0.15),
            0 0 12px rgba(249, 115, 22, 0.2);
    background: radial-gradient(circle at top right,
    rgba(239, 68, 68, 0.05),
    rgba(249, 115, 22, 0.03));
    transition: all 0.35s ease;
}

/* 标题区域 */
.os-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.os-title {
    position: relative;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.4px;
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

/* 悬浮时标题轻发光 */
.os-card:hover .os-title {
    color: #dc2626;
    text-shadow:
            0 0 4px rgba(239, 68, 68, 0.4),
            0 0 10px rgba(249, 115, 22, 0.25);
}

/* 描述文字 */
.os-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    flex-grow: 1;
    line-height: 1.6;
    transition: color 0.3s ease;
}
.os-card:hover .os-desc {
    color: var(--text-main);
}

/* 标签区 */
.os-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.os-tag {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    transition: all 0.3s ease;
}

.os-tag:hover {
    transform: scale(1.08);
    background: rgba(239, 68, 68, 0.25);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.25);
    color: #ef4444;
}

/* 暗色模式适配 */
[data-theme="dark"] .os-card {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .os-card:hover {
    background: rgba(127, 29, 29, 0.25);
    box-shadow:
            0 0 14px rgba(239, 68, 68, 0.35),
            0 8px 20px rgba(0, 0, 0, 0.55);
}

/* 按钮 */
.os-actions {
    display: flex;
    gap: 12px;
}
.os-btn {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 4px 10px;
}

.os-btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
    background: rgba(239, 68, 68, 0.1);
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.15);
    filter: brightness(1.1);
}
.os-btn:active {
    transform: scale(0.97);
}

/**/

/*!*interest 卡片*!*/
/*!* ========== INTEREST SECTION 样式 ========== *!*/
/*.interest-grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
/*    gap: 24px;*/
/*}*/

/*!* 卡片本体 *!*/
/*.it-card {*/
/*    background: var(--bg-card);*/
/*    border: 1px solid var(--border-light);*/
/*    border-radius: var(--radius-md);*/
/*    padding: 24px;*/
/*    transition: all 0.4s ease;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    height: 100%;*/
/*    opacity: 0;*/
/*    transform: translateY(12px);*/
/*    animation: fadeUp 0.6s ease forwards;*/
/*}*/

/*@keyframes fadeUp {*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/

/*.it-card:hover {*/
/*    transform: translateY(-6px);*/
/*    border-color: var(--primary);*/
/*    box-shadow: 0 8px 20px rgba(0,0,0,0.08);*/
/*}*/

/*!* 标题区域 *!*/
/*.it-header {*/
/*    display: flex;*/
/*    align-items: flex-start;*/
/*    justify-content: space-between;*/
/*    margin-bottom: 12px;*/
/*}*/

/*.it-title {*/
/*    font-size: 1.1rem;*/
/*    font-weight: 700;*/
/*    color: var(--text-main);*/
/*}*/

/*!* 描述 *!*/
/*.it-desc {*/
/*    font-size: 0.9rem;*/
/*    color: var(--text-muted);*/
/*    margin-bottom: 16px;*/
/*    flex-grow: 1;*/
/*}*/

/*!* 标签 *!*/
/*.it-tags {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 8px;*/
/*    margin-bottom: 20px;*/
/*}*/

/*.it-tag {*/
/*    font-size: 0.75rem;*/
/*    padding: 4px 10px;*/
/*    border-radius: 20px;*/
/*    font-weight: 500;*/
/*    background: rgba(59,130,246,0.12); !* 柔和蓝 *!*/
/*    color: #2563eb;*/
/*    transition: all 0.3s ease;*/
/*}*/
/*[data-theme="dark"] .it-tag {*/
/*    background: rgba(96,165,250,0.15);*/
/*    color: #93c5fd;*/
/*}*/

/*.it-tag:hover {*/
/*    transform: scale(1.05);*/
/*    filter: brightness(1.3);*/
/*    box-shadow: 0 2px 6px rgba(0,0,0,0.1);*/
/*}*/

/*!* 按钮 *!*/
/*.it-actions {*/
/*    display: flex;*/
/*    gap: 12px;*/
/*}*/

/*.it-btn {*/
/*    font-size: 0.85rem;*/
/*    font-weight: 600;*/
/*    color: var(--primary);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 6px;*/
/*}*/
/*.it-btn:hover {*/
/*    text-decoration: underline;*/
/*    filter: brightness(1.3);*/
/*}*/


/* ========== INTEREST SECTION 样式（增强版） ========== */
.interest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    padding-top: 1rem;
}

/* 卡片主体 */
.it-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 24px;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp 0.6s ease forwards;
}

/* 入场动画 */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 悬浮效果 ✨ */
.it-card:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: rgba(192, 132, 252, 0.6);
    box-shadow:
            0 6px 20px rgba(147, 51, 234, 0.15),
            0 0 12px rgba(192, 132, 252, 0.25);
    background: radial-gradient(circle at top left,
    rgba(192, 132, 252, 0.08),
    rgba(255, 255, 255, 0.03));
    transition: all 0.35s ease;
}

/* 标题区域 */
.it-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.it-title {
    position: relative;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.3px;
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

/* 悬浮时标题轻发光 */
.it-card:hover .it-title {
    color: #c084fc;
    text-shadow:
            0 0 4px rgba(192, 132, 252, 0.4),
            0 0 10px rgba(147, 51, 234, 0.25);
}

/* 描述文字 */
.it-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    flex-grow: 1;
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* 悬浮时描述微亮 */
.it-card:hover .it-desc {
    color: var(--text-main);
}

/* 标签 */
.it-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.it-tag {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
    background: rgba(147, 51, 234, 0.08);
    color: #9333ea;
    transition: all 0.3s ease;
}

.it-tag:hover {
    transform: scale(1.05);
    background: rgba(192, 132, 252, 0.18);
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.25);
    color: #a855f7;
}

/* 暗色模式适配 */
[data-theme="dark"] .it-card {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .it-card:hover {
    background: rgba(49, 46, 129, 0.25);
    box-shadow:
            0 0 12px rgba(192, 132, 252, 0.35),
            0 8px 20px rgba(0, 0, 0, 0.5);
}

/* 按钮 */
.it-actions {
    display: flex;
    gap: 12px;
}
.it-btn {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}
.it-btn:hover {
    text-decoration: underline;
    filter: brightness(1.25);
    transform: translateY(-2px);
}


/* ====== Interest 标题：激光紫兰呼吸版 ====== */
#interest h2 {
    position: relative;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 3rem auto 2rem;
    letter-spacing: 0.5px;
    animation: interestBreath 4.5s ease-in-out infinite;
}

/* 💜 呼吸动画 */
@keyframes interestBreath {
    0%, 100% {
        text-shadow:
                0 0 3px rgba(147, 51, 234, 0.35),
                0 0 8px rgba(192, 132, 252, 0.25);
        filter: brightness(1);
    }
    50% {
        text-shadow:
                0 0 6px rgba(147, 51, 234, 0.7),
                0 0 14px rgba(192, 132, 252, 0.45);
        filter: brightness(1.2);
    }
}

/* ====== Interest 标题（激光紫兰呼吸 + 悬浮） ====== */
#interest h2 {
    position: relative;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 3rem auto 2rem;
    letter-spacing: 0.5px;
    animation: interestBreath 4.5s ease-in-out infinite;
    transition: all 0.4s ease;
}

/* 💜 呼吸动画 */
@keyframes interestBreath {
    0%, 100% {
        text-shadow:
                0 0 3px rgba(147, 51, 234, 0.35),
                0 0 8px rgba(192, 132, 252, 0.25);
        filter: brightness(1);
    }
    50% {
        text-shadow:
                0 0 6px rgba(147, 51, 234, 0.7),
                0 0 14px rgba(192, 132, 252, 0.45);
        filter: brightness(1.18);
    }
}

/* 🌈 激光紫流光下划线 */
#interest h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(
            90deg,
            rgba(147, 51, 234, 0) 0%,
            rgba(192, 132, 252, 1) 50%,
            rgba(147, 51, 234, 0) 100%
    );
    background-size: 200% 100%;
    animation: interestFlow 4s linear infinite;
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.3);
    transition: all 0.4s ease;
}

/* 💫 下划线流动动画 */
@keyframes interestFlow {
    0% { background-position: 200% 0; opacity: 0.8; }
    50% { background-position: 0% 0; opacity: 1; }
    100% { background-position: -200% 0; opacity: 0.8; }
}

/* 🪶 悬浮特效 */
#interest h2:hover {
    transform: translateY(-3px) scale(1.03);
    color: #c084fc;
    text-shadow:
            0 0 6px rgba(192, 132, 252, 0.5),
            0 0 14px rgba(147, 51, 234, 0.4);
    filter: brightness(1.2);
}

#interest h2:hover::after {
    width: 110px;
    box-shadow:
            0 0 12px rgba(192, 132, 252, 0.45),
            0 0 24px rgba(192, 132, 252, 0.35);
    opacity: 1;
}

/* 🌙 暗色模式 */
[data-theme="dark"] #interest h2 {
    color: #E9D5FF;
}
[data-theme="dark"] #interest h2::after {
    background: linear-gradient(
            90deg,
            rgba(216, 180, 254, 0) 0%,
            rgba(216, 180, 254, 0.9) 50%,
            rgba(216, 180, 254, 0) 100%
    );
    box-shadow: 0 0 8px rgba(216, 180, 254, 0.4);
}



/* ===== 居中主线 + 交错时间轴（激光紫兰版） ===== */
/* ===== 居中主线 + 交错时间轴（激光紫兰舒展版） ===== */
/* ===== 居中主线 + 交错时间轴（激光紫兰舒展→紧凑版） ===== */
/* ===== 居中主线 + 交错时间轴（激光紫兰舒展→加宽紧凑版） ===== */
.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 28px 0; /* 再略紧一点 */
}

/* 中心竖线（柔光紫渐变） */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom,
    rgba(168,85,247,0.1),
    rgba(192,132,252,0.6),
    rgba(168,85,247,0.1));
    transform: translateX(-50%);
    animation: linePulseViolet 6s ease-in-out infinite;
}

@keyframes linePulseViolet {
    0%,100% { opacity: 0.7; filter: brightness(0.9); }
    50% { opacity: 1; filter: brightness(1.2); }
}

/* 每个节点 */
.timeline-item {
    position: relative;
    width: 50%;
    padding: 14px 48px; /* 更紧凑 */
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease forwards;
}

.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}
.timeline-item:nth-child(even) {
    left: 50%;
}

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* 节点圆点（激光紫兰光） */
.timeline-dot {
    position: absolute;
    top: 18px;
    right: -10px;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle, rgba(168,85,247,1) 0%, rgba(216,180,254,0.35) 100%);
    border-radius: 50%;
    border: 2px solid rgba(192,132,252,0.6);
    box-shadow: 0 0 10px rgba(192,132,252,0.4);
    z-index: 2;
    transition: all 0.4s ease;
}
.timeline-item:nth-child(even) .timeline-dot {
    left: -10px;
    right: auto;
}

.timeline-item:hover .timeline-dot {
    transform: scale(1.25);
    box-shadow:
            0 0 18px rgba(192,132,252,0.6),
            0 0 30px rgba(216,180,254,0.45);
}

/* 卡片主体（加宽七个汉字距离） */
.timeline-content {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.04);
    display: inline-block;
    max-width: 560px; /* ✅ 原440px → 560px，约等于七个汉字宽 */
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-content {
    border-color: rgba(192,132,252,0.45);
    box-shadow:
            0 4px 12px rgba(168,85,247,0.15),
            inset 0 0 10px rgba(192,132,252,0.1);
    transform: scale(1.03);
}

/* 标题 */
.timeline-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.timeline-item:hover h3 {
    color: #a855f7;
    text-shadow: 0 0 10px rgba(192,132,252,0.4);
}

/* 文本描述 */
.timeline-content p {
    font-size: 0.93rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* 暗色主题 */
[data-theme="dark"] .timeline-container::before {
    background: linear-gradient(to bottom,
    rgba(147,51,234,0.15),
    rgba(216,180,254,0.5),
    rgba(147,51,234,0.15));
}

[data-theme="dark"] .timeline-dot {
    background: radial-gradient(circle, rgba(192,132,252,1) 0%, rgba(216,180,254,0.3) 100%);
    border-color: rgba(216,180,254,0.5);
    box-shadow: 0 0 12px rgba(216,180,254,0.3);
}

[data-theme="dark"] .timeline-content {
    background: rgba(30,27,75,0.95);
    border-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .timeline-item:hover .timeline-content {
    background: rgba(109,40,217,0.08);
    box-shadow: 0 0 18px rgba(192,132,252,0.25);
}


/*隔离线*/


.brieflook {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(90deg, #0072ff, #00e5ff);
    -webkit-background-clip: text;
    color: transparent;
    margin: 18px 0;
}


.article-online {
    display: grid;
    grid-template-columns: 1fr 3fr; /* 左侧1份空间，右侧3份空间 */
    align-items: center;
    gap: 5px; /* 在线阅读与作者之间间隙 */
    width: 100%;
    margin-top: 12px;
}

.online-read {

    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 5px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.25s ease, color 0.25s ease;
}

.online-read:hover {
    transform: scale(1.07);
    color: #003d99;
    color:  red;
}


.online-read .icon {
    width: 26px;
    height: 20px;
}

.orcid-icon {
    width: 22px;
    height: 20px;
    margin-right: 4px;
    vertical-align: middle;
    opacity: 0.9;
    transition: transform .2s ease, opacity .2s ease;
}



/* 悬浮时图标也响应交互 */
.author:hover .orcid-icon {
    opacity: 1;
    transform: scale(1.1);
}

.authors {
    display: flex;
    justify-content:flex-end;
    align-items: center;
    width: 100%;
    gap: 25px;
}

.author {
    display: inline-flex;
    align-items: center;  /* 图标与文字垂直居中 */
    gap: 4px;             /* 图标与文字间距 */
    text-decoration: none;
    transition: transform .18s ease;
}

.authors .author {
    text-align: center;
    text-decoration: none;
    color: rgb(0, 153, 182);
    font-weight: 500;
    transition: 0.2s ease;
}

.authors .author:hover {
    color: #ff0000;
    transform: scale(1.06);
}

/* Orcid Authors */





/* =========================================
   11. Tech Stack Section (New)
   ========================================= */
.skills-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.skill-category h3 {
  font-size: 1.15rem;
    font-weight: 600;
  margin-bottom: 18px;
  color: var(--text-main);
  border-left: 3px solid var(--primary);
  padding-left: 12px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .skill-category h3 {
    border-color: var(--primary-glow);
}


.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.skill-badge {
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.skill-badge:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    /* 柔光+亮度+发光 */
    background: rgba(37, 99, 235, 0.08);
    box-shadow:
            0 6px 12px rgba(37, 99, 235, 0.15),
            0 0 12px rgba(96, 165, 250, 0.2),
            inset 0 0 6px rgba(255, 255, 255, 0.1);
    filter: brightness(1.15) saturate(1.1);
    transition: all 0.35s ease;
}

.skill-badge i {
    font-size: 1rem;
    opacity: 0.85;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.skill-badge:hover i {
    transform: rotate(-8deg) scale(1.15);
    opacity: 1;
}

[data-theme="dark"] .skill-badge {
    background: rgba(30,41,59,0.9);
    border-color: rgba(255,255,255,0.05);
    box-shadow: 0 1px 3px rgba(255,255,255,0.04);
}
[data-theme="dark"] .skill-badge:hover {
    background: rgba(96, 165, 250, 0.12);
    border-color: var(--primary);
    color: #e8f0ff;
    box-shadow:
            0 0 12px rgba(96, 165, 250, 0.3),
            0 2px 8px rgba(0,0,0,0.6);
    filter: brightness(1.25) saturate(1.15);
}

/* ====== SKILLS 标题：极光蓝呼吸增强版 ====== */
#skills h2 {
    position: relative;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 2.5rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

#skills h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    border-radius: 10px;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
    transition: all 0.4s ease;
}

#skills h2:hover {
    color: var(--primary);
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
    transform: translateY(-3px);
}

#skills h2:hover::after {
    width: 120px;
    box-shadow: 0 0 16px rgba(96, 165, 250, 0.6);
}

/* 下划线流光（与呼吸同步） */
#skills h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(90deg,
    rgba(56, 189, 248, 0) 0%,
    rgba(56, 189, 248, 0.9) 50%,
    rgba(56, 189, 248, 0) 100%);
    animation: auroraFlow 4s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

/* 蓝色流光动画 */
@keyframes auroraFlow {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scaleX(1); }
    50% { opacity: 1; transform: translateX(-50%) scaleX(1.05); }
}

/* 暗色模式适配 */
[data-theme="dark"] #skills h2 {
    color: #E2E8F0;
    text-shadow:
            0 0 2px rgba(147, 197, 253, 0.4),
            0 0 6px rgba(96, 165, 250, 0.3);
}
[data-theme="dark"] #skills h2::after {
    background: linear-gradient(90deg,
    rgba(147, 197, 253, 0) 0%,
    rgba(147, 197, 253, 0.85) 50%,
    rgba(147, 197, 253, 0) 100%);
    box-shadow: 0 0 10px rgba(147, 197, 253, 0.25);
}
/* ====== 联系我标题（简约发光） ====== */
#contact h2 {
    position: relative;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 2.5rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* 下方细长发光横线 */
#contact h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    border-radius: 10px;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
    transition: all 0.4s ease;
}

/* 悬停时：亮起发光、轻微上浮 */
#contact h2:hover {
    color: var(--primary);
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
    transform: translateY(-3px);
}

#contact h2:hover::after {
    width: 120px;
    box-shadow: 0 0 16px rgba(96, 165, 250, 0.6);
}

/* 暗色模式适配 */
[data-theme="dark"] #contact h2 {
    color: #e2e8f0;
}

[data-theme="dark"] #contact h2::after {
    background: rgba(96, 165, 250, 0.8);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.3);
}


/*智库 标题的原始CSS代码*/
/*h2[data-i18n="intro.myteam"] {*/
/*    position: relative;*/
/*    text-align: center;*/
/*    font-size: 1.8rem;*/
/*    font-weight: 700;*/
/*    color: var(--text-main);*/
/*    margin: 3rem auto 2rem;*/
/*    letter-spacing: 0.5px;*/
/*    transition: all 0.3s ease;*/
/*}*/

/*h2[data-i18n="intro.myteam"]::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    bottom: -10px;*/
/*    transform: translateX(-50%);*/
/*    width: 60px;*/
/*    height: 3px;*/
/*    border-radius: 10px;*/
/*    background: var(--primary);*/
/*    box-shadow: 0 0 8px var(--primary-glow);*/
/*    transition: all 0.4s ease;*/
/*}*/

/*h2[data-i18n="intro.myteam"]:hover {*/
/*    color: var(--primary);*/
/*    text-shadow: 0 0 10px rgba(96, 165, 250, 0.4);*/
/*    transform: translateY(-3px);*/
/*}*/

/*h2[data-i18n="intro.myteam"]:hover::after {*/
/*    width: 120px;*/
/*    box-shadow: 0 0 16px rgba(96, 165, 250, 0.6);*/
/*}*/

/*[data-theme="dark"] h2[data-i18n="intro.myteam"] {*/
/*    color: #e2e8f0;*/
/*}*/

/*[data-theme="dark"] h2[data-i18n="intro.myteam"]::after {*/
/*    background: rgba(96, 165, 250, 0.8);*/
/*    box-shadow: 0 0 12px rgba(96, 165, 250, 0.3);*/
/*}*/

h2[data-i18n="intro.myteam"] {
    position: relative;
    text-align: center;
    font-size: 1.9rem;
    font-weight: 800;
    background: linear-gradient(90deg, #a855f7 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 3rem auto 2rem;
    letter-spacing: 1px;
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.15);
    transition: all 0.4s ease;
    cursor: pointer;
}

/* 流动的下划线 */
h2[data-i18n="intro.myteam"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    width: 90px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(168,85,247,0) 0%, rgba(168,85,247,1) 50%, rgba(96,165,250,0) 100%);
    background-size: 200% 100%;
    animation: glowMove 3.5s linear infinite;
    box-shadow: 0 0 10px rgba(147,197,253,0.3);
    transition: all 0.6s ease;
}

/* 文字悬浮与外光晕 */
h2[data-i18n="intro.myteam"]:hover {
    transform: translateY(-5px) scale(1.02);
    text-shadow:
            0 0 10px rgba(168,85,247,0.4),
            0 0 20px rgba(96,165,250,0.5),
            0 0 40px rgba(168,85,247,0.3);
}

/* 下划线在悬浮时变宽并增强亮度 */
h2[data-i18n="intro.myteam"]:hover::after {
    width: 150px;
    box-shadow:
            0 0 15px rgba(168,85,247,0.5),
            0 0 25px rgba(96,165,250,0.4);
    animation-duration: 2s;
}

/* 下划线光流动画 */
@keyframes glowMove {
    0% { background-position: 200% 0; opacity: 0.6; }
    50% { background-position: 0% 0; opacity: 1; }
    100% { background-position: -200% 0; opacity: 0.6; }
}

/* 暗色模式适配 */
[data-theme="dark"] h2[data-i18n="intro.myteam"] {
    text-shadow: 0 0 18px rgba(192, 132, 252, 0.4);
}
[data-theme="dark"] h2[data-i18n="intro.myteam"]::after {
    background: linear-gradient(90deg, rgba(192,132,252,0) 0%, rgba(192,132,252,1) 50%, rgba(96,165,250,0) 100%);
    box-shadow: 0 0 12px rgba(192,132,252,0.4);
}



/* ====== TIMELINE 标题：银蓝流光（柔聚视觉优化） ====== */
/* ====== TIMELINE 标题：激光紫蓝（Laser Violet-Blue） ====== */
#timeline h2[data-i18n="timeline.title"] {
    position: relative;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 3rem auto 2rem;
    letter-spacing: 0.6px;
    transition: all 0.4s ease;
}

/* 发光下划线：激光紫蓝流动 */
#timeline h2[data-i18n="timeline.title"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(90deg,
    rgba(147, 51, 234, 0) 0%,
    rgba(168, 85, 247, 0.85) 30%,
    rgba(59, 130, 246, 0.9) 70%,
    rgba(147, 51, 234, 0) 100%);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
    background-size: 200% 100%;
    animation: laserFlow 3s infinite linear;
    transition: all 0.4s ease;
}

/* 流动激光动画 */
@keyframes laserFlow {
    0% { background-position: 200% 0; opacity: 0.7; }
    50% { background-position: 0% 0; opacity: 1; }
    100% { background-position: -200% 0; opacity: 0.7; }
}

/* 悬浮文字柔光 + 内呼吸 */
#timeline h2[data-i18n="timeline.title"]:hover {
    color: rgba(190, 150, 255, 0.98);
    text-shadow:
            0 0 4px rgba(160, 100, 255, 0.45),
            0 0 10px rgba(100, 180, 255, 0.25);
    transform: translateY(-2px) scale(1.02);
    animation: innerBreathLaser 2.8s ease-in-out infinite;
}

/* 内呼吸：激光脉冲轻微闪动 */
@keyframes innerBreathLaser {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
}

/* Hover 时激光更亮且范围扩大 */
#timeline h2[data-i18n="timeline.title"]:hover::after {
    width: 120px;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.45),
    0 0 24px rgba(59, 130, 246, 0.25);
    filter: brightness(1.2);
    animation-duration: 2s;
}

/* 暗色模式适配：高对比但不炸亮 */
[data-theme="dark"] #timeline h2[data-i18n="timeline.title"]::after {
    background: linear-gradient(90deg,
    rgba(192, 132, 252, 0) 0%,
    rgba(216, 180, 254, 0.9) 40%,
    rgba(96, 165, 250, 0.85) 60%,
    rgba(192, 132, 252, 0) 100%);
    box-shadow: 0 0 14px rgba(192, 132, 252, 0.35);
}

/*my papers*/
/* =============================
   个人论文区块（蓝光晶流风格）
============================= */

/* --- 标题样式 --- */
#projects h2[data-i18n="projects.title"] {
    position: relative;
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    font-size: 1.9rem;
    color: var(--text-main);
    margin-bottom: 2.5rem;
    animation: titleGlow 6s ease-in-out infinite alternate;
    transition: all 0.4s ease;
}

/* 💫 蓝光呼吸动画 */
@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 0 6px rgba(59,130,246,0.4), 0 0 14px rgba(96,165,250,0.25);
    }
    50% {
        text-shadow: 0 0 10px rgba(59,130,246,0.7), 0 0 22px rgba(147,197,253,0.45);
    }
}

/* 🌊 下划线流光 */
/*#projects h2[data-i18n="projects.title"]::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    bottom: -12px;*/
/*    transform: translateX(-50%);*/
/*    width: 90px;*/
/*    height: 3px;*/
/*    border-radius: 8px;*/
/*    background: linear-gradient(90deg,*/
/*    rgba(37,99,235,0) 0%,*/
/*    rgba(59,130,246,1) 50%,*/
/*    rgba(37,99,235,0) 100%);*/
/*    background-size: 200% 100%;*/
/*    box-shadow: 0 0 10px rgba(59,130,246,0.4);*/
/*    animation: flowLight 4.5s infinite ease-in-out;*/
/*}*/

#projects h2[data-i18n="projects.title"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    width: 90px;
    height: 3px;
    border-radius: 8px;
    background: linear-gradient(90deg,
    rgba(37,99,235,0) 0%,
    rgba(59,130,246,1) 50%,
    rgba(37,99,235,0) 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 10px rgba(59,130,246,0.4);
    animation: flowLight 4.5s infinite ease-in-out;
    transition: width 0.6s ease, box-shadow 0.6s ease, opacity 0.4s ease;
}


/* 流光动画 */
@keyframes flowLight {
    0% { background-position: 200% 0; opacity: 0.7; }
    50% { background-position: 0% 0; opacity: 1; }
    100% { background-position: -200% 0; opacity: 0.7; }
}

/* 悬浮状态 */
#projects h2[data-i18n="projects.title"]:hover {
    transform: translateY(-3px);
    color: var(--primary);
    text-shadow: 0 0 12px rgba(96,165,250,0.5);
}
/*#projects h2[data-i18n="projects.title"]:hover::after {*/
/*    width: 130px;*/
/*    box-shadow: 0 0 16px rgba(96,165,250,0.6);*/
/*}*/

#projects h2[data-i18n="projects.title"]:hover::after {
    width: 130px;
    box-shadow: 0 0 16px rgba(96,165,250,0.6);
}

/* --- 卡片网格 --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    padding-top: 1rem;
    perspective: 1000px;
}

/* --- 单卡片 --- */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}

.card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(59,130,246,0.4);
    box-shadow:
            0 10px 24px rgba(59,130,246,0.1),
            0 0 18px rgba(147,197,253,0.25);
}

/* ✨ 顶部缩略图 */
.project-thumbnail {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    border-bottom: 1px solid var(--border-light);
    transition: transform 0.6s ease, filter 0.6s ease;
}
.card:hover .project-thumbnail {
    transform: scale(1.05);
    filter: brightness(1.1) saturate(1.1);
}

/* --- 文本内容 --- */
.project-info {
    padding: 24px;
    transition: all 0.3s ease;
}
.card:hover .project-info {
    transform: translateY(-2px);
}

/* 子标题 */
.project-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-main);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.card:hover .project-info h3 {
    color: var(--primary);
    text-shadow: 0 0 8px rgba(96,165,250,0.35);
}

/* 描述文字 */
.project-info p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
}

/* --- 标签 --- */
.project-info .it-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.project-info .it-tag {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(59,130,246,0.12);
    color: #2563eb;
    font-weight: 500;
    transition: all 0.3s ease;
}
.project-info .it-tag:hover {
    background: rgba(59,130,246,0.25);
    box-shadow: 0 0 6px rgba(96,165,250,0.25);
    transform: scale(1.05);
}

/* --- 查看详情按钮 --- */
.project-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--primary);
    transition: all 0.25s ease;
}
.project-link::after {
    content: '→';
    transition: transform 0.25s ease;
}
.project-link:hover {
    color: #1d4ed8;
    text-decoration: none;
}
.project-link:hover::after {
    transform: translateX(4px);
}

/* --- 暗色模式 --- */
[data-theme="dark"] #projects h2[data-i18n="projects.title"] {
    color: #E2E8F0;
}
[data-theme="dark"] #projects h2[data-i18n="projects.title"]::after {
    background: linear-gradient(90deg,
    rgba(147,197,253,0) 0%,
    rgba(147,197,253,0.9) 50%,
    rgba(147,197,253,0) 100%);
    box-shadow: 0 0 10px rgba(147,197,253,0.3);
}
[data-theme="dark"] .card {
    background: rgba(30,41,59,0.95);
    border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .card:hover {
    background: rgba(37,99,235,0.05);
    box-shadow:
            0 0 16px rgba(147,197,253,0.25),
            0 8px 22px rgba(0,0,0,0.6);
}

/* ========== MY PAPERS 标题（蓝色能量流动版） ========== */
/*#projects h2[data-i18n="projects.title"] {*/
/*    position: relative;*/
/*    display: inline-block;*/
/*    font-weight: 700;*/
/*    letter-spacing: 0.5px;*/
/*    transition: color 0.4s ease, transform 0.4s ease;*/
/*}*/

/*#projects h2[data-i18n="projects.title"]::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    bottom: -10px;*/
/*    transform: translateX(-50%);*/
/*    width: 80px;*/
/*    height: 3px;*/
/*    border-radius: 10px;*/
/*    background: linear-gradient(90deg,*/
/*    rgba(59,130,246,0) 0%,*/
/*    rgba(59,130,246,0.9) 50%,*/
/*    rgba(59,130,246,0) 100%);*/
/*    box-shadow: 0 0 10px rgba(59,130,246,0.3);*/
/*    background-size: 200% 100%;*/
/*    animation: pulseFlow 3s infinite ease-in-out;*/
/*    transition: all 0.4s ease;*/
/*}*/

/*@keyframes pulseFlow {*/
/*    0% {*/
/*        background-position: 200% 0;*/
/*        box-shadow: 0 0 8px rgba(59,130,246,0.25);*/
/*        opacity: 0.6;*/
/*    }*/
/*    50% {*/
/*        background-position: 0% 0;*/
/*        box-shadow: 0 0 14px rgba(59,130,246,0.45);*/
/*        opacity: 1;*/
/*    }*/
/*    100% {*/
/*        background-position: -200% 0;*/
/*        box-shadow: 0 0 8px rgba(59,130,246,0.25);*/
/*        opacity: 0.6;*/
/*    }*/
/*}*/

/*#projects h2[data-i18n="projects.title"]:hover {*/
/*    color: var(--primary);*/
/*    text-shadow: 0 0 12px rgba(96,165,250,0.45);*/
/*    transform: translateY(-3px);*/
/*}*/

/*#projects h2[data-i18n="projects.title"]:hover::after {*/
/*    width: 130px;*/
/*    height: 4px;*/
/*    box-shadow: 0 0 20px rgba(96,165,250,0.6);*/
/*    animation-duration: 2.4s;*/
/*}*/

/*[data-theme="dark"] #projects h2[data-i18n="projects.title"] {*/
/*    color: #e2e8f0;*/
/*}*/
/*[data-theme="dark"] #projects h2[data-i18n="projects.title"]::after {*/
/*    background: linear-gradient(90deg,*/
/*    rgba(147,197,253,0) 0%,*/
/*    rgba(147,197,253,0.9) 50%,*/
/*    rgba(147,197,253,0) 100%);*/
/*    box-shadow: 0 0 10px rgba(147,197,253,0.3);*/
/*}*/


/* ========== Peer review 标题样式 ========== */
/* ========== REVIEWERS 标题（红金能量流动版） ========== */
#opensource h2[data-i18n="opensource.title"] {
    position: relative;
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: color 0.4s ease, transform 0.4s ease;
}

#opensource h2[data-i18n="opensource.title"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(90deg,
    rgba(255, 85, 85, 0) 0%,
    rgba(255, 90, 90, 0.9) 50%,
    rgba(255, 85, 85, 0) 100%);
    box-shadow: 0 0 10px rgba(255, 100, 100, 0.3);
    background-size: 200% 100%;
    animation: goldPulse 3s infinite ease-in-out;
    transition: all 0.4s ease;
}

@keyframes goldPulse {
    0% {
        background-position: 200% 0;
        box-shadow: 0 0 8px rgba(255, 110, 110, 0.25);
        opacity: 0.65;
    }
    50% {
        background-position: 0% 0;
        box-shadow: 0 0 16px rgba(255, 160, 110, 0.5);
        opacity: 1;
    }
    100% {
        background-position: -200% 0;
        box-shadow: 0 0 8px rgba(255, 110, 110, 0.25);
        opacity: 0.65;
    }
}

#opensource h2[data-i18n="opensource.title"]:hover {
    color: #ff5a5a;
    text-shadow: 0 0 12px rgba(255, 130, 130, 0.6);
    transform: translateY(-3px);
}

#opensource h2[data-i18n="opensource.title"]:hover::after {
    width: 130px;
    height: 4px;
    animation-duration: 2.2s;
    box-shadow: 0 0 22px rgba(255, 150, 110, 0.55);
}

[data-theme="dark"] #opensource h2[data-i18n="opensource.title"] {
    color: #f8fafc;
}
[data-theme="dark"] #opensource h2[data-i18n="opensource.title"]::after {
    background: linear-gradient(90deg,
    rgba(255, 100, 100, 0) 0%,
    rgba(255, 120, 120, 0.9) 50%,
    rgba(255, 100, 100, 0) 100%);
    box-shadow: 0 0 10px rgba(255, 100, 100, 0.25);
    opacity: 0.85;
}

/*H1 页面标题*/

/*柔和渐变，看起来像飘动*/
/*.gradient-text {*/
/*    font-size: 2.4rem;*/
/*    font-weight: 800;*/
/*    text-align: center;*/
/*    background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: transparent;*/
/*    letter-spacing: 1px;*/
/*    animation: glow-pulse 4s ease-in-out infinite;*/
/*    text-shadow: 0 0 20px rgba(37, 99, 235, 0.25);*/
/*}*/

/*@keyframes glow-pulse {*/
/*    0%, 100% {*/
/*        text-shadow: 0 0 8px rgba(37, 99, 235, 0.25);*/
/*    }*/
/*    50% {*/
/*        text-shadow: 0 0 20px rgba(37, 99, 235, 0.45);*/
/*    }*/
/*}*/

/*[data-theme="dark"] .gradient-text {*/
/*    background: linear-gradient(90deg, #93c5fd 0%, #3b82f6 100%);*/
/*    text-shadow: 0 0 12px rgba(96, 165, 250, 0.5);*/
/*}*/


/*玻璃质感，轻投影 不太好看*/
/*.gradient-text {*/
/*    font-size: 2.5rem;*/
/*    font-weight: 900;*/
/*    text-align: center;*/
/*    color: var(--text-main);*/
/*    background: rgba(255,255,255,0.1);*/
/*    backdrop-filter: blur(8px);*/
/*    border-radius: 12px;*/
/*    padding: 12px 28px;*/
/*    display: inline-block;*/
/*    box-shadow: 0 4px 30px rgba(0,0,0,0.1);*/
/*    transition: all 0.3s ease;*/
/*}*/

/*.gradient-text:hover {*/
/*    transform: translateY(-4px);*/
/*    box-shadow: 0 6px 30px rgba(37,99,235,0.25);*/
/*    color: var(--primary);*/
/*}*/
/*[data-theme="dark"] .gradient-text {*/
/*    background: rgba(37, 99, 235, 0.15);*/
/*    box-shadow: 0 0 20px rgba(96,165,250,0.25);*/
/*}*/


/*科技描边  太傻比*/
/*.gradient-text {*/
/*    font-size: 2.6rem;*/
/*    font-weight: 900;*/
/*    text-align: center;*/
/*    color: transparent;*/
/*    -webkit-text-stroke: 1.5px var(--primary);*/
/*    position: relative;*/
/*    text-transform: uppercase;*/
/*    letter-spacing: 1.5px;*/
/*}*/

/*.gradient-text::before {*/
/*    content: attr(data-i18n);*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    color: var(--primary);*/
/*    width: 0%;*/
/*    overflow: hidden;*/
/*    white-space: nowrap;*/
/*    border-right: 2px solid var(--primary);*/
/*    animation: typing 3s steps(20) 1 forwards;*/
/*}*/

/*@keyframes typing {*/
/*    from { width: 0%; }*/
/*    to { width: 100%; }*/
/*}*/

/*轻柔浮光渐变*/

/*.gradient-text {*/
/*    font-size: 2.6rem;*/
/*    font-weight: 800;*/
/*    text-align: center;*/
/*    background: linear-gradient(120deg, #1e3a8a 0%, #3b82f6 40%, #93c5fd 100%);*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: transparent;*/
/*    letter-spacing: 0.5px;*/
/*    animation: shimmer 5s ease-in-out infinite;*/
/*}*/

/*@keyframes shimmer {*/
/*    0% {*/
/*        background-position: 0% 50%;*/
/*    }*/
/*    50% {*/
/*        background-position: 100% 50%;*/
/*    }*/
/*    100% {*/
/*        background-position: 0% 50%;*/
/*    }*/
/*}*/

/*高能脉冲  这个不错，和第一个都不错*/
/*.gradient-text {*/
/*    font-size: 2.8rem;*/
/*    font-weight: 900;*/
/*    text-align: center;*/
/*    color: #fff;*/
/*    text-shadow: 0 0 5px #3b82f6, 0 0 15px #2563eb, 0 0 30px #1d4ed8;*/
/*    animation: pulse-light 3s infinite ease-in-out;*/
/*}*/

/*@keyframes pulse-light {*/
/*    0%, 100% {*/
/*        text-shadow: 0 0 8px #3b82f6, 0 0 20px #2563eb, 0 0 40px #1d4ed8;*/
/*    }*/
/*    50% {*/
/*        text-shadow: 0 0 15px #60a5fa, 0 0 35px #3b82f6, 0 0 70px #1d4ed8;*/
/*    }*/
/*}*/

/*[data-theme="dark"] .gradient-text {*/
/*    color: #e2e8f0;*/
/*    text-shadow: 0 0 10px #60a5fa, 0 0 20px #3b82f6, 0 0 30px #2563eb;*/
/*}*/

/*柔光呼吸边框  大傻逼*/
/*.gradient-text {*/
/*    position: relative;*/
/*    font-size: 2.4rem;*/
/*    font-weight: 800;*/
/*    color: var(--text-main);*/
/*    text-align: center;*/
/*    padding: 10px 20px;*/
/*    border-radius: 12px;*/
/*    display: inline-block;*/
/*    background: var(--bg-card);*/
/*    box-shadow: 0 0 12px rgba(37,99,235,0.15);*/
/*    animation: breathe-border 4s ease-in-out infinite;*/
/*}*/

/*@keyframes breathe-border {*/
/*    0%, 100% {*/
/*        box-shadow: 0 0 8px rgba(37,99,235,0.15);*/
/*    }*/
/*    50% {*/
/*        box-shadow: 0 0 20px rgba(37,99,235,0.35);*/
/*    }*/
/*}*/

/*[data-theme="dark"] .gradient-text {*/
/*    background: rgba(37,99,235,0.15);*/
/*    box-shadow: 0 0 18px rgba(96,165,250,0.3);*/
/*}*/


/*镜面文字  非常赞*/
/*.gradient-text {*/
/*    font-size: 2.6rem;*/
/*    font-weight: 900;*/
/*    text-align: center;*/
/*    background: linear-gradient(90deg, #60a5fa 0%, #2563eb 50%, #60a5fa 100%);*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: transparent;*/
/*    background-size: 200% auto;*/
/*    animation: shine 3s linear infinite;*/
/*}*/

/*@keyframes shine {*/
/*    0% {*/
/*        background-position: 0% center;*/
/*    }*/
/*    100% {*/
/*        background-position: 200% center;*/
/*    }*/
/*}*/

/*镜面文字 + 能量脉冲*/
.gradient-text {
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(90deg, #60a5fa, #2563eb, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shineMove 4s linear infinite, glowPulse 4s ease-in-out infinite;
    letter-spacing: 1.2px;
    text-shadow: 0 0 8px rgba(37,99,235,0.25);
    transition: all 0.3s ease;
}

/* 镜面流光动画 */
@keyframes shineMove {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* 呼吸光晕动画 */
@keyframes glowPulse {
    0%, 100% {
        text-shadow: 0 0 8px rgba(37,99,235,0.3), 0 0 20px rgba(37,99,235,0.15);
    }
    50% {
        text-shadow: 0 0 15px rgba(96,165,250,0.45), 0 0 35px rgba(96,165,250,0.25);
    }
}

/* 暗色模式适配 */
[data-theme="dark"] .gradient-text {
    background: linear-gradient(90deg, #93c5fd, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(96,165,250,0.45), 0 0 25px rgba(59,130,246,0.25);
}

[data-theme="dark"] .gradient-text:hover {
    text-shadow: 0 0 20px rgba(147,197,253,0.7), 0 0 40px rgba(96,165,250,0.4);
    transform: translateY(-3px);
}



/* 修复主题切换按钮的点击响应 */
.theme-toggle {
  cursor: pointer;
  z-index: 10; /* 提高层级 */
  /* 确保按钮有足够空间容纳图标 */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 防止图标拦截鼠标事件，确保点击穿透到 button */
.theme-toggle i {
  pointer-events: none;
}

/* 确保导航栏层级够高 */
nav {
  z-index: 1000;
}

/* ... Previous CSS ... */

/* =========================================
   12. Project Tags (New)
   ========================================= */
/*.project-tags {*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  gap: 8px;*/
/*  margin-bottom: 20px; !* Space between tags and 'View Details' link *!*/
/*  margin-top: -12px;   !* Pull closer to description *!*/
/*}*/

/*.project-tag {*/
/*  font-size: 0.75rem;*/
/*  padding: 3px 10px;*/
/*  background: var(--bg-hover);*/
/*  color: var(--primary);*/
/*  border-radius: 4px;*/
/*  font-weight: 500;*/
/*  border: 1px solid var(--border-light);*/
/*}*/

.project-tag {
    font-size: 0.75rem;
    padding: 3px 10px;
    background: var(--bg-hover);
    color: var(--primary);
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid var(--border-light);
    transition: all 0.25s ease; /* 关键：平滑动画 */
    cursor: pointer; /* 变成可点击感 */
    hyphens: none;

}

.project-tags {
    display: flex;
    flex-wrap: wrap;   /* 保证多个标签能换行 */
    gap: 8px;
    margin-bottom: 20px;
    margin-top: -12px;
}



.project-tag:hover {
    background: var(--primary);       /* 悬浮反转颜色 */
    color: white;                     /* 文字变白 */
    border-color: var(--primary);     /* 边框统一成主题色 */
    transform: translateY(-2px);      /* 轻微上浮 */
    box-shadow: 0 3px 8px rgba(0,0,0,0.12); /* 小阴影增加立体感 */
}



/* Adjust paragraph margin in project info to accommodate tags */
.project-info p {
  margin-bottom: 16px;
}


/*
    联系人卡片
*/

/*@font-face {*/
/*    font-family: "Times New Roman";*/
/*}*/

/*!* 主容器背景跟随主题 *!*/
/*.main {*/
/*    width: 100%;*/
/*    height: 25vh;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    background: var(--team-bg) !important;   !* ← 强制使用主题变量 *!*/
/*    transition: background 0.35s ease;*/
/*}*/

/*!* 卡片 *!*/
/*.profile-card {*/
/*    position: relative;*/
/*    font-family: sans-serif;*/
/*    width: 220px;*/
/*    height: 220px;*/
/*    background: var(--team-card-bg);*/
/*    padding: 30px;*/
/*    border-radius: 50%;*/
/*    box-shadow: 0 0 22px var(--team-shadow);*/
/*    transition: .3s;*/
/*    margin: 0 25px;*/
/*}*/
/*.profile-card:hover {*/
/*    border-radius: 10px;*/
/*    height: 260px;*/
/*}*/

/*!* 图片 *!*/
/*.profile-card .img {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    transition: .3s;*/
/*    z-index: 99;*/
/*}*/
/*.profile-card:hover .img {*/
/*    transform: translateY(-60px);*/
/*}*/
/*.img img {*/
/*    width: 100%;*/
/*    border-radius: 50%;*/
/*    box-shadow: 0 0 22px var(--team-shadow);*/
/*    transition: 1.2s;*/
/*}*/
/*.profile-card:hover img {*/
/*    border-radius: 10px;*/
/*}*/

/*!* 文字信息 *!*/
/*.caption {*/
/*    text-align: center;*/
/*    transform: translateY(-80px);*/
/*    opacity: 0;*/
/*    transition: .6s;*/
/*}*/
/*.profile-card:hover .caption {*/
/*    opacity: 1;*/
/*}*/
/*.caption h3 {*/
/*    font-size: 21px;*/
/*    color: var(--team-title);*/
/*}*/
/*.caption p {*/
/*    font-size: 15px;*/
/*    color: var(--team-highlight);*/
/*    margin: 2px 0 9px 0;*/
/*}*/

/*!* 社交图标 *!*/
/*.caption .social-links a {*/
/*    color: var(--team-icon);*/
/*    margin-right: 15px;*/
/*    font-size: 21px;*/
/*    transition: .6s;*/
/*}*/
/*.social-links a:hover {*/
/*    color: var(--team-highlight);*/
/*}*/


/* 团队板块整体背景 */
/*.main {*/
/*    width: 100%;*/
/*    height: 30vh;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    background: var(--team-bg);*/
/*    transition: background 0.35s ease;*/
/*}*/

/*!* 成员卡片 *!*/
/*.profile-card {*/
/*    position: relative;*/
/*    font-family: sans-serif;*/
/*    width: 220px;*/
/*    height: 220px;*/
/*    background: var(--team-card-bg);*/
/*    padding: 30px;*/
/*    border-radius: 50%;*/
/*    box-shadow: 0 0 22px #3336;*/
/*    !*transition: var(--transition-base);*!*/
/*    transition: .6s;*/
/*    margin: 0 25px;*/
/*}*/

/*!* 悬停展开 *!*/
/*.profile-card:hover {*/
/*    border-radius: 12px;*/
/*    height: 260px;*/
/*}*/

/*!* 头像区域 *!*/
/*.profile-card .img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    !*transition: var(--transition-base);*!*/
/*    transition:.6s;*/
/*    z-index: 99;*/
/*}*/
/*.profile-card:hover .img {*/
/*    transform: translateY(-60px);*/
/*}*/
/*.img img {*/
/*    width: 100%;*/
/*    border-radius: 20%;*/
/*    box-shadow: 0 0 22px #3336;*/
/*    transition: 1.2s;*/
/*}*/
/*.profile-card:hover img {*/
/*    border-radius: 12px;*/
/*}*/

/*!* 文本区域 *!*/
/*.caption {*/
/*    text-align: center;*/
/*    transform: translateY(-80px);*/
/*    opacity: 0;*/
/*    !*transition: var(--transition-base);*!*/
/*    transition: .6s;*/
/*}*/
/*.profile-card:hover .caption {*/
/*    opacity: 1;*/
/*}*/
/*.caption h3 {*/
/*    font-size: 20px;*/
/*    color: var(--team-title);*/
/*    font-weight: 600;*/
/*}*/


/*.caption p {*/
/*    font-size: 13px;*/
/*    !*color: #0c52a1;*!*/
/*    color: var(--team-highlight);*/
/*    margin: auto auto;*/
/*    max-width: 100%;        !* 限制最大宽度 *!*/
/*    word-wrap: break-word; !* 允许自动换行 *!*/
/*    white-space: normal;   !* 防止文字单行溢出 *!*/
/*    line-height: 1.2;      !* 提高可读性 *!*/
/*}*/

/*!* 社交 icon *!*/
/*.caption .social-links a {*/
/*    color: var(--team-icon);*/
/*    margin-right: 10px;*/
/*    font-size: 21px;*/
/*    transition: .6s;*/
/*}*/
/*.caption .social-links a:hover {*/
/*    color: var(--team-highlight);*/
/*    transform: scale(1.15);*/
/*}*/

/*2025.12.15 新增博客系统*/
/* ====== Interest 标题：激光紫兰呼吸版 ====== */
/* 精选博客区：贴合上一模块 */

/* ========== BLOG ENTRY SECTION ========== */

/* ===== 区域整体 ===== */
/*#blog-showcase {*/
/*    background: transparent;*/
/*}*/

/* ===== 标题区 ===== */
/*.blog-showcase-header {*/
/*    margin-bottom: 28px;*/
/*    text-align: left;*/
/*}*/

/*.blog-showcase-title {*/
/*    font-size: 1.25rem;*/
/*    font-weight: 700;*/
/*    color: var(--text-main);*/
/*    letter-spacing: 0.4px;*/
/*    margin-bottom: 6px;*/
/*}*/

/*.blog-showcase-subtitle {*/
/*    font-size: 0.85rem;*/
/*    color: var(--text-muted);*/
/*    max-width: 560px;*/
/*    line-height: 1.6;*/
/*}*/

/* ===== 博客卡片网格 ===== */
/*.blog-grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));*/
/*    gap: 28px;*/
/*}*/

/* ===== 博客卡片主体 ===== */
/*.blog-card {*/
/*    background: var(--bg-card);*/
/*    border: 1px solid var(--border-light);*/
/*    border-radius: var(--radius-md);*/
/*    padding: 26px 26px 24px;*/

/*    display: flex;*/
/*    flex-direction: column;*/
/*    height: 100%;*/

/*    opacity: 0;*/
/*    transform: translateY(14px);*/
/*    animation: blogFadeUp 0.6s ease forwards;*/

/*    transition:*/
/*            transform 0.4s ease,*/
/*            box-shadow 0.4s ease,*/
/*            border-color 0.4s ease,*/
/*            background 0.4s ease;*/
/*}*/

/* ===== 进入动画 ===== */
/*@keyframes blogFadeUp {*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/

/* ===== Hover：学术级柔光 ===== */
/*.blog-card:hover {*/
/*    transform: translateY(-8px) scale(1.02);*/
/*    border-color: rgba(99, 102, 241, 0.55);*/

/*    box-shadow:*/
/*            0 10px 28px rgba(99, 102, 241, 0.18),*/
/*            0 0 18px rgba(129, 140, 248, 0.22);*/

/*    background: radial-gradient(*/
/*            circle at top right,*/
/*            rgba(99, 102, 241, 0.05),*/
/*            rgba(129, 140, 248, 0.03)*/
/*    );*/
/*}*/

/* ===== 头部 ===== */
/*.blog-card-header {*/
/*    display: flex;*/
/*    align-items: flex-start;*/
/*    justify-content: space-between;*/
/*    margin-bottom: 14px;*/
/*}*/

/*.blog-title {*/
/*    font-size: 1.05rem;*/
/*    font-weight: 700;*/
/*    color: var(--text-main);*/
/*    letter-spacing: 0.3px;*/
/*    line-height: 1.45;*/

/*    transition: color 0.35s ease, text-shadow 0.35s ease;*/
/*}*/

/* Hover 时标题微发光 */
/*.blog-card:hover .blog-title {*/
/*    color: rgb(79, 70, 229);*/
/*    text-shadow:*/
/*            0 0 6px rgba(99, 102, 241, 0.35),*/
/*            0 0 14px rgba(129, 140, 248, 0.25);*/
/*}*/

/* 右上角图标 */
/*.blog-icon {*/
/*    font-size: 0.95rem;*/
/*    color: rgb(99, 102, 241);*/
/*    opacity: 0.45;*/
/*}*/

/* ===== 摘要 ===== */
/*.blog-desc {*/
/*    font-size: 0.92rem;*/
/*    color: var(--text-muted);*/
/*    line-height: 1.65;*/
/*    margin-bottom: 18px;*/
/*    flex-grow: 1;*/

/*    transition: color 0.3s ease;*/
/*}*/

/*.blog-card:hover .blog-desc {*/
/*    color: var(--text-main);*/
/*}*/

/* ===== 标签 ===== */
/*.blog-tags {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 8px;*/
/*    margin-bottom: 18px;*/
/*}*/

/*.blog-tag {*/
/*    font-size: 0.75rem;*/
/*    padding: 4px 12px;*/
/*    border-radius: 20px;*/
/*    font-weight: 600;*/

/*    background: rgba(99, 102, 241, 0.14);*/
/*    color: rgb(79, 70, 229);*/

/*    transition:*/
/*            transform 0.3s ease,*/
/*            background 0.3s ease,*/
/*            box-shadow 0.3s ease;*/
/*}*/

/*.blog-tag:hover {*/
/*    transform: scale(1.08);*/
/*    background: rgba(99, 102, 241, 0.24);*/
/*    box-shadow: 0 0 10px rgba(129, 140, 248, 0.25);*/
/*}*/

/* ===== 行为按钮 ===== */
/*.blog-actions {*/
/*    display: flex;*/
/*}*/

/*.blog-btn {*/
/*    font-size: 0.85rem;*/
/*    font-weight: 600;*/
/*    color: rgb(79, 70, 229);*/

/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 6px;*/

/*    padding: 6px 12px;*/
/*    border-radius: 8px;*/

/*    transition:*/
/*            transform 0.3s ease,*/
/*            background 0.3s ease,*/
/*            box-shadow 0.3s ease;*/
/*}*/

/*.blog-btn:hover {*/
/*    text-decoration: none;*/
/*    transform: translateY(-2px);*/
/*    background: rgba(99, 102, 241, 0.12);*/
/*    box-shadow: 0 4px 10px rgba(129, 140, 248, 0.18);*/
/*}*/

/* ===== 暗色模式适配 ===== */
/*[data-theme="dark"] .blog-showcase-subtitle {*/
/*    color: rgba(226, 232, 240, 0.65);*/
/*}*/

/*[data-theme="dark"] .blog-card {*/
/*    background: rgba(30, 41, 59, 0.92);*/
/*    border-color: rgba(255, 255, 255, 0.06);*/
/*}*/

/*[data-theme="dark"] .blog-card:hover {*/
/*    background: rgba(30, 41, 59, 0.95);*/
/*    box-shadow:*/
/*            0 0 20px rgba(129, 140, 248, 0.35),*/
/*            0 10px 28px rgba(0, 0, 0, 0.55);*/
/*}*/

/*酷炫的博客标题*/

/* =========================================
   Fancy Section Title · Academic Glow Style
========================================= */

/*.fancy-title {*/
/*    position: relative;*/
/*    display: inline-block;*/

/*    font-size: 1.8rem;*/
/*    font-weight: 800;*/
/*    letter-spacing: 0.6px;*/
/*    color: var(--text-main);*/

/*    padding-bottom: 14px;*/
/*    margin-bottom: 10px;*/

/*    transition:*/
/*            color 0.4s ease,*/
/*            text-shadow 0.4s ease;*/
/*}*/

/* ===== 底部能量线（默认隐藏） ===== */
/*.fancy-title::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    bottom: 0;*/

/*    width: 0%;*/
/*    height: 3px;*/
/*    border-radius: 999px;*/

/*    background: linear-gradient(*/
/*            90deg,*/
/*            rgba(99,102,241,0.2),*/
/*            rgba(99,102,241,0.9),*/
/*            rgba(129,140,248,0.9),*/
/*            rgba(99,102,241,0.2)*/
/*    );*/

/*    transform: translateX(-50%);*/
/*    transition:*/
/*            width 0.55s cubic-bezier(0.22, 1, 0.36, 1),*/
/*            opacity 0.4s ease;*/
/*    opacity: 0.4;*/
/*}*/

/* ===== 外层柔光 ===== */
/*.fancy-title::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    bottom: -6px;*/

/*    width: 70%;*/
/*    height: 12px;*/
/*    border-radius: 50%;*/

/*    background: radial-gradient(*/
/*            circle,*/
/*            rgba(99,102,241,0.45),*/
/*            transparent 70%*/
/*    );*/

/*    transform: translateX(-50%) scale(0.85);*/
/*    opacity: 0;*/

/*    filter: blur(14px);*/
/*    transition:*/
/*            opacity 0.5s ease,*/
/*            transform 0.5s ease;*/
/*}*/

/* ===== 悬浮状态 ===== */
/*.fancy-title:hover {*/
/*    color: rgb(79, 70, 229);*/
/*    text-shadow:*/
/*            0 0 6px rgba(99,102,241,0.35),*/
/*            0 0 18px rgba(129,140,248,0.25);*/
/*}*/

/*.fancy-title:hover::after {*/
/*    width: 100%;*/
/*    opacity: 1;*/
/*}*/

/*.fancy-title:hover::before {*/
/*    opacity: 1;*/
/*    transform: translateX(-50%) scale(1.05);*/
/*}*/

/* ===== 副标题（轻微呼应） ===== */
/*.section-subtitle {*/
/*    font-size: 0.95rem;*/
/*    color: var(--text-muted);*/
/*    margin-top: 6px;*/
/*    line-height: 1.6;*/
/*}*/

/* ===== 暗色模式适配 ===== */
/*[data-theme="dark"] .fancy-title {*/
/*    color: #e5e7eb;*/
/*}*/

/*[data-theme="dark"] .fancy-title:hover {*/
/*    color: rgb(165,180,252);*/
/*    text-shadow:*/
/*            0 0 8px rgba(129,140,248,0.45),*/
/*            0 0 22px rgba(165,180,252,0.35);*/
/*}*/

/*[data-theme="dark"] .fancy-title::after {*/
/*    background: linear-gradient(*/
/*            90deg,*/
/*            rgba(165,180,252,0.25),*/
/*            rgba(165,180,252,0.95),*/
/*            rgba(129,140,248,0.95),*/
/*            rgba(165,180,252,0.25)*/
/*    );*/
/*}*/

/*[data-theme="dark"] .fancy-title::before {*/
/*    background: radial-gradient(*/
/*            circle,*/
/*            rgba(165,180,252,0.55),*/
/*            transparent 70%*/
/*    );*/
/*}*/
/* 精选博客区：贴合上一模块 */

/* ========== BLOG ENTRY SECTION ========== */

/*.blog-entry-title {*/
/*    text-align: center;*/
/*    font-size: 2rem;*/
/*    font-weight: 800;*/
/*    margin-bottom: 8px;*/
/*    color: var(--text-main);*/
/*}*/

/*.blog-entry-subtitle {*/
/*    text-align: center;*/
/*    font-size: 0.95rem;*/
/*    color: var(--text-muted);*/
/*    margin-bottom: 42px;*/
/*}*/

/* ===== Grid ===== */
/*.blog-entry-grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));*/
/*    gap: 28px;*/
/*}*/

/* ===== Card Base ===== */
/*.blog-entry-card {*/
/*    position: relative;*/
/*    background: var(--bg-card);*/
/*    border: 1px solid var(--border-light);*/
/*    border-radius: 20px;*/
/*    padding: 32px 28px;*/

/*    text-align: center;*/
/*    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);*/

/*    opacity: 0;*/
/*    transform: translateY(16px);*/
/*    animation: entryFadeUp 0.6s ease forwards;*/
/*}*/

/*@keyframes entryFadeUp {*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/

/* ===== Icon ===== */
/*.entry-icon {*/
/*    font-size: 2.2rem;*/
/*    margin-bottom: 12px;*/
/*}*/

/* ===== Title ===== */
/*.blog-entry-card h3 {*/
/*    font-size: 1.15rem;*/
/*    font-weight: 700;*/
/*    margin-bottom: 10px;*/
/*    color: var(--text-main);*/
/*}*/

/* ===== Desc ===== */
/*.entry-desc {*/
/*    font-size: 0.9rem;*/
/*    color: var(--text-muted);*/
/*    line-height: 1.6;*/
/*    margin-bottom: 20px;*/
/*}*/

/* ===== Link ===== */
/*.entry-link {*/
/*    font-size: 0.85rem;*/
/*    font-weight: 600;*/
/*    text-decoration: none;*/
/*    transition: all 0.3s ease;*/
/*}*/

/* ===== Hover Common ===== */
/*.blog-entry-card:hover {*/
/*    transform: translateY(-10px) scale(1.03);*/
/*}*/

/* ========== 三种人格色 ========== */

/* 🌱 Life：温柔绿色 */
/*.blog-entry-card.life:hover {*/
/*    border-color: rgba(34, 197, 94, 0.6);*/
/*    box-shadow:*/
/*            0 10px 28px rgba(34, 197, 94, 0.25);*/
/*}*/
/*.blog-entry-card.life .entry-link {*/
/*    color: rgb(34, 197, 94);*/
/*}*/

/* 📘 Study：理性蓝紫 */
/*.blog-entry-card.study:hover {*/
/*    border-color: rgba(99, 102, 241, 0.6);*/
/*    box-shadow:*/
/*            0 10px 28px rgba(99, 102, 241, 0.25);*/
/*}*/
/*.blog-entry-card.study .entry-link {*/
/*    color: rgb(99, 102, 241);*/
/*}*/

/* 🧠 Interest：灵感橙 */
/*.blog-entry-card.interest:hover {*/
/*    border-color: rgba(249, 115, 22, 0.6);*/
/*    box-shadow:*/
/*            0 10px 28px rgba(249, 115, 22, 0.25);*/
/*}*/
/*.blog-entry-card.interest .entry-link {*/
/*    color: rgb(249, 115, 22);*/
/*}*/

/* ===== Dark Mode ===== */
/*[data-theme="dark"] .blog-entry-card {*/
/*    background: rgba(30, 41, 59, 0.95);*/
/*    border-color: rgba(255, 255, 255, 0.06);*/
/*}*/

/* ========== INTEREST SECTION 样式（增强版） ========== */
/*.interest-grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
/*    gap: 24px;*/
/*    padding-top: 1rem;*/
/*}*/

/* 卡片主体 */
/*.it-card {*/
/*    background: var(--bg-card);*/
/*    border: 1px solid var(--border-light);*/
/*    border-radius: var(--radius-md);*/
/*    padding: 24px;*/
/*    transition: all 0.4s ease;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    height: 100%;*/
/*    opacity: 0;*/
/*    transform: translateY(12px);*/
/*    animation: fadeUp 0.6s ease forwards;*/
/*}*/

/* 入场动画 */
/*@keyframes fadeUp {*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/

/* 悬浮效果 ✨ */
/*.it-card:hover {*/
/*    transform: translateY(-8px) scale(1.015);*/
/*    border-color: rgba(192, 132, 252, 0.6);*/
/*    box-shadow:*/
/*            0 6px 20px rgba(147, 51, 234, 0.15),*/
/*            0 0 12px rgba(192, 132, 252, 0.25);*/
/*    background: radial-gradient(circle at top left,*/
/*    rgba(192, 132, 252, 0.08),*/
/*    rgba(255, 255, 255, 0.03));*/
/*    transition: all 0.35s ease;*/
/*}*/

/* 标题区域 */
/*.it-header {*/
/*    display: flex;*/
/*    align-items: flex-start;*/
/*    justify-content: space-between;*/
/*    margin-bottom: 12px;*/
/*}*/

/*.it-title {*/
/*    position: relative;*/
/*    font-size: 1.1rem;*/
/*    font-weight: 700;*/
/*    color: var(--text-main);*/
/*    letter-spacing: 0.3px;*/
/*    transition: color 0.35s ease, text-shadow 0.35s ease;*/
/*}*/

/* 悬浮时标题轻发光 */
/*.it-card:hover .it-title {*/
/*    color: #c084fc;*/
/*    text-shadow:*/
/*            0 0 4px rgba(192, 132, 252, 0.4),*/
/*            0 0 10px rgba(147, 51, 234, 0.25);*/
/*}*/

/* 描述文字 */
/*.it-desc {*/
/*    font-size: 0.9rem;*/
/*    color: var(--text-muted);*/
/*    margin-bottom: 16px;*/
/*    flex-grow: 1;*/
/*    line-height: 1.6;*/
/*    transition: color 0.3s ease;*/
/*}*/

/* 悬浮时描述微亮 */
/*.it-card:hover .it-desc {*/
/*    color: var(--text-main);*/
/*}*/

/* 标签 */
/*.it-tags {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 8px;*/
/*    margin-bottom: 20px;*/
/*}*/

/*.it-tag {*/
/*    font-size: 0.75rem;*/
/*    padding: 4px 10px;*/
/*    border-radius: 20px;*/
/*    font-weight: 500;*/
/*    background: rgba(147, 51, 234, 0.08);*/
/*    color: #9333ea;*/
/*    transition: all 0.3s ease;*/
/*}*/

/*.it-tag:hover {*/
/*    transform: scale(1.05);*/
/*    background: rgba(192, 132, 252, 0.18);*/
/*    box-shadow: 0 0 8px rgba(192, 132, 252, 0.25);*/
/*    color: #a855f7;*/
/*}*/

/* 暗色模式适配 */
/*[data-theme="dark"] .it-card {*/
/*    background: rgba(30, 41, 59, 0.95);*/
/*    border-color: rgba(255, 255, 255, 0.06);*/
/*}*/
/*[data-theme="dark"] .it-card:hover {*/
/*    background: rgba(49, 46, 129, 0.25);*/
/*    box-shadow:*/
/*            0 0 12px rgba(192, 132, 252, 0.35),*/
/*            0 8px 20px rgba(0, 0, 0, 0.5);*/
/*}*/

/* 按钮 */
/*.it-actions {*/
/*    display: flex;*/
/*    gap: 12px;*/
/*}*/
/*.it-btn {*/
/*    font-size: 0.85rem;*/
/*    font-weight: 600;*/
/*    color: var(--primary);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 6px;*/
/*    transition: all 0.3s ease;*/
/*}*/
/*.it-btn:hover {*/
/*    text-decoration: underline;*/
/*    filter: brightness(1.25);*/
/*    transform: translateY(-2px);*/
/*}*/


/* ====== Interest 标题：激光紫兰呼吸版 ====== */
/*#interest h2 {*/
/*    position: relative;*/
/*    text-align: center;*/
/*    font-size: 1.8rem;*/
/*    font-weight: 700;*/
/*    color: var(--text-main);*/
/*    margin: 3rem auto 2rem;*/
/*    letter-spacing: 0.5px;*/
/*    animation: interestBreath 4.5s ease-in-out infinite;*/
/*}*/

/* 💜 呼吸动画 */
/*@keyframes interestBreath {*/
/*    0%, 100% {*/
/*        text-shadow:*/
/*                0 0 3px rgba(147, 51, 234, 0.35),*/
/*                0 0 8px rgba(192, 132, 252, 0.25);*/
/*        filter: brightness(1);*/
/*    }*/
/*    50% {*/
/*        text-shadow:*/
/*                0 0 6px rgba(147, 51, 234, 0.7),*/
/*                0 0 14px rgba(192, 132, 252, 0.45);*/
/*        filter: brightness(1.2);*/
/*    }*/
/*}*/

/* ====== Interest 标题（激光紫兰呼吸 + 悬浮） ====== */
/*#interest h2 {*/
/*    position: relative;*/
/*    text-align: center;*/
/*    font-size: 1.8rem;*/
/*    font-weight: 700;*/
/*    color: var(--text-main);*/
/*    margin: 3rem auto 2rem;*/
/*    letter-spacing: 0.5px;*/
/*    animation: interestBreath 4.5s ease-in-out infinite;*/
/*    transition: all 0.4s ease;*/
/*}*/

/* 💜 呼吸动画 */
/*@keyframes interestBreath {*/
/*    0%, 100% {*/
/*        text-shadow:*/
/*                0 0 3px rgba(147, 51, 234, 0.35),*/
/*                0 0 8px rgba(192, 132, 252, 0.25);*/
/*        filter: brightness(1);*/
/*    }*/
/*    50% {*/
/*        text-shadow:*/
/*                0 0 6px rgba(147, 51, 234, 0.7),*/
/*                0 0 14px rgba(192, 132, 252, 0.45);*/
/*        filter: brightness(1.18);*/
/*    }*/
/*}*/

/* 🌈 激光紫流光下划线 */
/*#interest h2::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    bottom: -10px;*/
/*    transform: translateX(-50%);*/
/*    width: 70px;*/
/*    height: 3px;*/
/*    border-radius: 10px;*/
/*    background: linear-gradient(*/
/*            90deg,*/
/*            rgba(147, 51, 234, 0) 0%,*/
/*            rgba(192, 132, 252, 1) 50%,*/
/*            rgba(147, 51, 234, 0) 100%*/
/*    );*/
/*    background-size: 200% 100%;*/
/*    animation: interestFlow 4s linear infinite;*/
/*    box-shadow: 0 0 6px rgba(192, 132, 252, 0.3);*/
/*    transition: all 0.4s ease;*/
/*}*/

/* 💫 下划线流动动画 */
/*@keyframes interestFlow {*/
/*    0% { background-position: 200% 0; opacity: 0.8; }*/
/*    50% { background-position: 0% 0; opacity: 1; }*/
/*    100% { background-position: -200% 0; opacity: 0.8; }*/
/*}*/

/* 🪶 悬浮特效 */
/*#interest h2:hover {*/
/*    transform: translateY(-3px) scale(1.03);*/
/*    color: #c084fc;*/
/*    text-shadow:*/
/*            0 0 6px rgba(192, 132, 252, 0.5),*/
/*            0 0 14px rgba(147, 51, 234, 0.4);*/
/*    filter: brightness(1.2);*/
/*}*/

/*#interest h2:hover::after {*/
/*    width: 110px;*/
/*    box-shadow:*/
/*            0 0 12px rgba(192, 132, 252, 0.45),*/
/*            0 0 24px rgba(192, 132, 252, 0.35);*/
/*    opacity: 1;*/
/*}*/

/* 🌙 暗色模式 */
/*[data-theme="dark"] #interest h2 {*/
/*    color: #E9D5FF;*/
/*}*/
/*[data-theme="dark"] #interest h2::after {*/
/*    background: linear-gradient(*/
/*            90deg,*/
/*            rgba(216, 180, 254, 0) 0%,*/
/*            rgba(216, 180, 254, 0.9) 50%,*/
/*            rgba(216, 180, 254, 0) 100%*/
/*    );*/
/*    box-shadow: 0 0 8px rgba(216, 180, 254, 0.4);*/
/*}*/
/* ===============================
   博客区 · 整体纵向节奏优化
   =============================== */

/* =====================================================
   博客区整体节奏
===================================================== */

/*#blog {*/
/*    padding-top: 72px;*/
/*    padding-bottom: 96px;*/
/*}*/

/* =====================================================
   博客主标题
===================================================== */

/*#blog .section-title {*/
/*    margin-bottom: 12px;*/
/*}*/

/*#blog .section-subtitle {*/
/*    margin-bottom: 48px;*/
/*    color: var(--text-muted);*/
/*}*/

/* =====================================================
   博客入口（三分类）
===================================================== */

/* ======================================================
   博客 · 精选 / 近期（单卡片主视觉切换版）
   ====================================================== */

/* ===============================
   博客入口（三分类） → 精选区间距
   =============================== */
/*.blog-entry-grid {*/
/*    margin-bottom: 64px;*/
/*}*/

/* ===============================
   精选博客标题区
   =============================== */
/*.blog-featured-divider {*/
/*    margin-bottom: 24px;*/
/*}*/

/*.blog-featured-header {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*    margin-bottom: 6px;*/
/*}*/

/*.blog-showcase-title {*/
/*    font-size: 1.05rem;*/
/*    font-weight: 700;*/
/*    margin: 0;*/
/*}*/

/*.blog-showcase-subtitle {*/
/*    margin: 0;*/
/*    font-size: 0.9rem;*/
/*    color: var(--text-muted);*/
/*}*/

/* ===============================
   推荐 / 近期 切换按钮
   =============================== */
/*.blog-toggle {*/
/*    display: inline-flex;*/
/*    gap: 6px;*/
/*    padding: 4px;*/
/*    border-radius: 999px;*/
/*    background: rgba(99, 102, 241, 0.08);*/
/*}*/

/*.toggle-btn {*/
/*    border: none;*/
/*    background: transparent;*/
/*    padding: 6px 14px;*/
/*    font-size: 0.8rem;*/
/*    font-weight: 600;*/
/*    border-radius: 999px;*/
/*    cursor: pointer;*/
/*    color: var(--text-muted);*/
/*    transition: all 0.3s ease;*/
/*}*/

/*.toggle-btn:hover {*/
/*    color: rgb(79, 70, 229);*/
/*}*/

/*.toggle-btn.active {*/
/*    background: #fff;*/
/*    color: rgb(79, 70, 229);*/
/*    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.18);*/
/*}*/

/* ===============================
   列表显隐（推荐 / 近期）
   =============================== */
/*.blog-list {*/
/*    display: none;*/
/*}*/

/*.blog-list.active {*/
/*    display: block;*/
/*}*/

/* ======================================================
   🎯 核心：单卡片 Carousel 容器
   ====================================================== */

/*.blog-carousel-wrapper {*/
/*    position: relative;*/
   /* max-width: 820px;        /* ⭐ 占满感来源（可调：780~900） 
/*    margin: 32px auto 0;*/
/*}*/

/* 轨道：只放一张卡 */
/*.blog-carousel {*/
/*    display: flex;*/
/*    overflow: hidden;*/
/*}*/

/* 每一张卡 = 整个舞台 */
/*.blog-carousel .blog-card {*/
/*    flex: 0 0 100%;*/
/*}*/

/* ===============================
   博客卡片（主视觉风格）
   =============================== */
/*.blog-card {*/
/*    background: var(--bg-card);*/
/*    border: 1px solid var(--border-light);*/
/*    border-radius: 20px;*/
/*    padding: 32px 36px;*/

/*    transition:*/
/*            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),*/
/*            box-shadow 0.45s ease;*/
/*}*/

/*.blog-card:hover {*/
/*    transform: translateY(-6px);*/
/*    box-shadow:*/
/*            0 14px 36px rgba(99, 102, 241, 0.18),*/
/*            0 0 18px rgba(129, 140, 248, 0.22);*/
/*}*/

/* ===============================
   左右切换按钮
   =============================== */
/*.carousel-btn {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/

/*    width: 44px;*/
/*    height: 44px;*/
/*    border-radius: 50%;*/
/*    border: none;*/

/*    background: #ffffff;*/
/*    color: rgb(79, 70, 229);*/
/*    font-size: 22px;*/
/*    font-weight: 700;*/

/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/

/*    cursor: pointer;*/
/*    z-index: 5;*/

/*    box-shadow: 0 10px 26px rgba(79, 70, 229, 0.22);*/
/*    transition: all 0.25s ease;*/
/*}*/

/*.carousel-btn:hover {*/
/*    transform: translateY(-50%) scale(1.08);*/
/*    box-shadow: 0 16px 34px rgba(79, 70, 229, 0.32);*/
/*}*/

/*.carousel-btn.prev {*/
/*    left: -64px;*/
/*}*/

/*.carousel-btn.next {*/
/*    right: -64px;*/
/*}*/

/* ===============================
   移动端适配
   =============================== */
/*@media (max-width: 768px) {*/
/*    .blog-carousel-wrapper {*/
/*        max-width: 100%;*/
/*    }*/

/*    .carousel-btn {*/
/*        opacity: 0.35;*/
/*    }*/

/*    .carousel-btn.prev {*/
/*        left: -20px;*/
/*    }*/

/*    .carousel-btn.next {*/
/*        right: -20px;*/
/*    }*/
/*}*/


/* ======================================================
   BLOG SECTION · #blog（入口三卡 + 推荐/近期切换 + 单卡Carousel）
   ====================================================== */

/* ======================================================
   BLOG SECTION · Writing & Living (FULL REPLACE)
   适配你的 HTML：
   #blog .section-title.fancy-title + .blog-entry-grid
   + .blog-featured-divider + toggle + featured/recent carousel
   ====================================================== */

/* ===============================
   Section spacing
   =============================== */
#blog {
  padding-top: 72px;
  padding-bottom: 96px;
}

/* 主标题布局 */
#blog .section-title {
  text-align: center;
  margin-bottom: 12px;
}

#blog .section-subtitle {
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 48px;
  line-height: 1.6;
}

/* ===============================
   Fancy Title (酷炫标题)
   =============================== */
#blog .fancy-title {
  position: relative;
  display: inline-block;

  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--text-main);

  padding-bottom: 14px;
  margin-bottom: 10px;

  transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* 底部能量线 */
#blog .fancy-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;

  width: 0%;
  height: 3px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    rgba(99,102,241,0.2),
    rgba(99,102,241,0.9),
    rgba(129,140,248,0.9),
    rgba(99,102,241,0.2)
  );

  transform: translateX(-50%);
  opacity: 0.45;
  transition:
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease;
}

/* 外层柔光 */
#blog .fancy-title::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;

  width: 72%;
  height: 12px;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(99,102,241,0.42),
    transparent 70%
  );

  transform: translateX(-50%) scale(0.88);
  opacity: 0;
  filter: blur(14px);

  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 悬浮 */
#blog .fancy-title:hover {
  color: rgb(79, 70, 229);
  text-shadow:
    0 0 6px rgba(99,102,241,0.30),
    0 0 18px rgba(129,140,248,0.22);
}
#blog .fancy-title:hover::after {
  width: 100%;
  opacity: 1;
}
#blog .fancy-title:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1.05);
}

/* 暗色 */
[data-theme="dark"] #blog .fancy-title {
  color: #e5e7eb;
}
[data-theme="dark"] #blog .fancy-title:hover {
  color: rgb(165,180,252);
  text-shadow:
    0 0 8px rgba(129,140,248,0.42),
    0 0 22px rgba(165,180,252,0.30);
}
[data-theme="dark"] #blog .fancy-title::after {
  background: linear-gradient(
    90deg,
    rgba(165,180,252,0.22),
    rgba(165,180,252,0.95),
    rgba(129,140,248,0.95),
    rgba(165,180,252,0.22)
  );
}
[data-theme="dark"] #blog .fancy-title::before {
  background: radial-gradient(
    circle,
    rgba(165,180,252,0.50),
    transparent 70%
  );
}

/* ===============================
   Blog Entry Grid (三分类入口)
   =============================== */
/* ======================================================
   博客 · Writing & Living（#blog 全区可替换版）
   解决：背景割裂 / 直角硬边 / hover 被裁切
   ====================================================== */

/* ===============================
   Section spacing
=============================== */
#blog {
  padding-top: 72px;
  padding-bottom: 96px;
}

/* 主标题 + 副标题（沿用你原来的 fancy-title 也OK） */
#blog .section-title {
  margin-bottom: 12px;
  text-align: center;
}

#blog .section-subtitle {
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 48px;
  line-height: 1.6;
}

/* ===============================
   博客入口（三分类）
=============================== */
#blog .blog-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-bottom: 64px;
}

#blog .blog-entry-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;

  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease,
              border-color 0.45s ease;
}

#blog .blog-entry-card:hover {
  transform: translateY(-10px) scale(1.03);
}

#blog .entry-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
}

#blog .blog-entry-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-main);
}

#blog .entry-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

#blog .entry-link {
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.25s ease, transform 0.25s ease;
}

#blog .entry-link:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* 三种卡片 hover 色 */
#blog .blog-entry-card.study:hover {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 14px 34px rgba(99,102,241,0.18);
}
#blog .blog-entry-card.study .entry-link { color: rgb(99, 102, 241); }

#blog .blog-entry-card.life:hover {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 14px 34px rgba(34,197,94,0.18);
}
#blog .blog-entry-card.life .entry-link { color: rgb(34, 197, 94); }

#blog .blog-entry-card.interest:hover {
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow: 0 14px 34px rgba(249,115,22,0.18);
}
#blog .blog-entry-card.interest .entry-link { color: rgb(249, 115, 22); }

/* dark */
[data-theme="dark"] #blog .blog-entry-card {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ===============================
   精选/近期 标题 + 切换
=============================== */
#blog .blog-featured-divider {
  margin-bottom: 22px;
}

#blog .blog-featured-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 6px;
}

#blog .blog-showcase-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-main);
}

#blog .blog-showcase-subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 640px;
}

/* toggle pills */
#blog .blog-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.09);
  border: 1px solid rgba(99, 102, 241, 0.10);
}

#blog .toggle-btn {
  border: none;
  background: transparent;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

#blog .toggle-btn:hover {
  color: rgb(79, 70, 229);
}

#blog .toggle-btn.active {
  background: rgba(255,255,255,0.95);
  color: rgb(79, 70, 229);
  box-shadow: 0 6px 16px rgba(99,102,241,0.18);
}

[data-theme="dark"] #blog .toggle-btn.active {
  background: rgba(30,41,59,0.92);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

/* list show/hide */
#blog .blog-list { display: none; }
#blog .blog-list.active { display: block; }

/* ===============================
   单卡片 Carousel（关键：不再裁切 hover 光晕）
=============================== */
/*上面的不要动了*/
/*博客精选，近期卡片代码*/
/* ======================================================
   Blog · Writing & Living (Clean Rebuild)
   只依赖雾，不出现任何边框/硬背景
   ====================================================== */

/* ===============================
   Blog Section Base
   =============================== */
#blog {
    padding: 80px 0 100px;
}

#blog .section-title {
    text-align: center;
    margin-bottom: 10px;
}

#blog .section-subtitle {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 56px;
}

/* ===============================
   Entry Cards (Study / Life / Interest)
   =============================== */
.blog-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    margin-bottom: 72px;
}

.blog-entry-card {
    background: rgba(255,255,255,0.55);
    border-radius: 22px;
    padding: 32px 28px;
    text-align: center;

    transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.blog-entry-card:hover {
    transform: translateY(-8px);
}

.entry-icon {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.blog-entry-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.entry-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 18px;
}

.entry-link {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

/* ===============================
   Featured / Recent Header
   =============================== */
.blog-featured-divider {
    margin-bottom: 28px;
}

.blog-featured-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.blog-showcase-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.blog-showcase-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ===============================
   Toggle Buttons
   =============================== */
.blog-toggle {
    display: inline-flex;
    padding: 4px;
    gap: 6px;
    border-radius: 999px;
    background: rgba(99,102,241,0.08);
}

.toggle-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    transition: all .3s ease;
}

.toggle-btn.active {
    background: #fff;
    color: rgb(79,70,229);
    box-shadow: 0 2px 8px rgba(99,102,241,.18);
}

/* ===============================
   Blog List Visibility
   =============================== */
.blog-list {
    display: none;
}
.blog-list.active {
    display: block;
}

/* ======================================================
   ⭐ Core: Fog Card Carousel
   ====================================================== */
.blog-carousel-wrapper {
    position: relative;
    max-width: 760px;     /* 稍微宽一点，但不铺满 */
    margin: 36px auto 0;
}

.blog-carousel {
    display: flex;
    overflow: visible;   /* 关键：雾不被裁剪 */
}

/* 每次只显示一张 */
.blog-carousel .blog-card {
    flex: 0 0 100%;
}

/* ===============================
   Fog Card (NO border / NO hard bg)
   =============================== */
.blog-card {
    position: relative;
    padding: 36px 44px;
    border-radius: 30px;

    /* 几乎不可感知的实体 */
    background: rgba(255,255,255,0.42);

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        background .4s ease;
}

/* 纯雾层 */
.blog-card::before {
    content: "";
    position: absolute;
    inset: -40px;
    border-radius: 52px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(129,140,248,.28),
            rgba(129,140,248,.16) 40%,
            rgba(129,140,248,.08) 58%,
            rgba(129,140,248,.03) 72%,
            transparent 82%
        );

    filter: blur(38px);
    opacity: .75;
    z-index: -1;

    transition:
        opacity .5s ease,
        filter .5s ease,
        transform .5s ease;
}

.blog-card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,0.5);
}

.blog-card:hover::before {
    opacity: 1;
    filter: blur(46px);
    transform: scale(1.04);
}

/* ===== 博客卡片 · 柔和描边悬浮效果（与你截图一致） ===== */

.blog-card {
    position: relative;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease;
}

/* 悬浮：不改背景，只做柔光 */
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 0 1.5px rgba(99,102,241,0.55),   /* 细描边 */
        0 12px 36px rgba(99,102,241,0.18),  /* 外阴影 */
        0 0 28px rgba(129,140,248,0.22);    /* 雾化光 */
}

/* 防止直角感（关键） */
.blog-card,
.blog-card:hover {
    border-radius: 22px;
    background-clip: padding-box;
}

/* ===============================
   Card Content
   =============================== */
.blog-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.blog-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.45;
}

.blog-desc {
    font-size: .95rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 18px;
}

.blog-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.blog-tag {
    font-size: .75rem;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(99,102,241,.12);
    color: rgb(79,70,229);
    font-weight: 600;
}

.blog-btn {
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: rgb(79,70,229);
}

/* ===============================
   Carousel Buttons
   =============================== */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: rgb(79,70,229);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(79,70,229,.25);
    transition: all .25s ease;
}

.carousel-btn:hover {
    transform: translateY(-50%) scale(1.08);
}

.carousel-btn.prev { left: -64px; }
.carousel-btn.next { right: -64px; }

/* ===============================
   Dark Mode
   =============================== */
[data-theme="dark"] .blog-card {
    background: rgba(30,41,59,.42);
}

[data-theme="dark"] .blog-card::before {
    background:
        radial-gradient(
            ellipse at center,
            rgba(165,180,252,.32),
            rgba(165,180,252,.18) 40%,
            rgba(165,180,252,.09) 58%,
            rgba(165,180,252,.04) 72%,
            transparent 82%
        );
}


 /*补充标题，标签，按钮样式*/
/* ===== 博客卡片标题（统一为柔和强调风格） ===== */
.blog-card .blog-title {
    position: relative;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.5;
    margin-bottom: 10px;

    transition:
        color 0.35s ease,
        text-shadow 0.35s ease;
}

/* 底部能量线（默认弱） */
.blog-card .blog-title::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 8px;
    border-radius: 999px;

    background: linear-gradient(
        90deg,
        rgba(99,102,241,0.15),
        rgba(129,140,248,0.6),
        rgba(99,102,241,0.15)
    );

    opacity: 0.55;
    transition:
        width 0.35s ease,
        opacity 0.35s ease;
}

/* 悬浮时标题轻微发光 */
.blog-card:hover .blog-title {
    color: rgb(79,70,229);
    text-shadow:
        0 0 6px rgba(129,140,248,0.25);
}

.blog-card:hover .blog-title::after {
    width: 72px;
    opacity: 0.9;
}

/* ===== 博客卡片标签（统一为雾化胶囊风） ===== */
.blog-card .blog-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.blog-card .blog-tag {
    font-size: 0.75rem;
    padding: 5px 14px;
    border-radius: 999px;
    font-weight: 600;

    background: rgba(99,102,241,0.10);
    color: rgb(79,70,229);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.blog-card .blog-tag:hover {
    transform: translateY(-1px);
    background: rgba(129,140,248,0.18);
    box-shadow:
        0 4px 10px rgba(129,140,248,0.25);
}

/* ===== 博客卡片 阅读按钮（统一为轻行动按钮） ===== */
.blog-card .blog-actions {
    margin-top: 6px;
}

.blog-card .blog-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 10px;

    color: rgb(79,70,229);
    background: rgba(99,102,241,0.10);

    text-decoration: none;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.blog-card .blog-btn:hover {
    transform: translateY(-2px);
    background: rgba(129,140,248,0.18);
    box-shadow:
        0 6px 16px rgba(129,140,248,0.28);
}
/*分割线*/
.main {
    width: 100%;
    min-height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* ✅允许自动换行 */
    background: var(--team-bg);
    transition: background 0.35s ease;
    padding: 20px;
}

/* 成员卡片 */
.profile-card {
    position: relative;
    font-family: sans-serif;
    width: 220px;
    height: 220px;
    background: var(--team-card-bg);
    padding: 30px;
    border-radius: 50%;
    box-shadow: 0 0 22px #3336;
    transition: 0.6s;
    margin: 15px;
}

/* 悬停展开 */
.profile-card:hover {
    border-radius: 12px;
    height: 260px;
}

/* 头像区域 */
.profile-card .img {
    width: 100%;
    height: 100%;
    transition: 0.6s;
    z-index: 99;
}
.profile-card:hover .img {
    transform: translateY(-60px);
}
.img img {
    width: 100%;
    border-radius: 20%;
    box-shadow: 0 0 22px #3336;
    transition: 1.2s;
}
.profile-card:hover img {
    border-radius: 12px;
}

/* 文本区域 */
.caption {
    text-align: center;
    transform: translateY(-80px);
    opacity: 0;
    transition: 0.6s;
}
.profile-card:hover .caption {
    opacity: 1;
}
.caption h3 {
    font-size: 20px;
    color: var(--team-title);
    font-weight: 600;
}
.caption p {
    font-size: 13px;
    color: var(--team-highlight);
    margin: auto auto;
    max-width: 100%;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.2;
}

/* 社交 icon */
.caption .social-links a {
    color: var(--team-icon);
    margin-right: 10px;
    font-size: 21px;
    transition: 0.6s;
}
.caption .social-links a:hover {
    color: var(--team-highlight);
    transform: scale(1.15);
}

/* ========================== */
/* 📱 响应式适配区域 */
/* ========================== */

/* ✅ 平板尺寸（768px 以下） */
@media (max-width: 992px) {
    .main {
        flex-wrap: wrap;
        gap: 20px;
        padding: 30px 10px;
    }
    .profile-card {
        width: 180px;
        height: 180px;
        padding: 20px;
        margin: 10px;
    }
    .caption h3 {
        font-size: 18px;
    }
    .caption p {
        font-size: 12px;
    }
}

/* ✅ 手机尺寸（600px 以下） */
@media (max-width: 600px) {
    .main {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 20px 0;
    }
    .profile-card {
        width: 75%;
        max-width: 260px;
        height: 240px;
        border-radius: 16px;
        margin: 12px 0;
    }
    .profile-card:hover {
        height: 260px;
    }
    .img img {
        border-radius: 16px;
    }
    .profile-card:hover img {
        border-radius: 16px;
    }
    .caption {
        transform: translateY(-50px);
    }
    .caption h3 {
        font-size: 18px;
    }
    .caption p {
        font-size: 13px;
    }
    .caption .social-links a {
        font-size: 18px;
        margin-right: 8px;
    }
}

/* ===============================
   Blog Card · Softer Hover (anti-sharp)
   直接覆盖你现有的 blog-card hover
=============================== */



/*cursor*/
/* 流星光标尾迹 */
/*.meteor {*/
/*    position: absolute;*/
/*    border-radius: 50%;*/
/*    pointer-events: none;*/
/*    transform: translate(-50%, -50%);*/
/*    animation: meteor-trail 0.4s linear forwards;*/
/*}*/

/*@keyframes meteor-trail {*/
/*    0% {*/
/*        opacity: 1;*/
/*        transform: translate(-50%, -50%) scale(1);*/
/*    }*/
/*    70% {*/
/*        opacity: 0.7;*/
/*        transform: translate(-50%, -50%) scale(0.7) translateX(-20px) translateY(-20px);*/
/*    }*/
/*    100% {*/
/*        opacity: 0;*/
/*        transform: translate(-50%, -50%) scale(0.1) translateX(-90px) translateY(-90px);*/
/*    }*/
/*}*/

/*.meteor {*/
/*    position: absolute;*/
/*    width: 90px;                 !* 光线长度 *!*/
/*    height: 3px;                 !* 光线粗细 *!*/
/*    background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); !* 从亮→透明 *!*/
/*    border-radius: 4px;*/
/*    pointer-events: none;*/
/*    transform-origin: left center;  !* 让光线以左端为起点 *!*/
/*    animation: meteor-trail 0.9s linear forwards;*/
/*    filter: drop-shadow(0 0 6px rgba(255,255,255,0.9)); !* 发光效果 *!*/
/*}*/

/*@keyframes meteor-trail {*/
/*    0% {*/
/*        opacity: 1;*/
/*        transform: scale(1) translateX(0);*/
/*    }*/
/*    70% {*/
/*        opacity: 0.8;*/
/*        transform: scale(0.9) translateX(-40px);*/
/*    }*/
/*    100% {*/
/*        opacity: 0;*/
/*        transform: scale(0.7) translateX(-120px);*/
/*    }*/
/*}*/


/* 流星粒子 */
/* 流星光标尾迹 */
.meteor {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: meteor-trail 0.3s linear forwards;
}

@keyframes meteor-trail {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    70% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.7) translateX(-40px) translateY(-40px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.1) translateX(-80px) translateY(-80px);
    }
}

/*2025.12.15 点赞系统*/
/* ======================================================
   能量点赞组件 · 变量区（请确保上一段 CSS 已闭合）
====================================================== */

/* 🌞 浅色模式（默认） */
:root {
  --energy-rgb: 99, 102, 241;        /* 主能量色（随点赞变化） */
  --energy-soft-rgb: 129, 140, 248;  /* 柔光扩散色 */
  --energy-text: #1f2937;
}

/* 🌙 暗色模式 */
[data-theme="dark"] {
  --energy-rgb: 129, 140, 248;
  --energy-soft-rgb: 165, 180, 252;
  --energy-text: #e5e7eb;
}

/* ======================================================
   外层容器
====================================================== */
.like-box {
  position: relative;
  margin: 72px auto;
  padding: 36px 48px;
  width: fit-content;
  text-align: center;
  border-radius: 28px;
  color: var(--energy-text);

  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== 外围柔性能量雾（唯一一层） ===== */
.like-box::before {
  content: "";
  position: absolute;
  inset: -26px;
  border-radius: 40px;

  background: radial-gradient(
    circle,
    rgba(var(--energy-soft-rgb), 0.22) 0%,
    rgba(var(--energy-soft-rgb), 0.12) 40%,
    rgba(var(--energy-soft-rgb), 0.05) 60%,
    transparent 75%
  );

  filter: blur(22px);
  opacity: 0.65;
  z-index: -1;

  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ======================================================
   点赞按钮主体
====================================================== */
.like-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 32px;
  border-radius: 999px;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;

  color: rgb(var(--energy-rgb));
  background: linear-gradient(
    180deg,
    rgba(var(--energy-rgb), 0.12),
    rgba(var(--energy-rgb), 0.04)
  );

  border: 2px solid rgba(var(--energy-rgb), 0.55);
  cursor: pointer;

  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease;
}

/* ===== 按钮能量边框光（唯一按钮光层） ===== */
.like-btn::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: inherit;

  background: radial-gradient(
    circle,
    rgba(var(--energy-soft-rgb), 0.28),
    transparent 70%
  );

  opacity: 0.45;
  filter: blur(18px);
  z-index: -1;

  animation: energyBreath 3.6s ease-in-out infinite;
}

/* ===== 悬浮：向外扩散 ===== */
.like-btn:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(var(--energy-rgb), 0.9);

  box-shadow:
    0 10px 28px rgba(var(--energy-rgb), 0.35);
}

.like-btn:hover::before {
  opacity: 0.75;
  filter: blur(26px);
}

/* ======================================================
   已点赞状态（更强但克制）
====================================================== */
.like-box.liked .like-btn {
  border-color: rgb(var(--energy-soft-rgb));
  box-shadow:
    0 12px 32px rgba(var(--energy-rgb), 0.42);
}

.like-box.liked .like-btn::before {
  animation: energyPulse 2.8s ease-in-out infinite;
}

/* ======================================================
   点赞信息
====================================================== */
.like-info {
  margin-top: 14px;
  font-size: 14px;
  color: #64748b;
}

.like-count {
  margin-left: 6px;
  font-size: 20px;
  font-weight: 700;
  color: rgb(var(--energy-rgb));
  display: inline-block;
}

/* 数字弹跳 */
.like-count.bump {
  animation: countBump 0.45s ease;
}

@keyframes countBump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* ======================================================
   状态文案
====================================================== */
.like-status {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.75;
}

/* ======================================================
   动画定义（统一节奏）
====================================================== */
@keyframes energyBreath {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
}

@keyframes energyPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.9;
  }
}





/*2025.12.17 留言板块*/
/* ===============================
   Comment Section
=============================== */
/* =========================================
   留言板 · Comments Section
========================================= */
/* ===============================
   留言区 · Comments（最终版）
   风格：柔雾 / 低对比 / 自然响应
=============================== */

/*.comment-scope {*/
/*  margin-top: 80px;*/
/*  padding: 56px 64px;*/
/*  border-radius: 28px;*/
/*  background: linear-gradient(*/
/*    180deg,*/
/*    rgba(246, 248, 255, 0.9),*/
/*    rgba(250, 251, 255, 0.95)*/
/*  );*/
/*}*/

/* 标题 */
/*.comment-title {*/
/*  font-size: 1.6rem;*/
/*  font-weight: 800;*/
/*  color: var(--text-main);*/
/*  margin-bottom: 36px;*/
/*  position: relative;*/
/*}*/

/*.comment-title::after {*/
/*  content: "";*/
/*  display: block;*/
/*  width: 42px;*/
/*  height: 3px;*/
/*  margin-top: 10px;*/
/*  border-radius: 99px;*/
/*  background: linear-gradient(*/
/*    90deg,*/
/*    rgba(99,102,241,0.25),*/
/*    rgba(99,102,241,0.85)*/
/*  );*/
/*}*/

/* ===============================
   布局：左右结构
=============================== */

/*.comment-layout {*/
/*  display: grid;*/
/*  grid-template-columns: 380px 1fr;*/
/*  gap: 56px;*/
/*  align-items: flex-start;*/
/*}*/

/* ===============================
   左侧：留言输入
=============================== */

/*.comment-form {*/
/*  background: rgba(255,255,255,0.75);*/
/*  border-radius: 22px;*/
/*  padding: 28px;*/
/*  box-shadow:*/
/*    0 18px 40px rgba(99,102,241,0.12),*/
/*    0 2px 10px rgba(99,102,241,0.08);*/
/*}*/

/*.comment-form input,*/
/*.comment-form textarea {*/
/*  width: 100%;*/
/*  font-size: 0.95rem;*/
/*  padding: 12px 14px;*/
/*  border-radius: 12px;*/
/*  border: none;*/
/*  outline: none;*/
/*  background: rgba(245,247,255,0.9);*/
/*  color: var(--text-main);*/
/*  transition: box-shadow 0.3s ease;*/
/*}*/

/*.comment-form input {*/
/*  margin-bottom: 14px;*/
/*}*/

/*.comment-form textarea {*/
/*  resize: none;*/
/*  min-height: 120px;*/
/*}*/

/*.comment-form input:focus,*/
/*.comment-form textarea:focus {*/
/*  box-shadow:*/
/*    0 0 0 2px rgba(99,102,241,0.35);*/
/*}*/

/* 提交按钮 */
/*.comment-form button {*/
/*  margin-top: 18px;*/
/*  margin-left: auto;*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/

/*  padding: 10px 22px;*/
/*  border-radius: 999px;*/
/*  border: none;*/
/*  cursor: pointer;*/

/*  font-size: 0.85rem;*/
/*  font-weight: 600;*/
/*  color: #fff;*/

/*  background: linear-gradient(*/
/*    135deg,*/
/*    rgb(99,102,241),*/
/*    rgb(129,140,248)*/
/*  );*/

/*  box-shadow:*/
/*    0 10px 24px rgba(99,102,241,0.35);*/

/*  transition: transform 0.3s ease, box-shadow 0.3s ease;*/
/*}*/

/*.comment-form button:hover {*/
/*  transform: translateY(-2px);*/
/*  box-shadow:*/
/*    0 14px 32px rgba(99,102,241,0.45);*/
/*}*/

/* ===============================
   右侧：评论列表
=============================== */

/*.comment-list {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  gap: 20px;*/
/*}*/

/* 单条评论 */
/*.comment-item {*/
/*  background: rgba(255,255,255,0.65);*/
/*  border-radius: 18px;*/
/*  padding: 18px 22px;*/
/*  box-shadow:*/
/*    0 10px 28px rgba(99,102,241,0.12);*/
/*}*/

/* 头部 */
/*.comment-header {*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*  margin-bottom: 8px;*/
/*}*/

/*.comment-nick {*/
/*  font-size: 0.9rem;*/
/*  font-weight: 700;*/
/*  color: var(--text-main);*/
/*}*/

/*.comment-time {*/
/*  font-size: 0.75rem;*/
/*  color: var(--text-muted);*/
/*}*/

/* 内容 */
/*.comment-content {*/
/*  font-size: 0.95rem;*/
/*  line-height: 1.7;*/
/*  color: var(--text-main);*/
/*  opacity: 0.9;*/
/*}*/

/* ===============================
   响应式：平板 & 手机
=============================== */

/*@media (max-width: 1024px) {*/
/*  .comment-layout {*/
/*    grid-template-columns: 1fr;*/
/*  }*/

/*  .comment-form {*/
/*    margin-bottom: 28px;*/
/*  }*/
/*}*/

/*@media (max-width: 640px) {*/
/*  .comment-scope {*/
/*    padding: 40px 22px;*/
/*  }*/

/*  .comment-title {*/
/*    font-size: 1.4rem;*/
/*  }*/
/*}*/

/* ===============================
   暗色模式
=============================== */

/*[data-theme="dark"] .comment-scope {*/
/*  background: linear-gradient(*/
/*    180deg,*/
/*    rgba(30,41,59,0.9),*/
/*    rgba(15,23,42,0.95)*/
/*  );*/
/*}*/

/*[data-theme="dark"] .comment-form,*/
/*[data-theme="dark"] .comment-item {*/
/*  background: rgba(30,41,59,0.85);*/
/*  box-shadow:*/
/*    0 12px 30px rgba(0,0,0,0.55);*/
/*}*/

/*[data-theme="dark"] .comment-form input,*/
/*[data-theme="dark"] .comment-form textarea {*/
/*  background: rgba(15,23,42,0.9);*/
/*  color: #e5e7eb;*/
/*}*/

/* ===============================
   评论区 · 总体容器
================================ */
/* ===============================
   Telegram-style Comments
=============================== */
/* ===== 整体背景 ===== */
.comment-layout {
  display: grid;
  grid-template-columns: 0.38fr 0.62fr; /* 左短右长 */
  gap: 56px;
  align-items: stretch;
}

.comment-form-card {
  background: rgba(255,255,255,0.9);
  border-radius: 28px;
  padding: 36px;
  box-shadow:
    0 30px 80px rgba(90,110,255,0.18);
}
html[data-theme='dark'] .comment-form-card {
  background: rgba(28,32,54,0.95);
}

.comment-form-card input,
.comment-form-card textarea {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 14px;
  border: none;
  font-size: 15px;
  background: rgba(120,130,255,0.12);
}
.comment-form-card textarea {
  height: 130px;
  resize: none;
}

.comment-form-card button {
  border: none;
  border-radius: 999px;
  padding: 12px 28px;
  cursor: pointer;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg,#6b74ff,#5b6cff);
  box-shadow: 0 12px 28px rgba(90,110,255,0.35);
}

.comment-panel {
  height: 520px;
  display: flex;
  flex-direction: column;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.65),
      rgba(245,247,255,0.5)
    );

  border-radius: 32px;
  padding: 26px 22px 18px;

  box-shadow:
    inset 0 0 0 1px rgba(120,130,255,0.12),
    0 36px 90px rgba(120,130,255,0.22);
}
html[data-theme='dark'] .comment-panel {
  background:
    linear-gradient(
      180deg,
      rgba(26,30,48,0.92),
      rgba(20,23,38,0.88)
    );
}

.comment-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;

  display: flex;
  flex-direction: column;
  gap: 18px;
}

.comment-list::-webkit-scrollbar {
  width: 6px;
}
.comment-list::-webkit-scrollbar-thumb {
  background: rgba(120,130,255,0.22);
  border-radius: 999px;
}
.comment-list:hover::-webkit-scrollbar-thumb {
  background: rgba(120,130,255,0.45);
}

.comment-item {
  max-width: 88%;
  align-self: flex-start;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.95),
      rgba(248,250,255,0.92)
    );

  border-radius: 22px 22px 22px 8px;
  padding: 16px 20px 18px;

  box-shadow:
    0 12px 36px rgba(120,130,255,0.18);

  animation:
    bubbleIn 0.35s ease both,
    bubbleBreath 6.5s ease-in-out infinite;

  transition: box-shadow 0.35s ease;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bubbleBreath {
  0%,100% {
    box-shadow: 0 12px 36px rgba(120,130,255,0.18);
  }
  50% {
    box-shadow: 0 18px 52px rgba(120,130,255,0.32);
  }
}

.comment-item:hover {
  box-shadow:
    0 22px 64px rgba(120,130,255,0.42);
}

html[data-theme='dark'] .comment-item {
  background:
    linear-gradient(
      135deg,
      rgba(38,42,66,0.96),
      rgba(30,34,56,0.92)
    );
  color: #e7e9ff;
}

.comment-item .comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 6px;
}
.comment-item .comment-header strong {
  font-weight: 600;
  color: #2b2f55;
}
html[data-theme='dark'] .comment-item .comment-header strong {
  color: #e6e9ff;
}

.comment-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
}

.comment-pagination button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: rgba(120,130,255,0.18);
  color: #4a55e2;

  transition: all 0.25s ease;
}

.comment-pagination button:hover {
  background: rgba(120,130,255,0.35);
  box-shadow: 0 0 16px rgba(120,130,255,0.45);
}

/* =========================================
   Comment Section · Telegram Academic Style
   覆盖 & 定型版
========================================= */

/* ===== 整体容器：进入页面宽度体系 ===== */
.comment-scope {
  max-width: 1100px;          /* ⭐ 控制在页面内容宽度 */
  margin: 100px auto;
  padding: 56px 64px 64px;
  border-radius: 32px;

  background: linear-gradient(
    180deg,
    rgba(245,247,255,0.75),
    rgba(240,243,255,0.55)
  );

  box-shadow:
    0 40px 120px rgba(90,110,255,0.12);
}

/* 夜间模式 */
html[data-theme='dark'] .comment-scope {
  background: linear-gradient(
    180deg,
    rgba(26,30,46,0.95),
    rgba(20,23,38,0.9)
  );
}

/* ===== 标题 ===== */
.comment-title {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 56px;
  position: relative;
}

.title-line {
  display: block;
  width: 52px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c83ff, #9fa6ff);
  animation: titleBreath 3s ease-in-out infinite;
}

@keyframes titleBreath {
  0%,100% { opacity: .45; transform: scaleX(.8); }
  50%     { opacity: 1;   transform: scaleX(1.1); }
}

/* ===== 左右布局：黄金比例（左窄右宽） ===== */
.comment-layout {
  display: grid;
  grid-template-columns: 0.38fr 0.62fr;
  gap: 48px;
  align-items: stretch;
}

/* =========================================
   左侧：留言表单（稳定、无浮动）
========================================= */

.comment-form-card {
  background: rgba(255,255,255,0.9);
  border-radius: 26px;
  padding: 36px;
  box-shadow:
    0 24px 60px rgba(120,130,255,0.18);
}

html[data-theme='dark'] .comment-form-card {
  background: rgba(32,36,58,0.95);
}

.comment-form-card input,
.comment-form-card textarea {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 14px;
  border: none;
  font-size: 15px;

  background: rgba(245,247,255,0.9);
}

html[data-theme='dark'] .comment-form-card input,
html[data-theme='dark'] .comment-form-card textarea {
  background: rgba(20,23,38,0.9);
  color: #e6e9ff;
}

.comment-form-card textarea {
  resize: none;
  height: 130px;
}

.comment-form-card button {
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #6b74ff, #5b6cff);
  color: #fff;
  font-weight: 500;

  transition: box-shadow .3s ease, transform .3s ease;
}

.comment-form-card button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(120,130,255,.45);
}

/* =========================================
   右侧：评论区（Telegram 气泡）
========================================= */

.comment-panel {
  display: flex;
  flex-direction: column;
  height: 520px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.65),
    rgba(245,247,255,0.45)
  );

  border-radius: 26px;
  padding: 24px 22px 18px;

  box-shadow:
    inset 0 0 0 1px rgba(120,130,255,.12),
    0 30px 80px rgba(120,130,255,.2);
}

html[data-theme='dark'] .comment-panel {
  background: linear-gradient(
    180deg,
    rgba(30,34,56,.95),
    rgba(22,25,40,.9)
  );
}

/* ===== 评论列表（滚动） ===== */
.comment-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;

  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 滚动条 */
.comment-list::-webkit-scrollbar {
  width: 6px;
}
.comment-list::-webkit-scrollbar-thumb {
  background: rgba(120,130,255,.3);
  border-radius: 999px;
}

/* =========================================
   评论气泡（重点：颜色边缘雾）
========================================= */

.comment-item {
  position: relative;
  max-width: 88%;
  align-self: flex-start;

  padding: 16px 20px 18px;
  border-radius: 22px 22px 22px 8px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.96),
    rgba(248,250,255,.94)
  );

  box-shadow:
    0 10px 32px rgba(120,130,255,.16);

  animation: bubbleIn .35s ease both,
             bubbleGlow 6s ease-in-out infinite;
}

/* 🌈 彩色雾化边缘（核心） */
.comment-item::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  z-index: -1;

  background: linear-gradient(
    135deg,
    rgba(124,131,255,.6),
    rgba(159,166,255,.6)
  );

  filter: blur(6px);
  opacity: .45;
}

/* 呼吸光影 */
@keyframes bubbleGlow {
  0%,100% {
    box-shadow: 0 10px 32px rgba(120,130,255,.16);
  }
  50% {
    box-shadow: 0 18px 54px rgba(120,130,255,.35);
  }
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hover：不晃，只增强 */
.comment-item:hover {
  box-shadow:
    0 22px 68px rgba(120,130,255,.45);
}

/* ===== 头部 ===== */
.comment-item .comment-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  opacity: .7;
  margin-bottom: 6px;
}

.comment-item strong {
  font-weight: 600;
  color: #2a2f55;
}

/* ===== 内容 ===== */
.comment-item div:last-child {
  font-size: 14.5px;
  line-height: 1.65;
  color: #2f344f;
}

/* 夜间模式气泡 */
html[data-theme='dark'] .comment-item {
  background: linear-gradient(
    135deg,
    rgba(38,42,66,.96),
    rgba(30,34,56,.94)
  );
}

html[data-theme='dark'] .comment-item div:last-child {
  color: #e6e9ff;
}

.comment-panel {
  height: 520px;
  display: flex;
  flex-direction: column;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.65),
    rgba(245,247,255,0.55)
  );

  border-radius: 26px;
  padding: 22px 22px 16px;

  box-shadow:
    inset 0 0 0 1px rgba(120,130,255,.12),
    0 24px 60px rgba(120,130,255,.14);
}

.comment-item {
  max-width: 88%;
  align-self: flex-start;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.96),
    rgba(248,250,255,.94)
  );

  border-radius: 22px 22px 22px 8px;
  padding: 16px 20px;

  /* 🌈 关键：彩色边框 */
  border: 1.5px solid rgba(120,130,255,.35);

  /* 光影克制 */
  box-shadow:
    0 10px 26px rgba(120,130,255,.14);

  /* 呼吸只影响边框亮度 */
  animation: bubbleBorder 6s ease-in-out infinite;

  transition:
    box-shadow .3s ease,
    border-color .3s ease;
}
@keyframes bubbleBorder {
  0%,100% {
    border-color: rgba(120,130,255,.28);
  }
  50% {
    border-color: rgba(120,130,255,.55);
  }
}
.comment-item:hover {
  box-shadow:
    0 16px 42px rgba(120,130,255,.32);
}
.comment-item .comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 13px;
  margin-bottom: 6px;
}

.comment-item .comment-header strong {
  font-weight: 600;
  color: #2b2f55;
}

.comment-item .comment-header span {
  font-size: 12px;
  color: #7b80b8;
  white-space: nowrap;
}

.comment-item > div:last-child {
  font-size: 14.5px;
  line-height: 1.65;
  color: #2f324a;
}

html[data-theme='dark'] .comment-panel {
  background: linear-gradient(
    180deg,
    rgba(26,30,46,.92),
    rgba(20,23,38,.88)
  );
}

html[data-theme='dark'] .comment-item {
  background: linear-gradient(
    135deg,
    rgba(36,40,64,.96),
    rgba(30,34,56,.92)
  );
  border-color: rgba(140,150,255,.35);
}

html[data-theme='dark'] .comment-item > div:last-child {
  color: #e7e9ff;
}


/*上面一版已经能看了，下面继续优化*/

/*.comment-scope {*/
/*  max-width: 1100px;*/
/*  margin: 80px auto;*/
/*  padding: 48px 56px;*/
/*}*/

/*.comment-panel {*/
/*  height: 520px;*/
/*  display: flex;*/
/*  flex-direction: column;*/

/*  background: linear-gradient(*/
/*    180deg,*/
/*    rgba(255,255,255,0.78),*/
/*    rgba(245,247,255,0.72)*/
/*  );*/

/*  border-radius: 26px;*/
/*  padding: 22px 20px 18px;*/

/*  box-shadow:*/
/*    inset 0 0 0 1px rgba(120,130,255,0.14),*/
/*    0 24px 60px rgba(120,130,255,0.18);*/
/*}*/

/*.comment-list {*/
/*  flex: 1;*/
/*  overflow-y: auto;*/
/*  padding-right: 6px;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  gap: 16px;*/
/*}*/

/*.comment-list::-webkit-scrollbar {*/
/*  width: 6px;*/
/*}*/
/*.comment-list::-webkit-scrollbar-thumb {*/
/*  background: rgba(120,130,255,.28);*/
/*  border-radius: 999px;*/
/*}*/
/*.comment-list:hover::-webkit-scrollbar-thumb {*/
/*  background: rgba(120,130,255,.48);*/
/*}*/


/*.comment-item {*/
/*  max-width: 88%;*/
/*  align-self: flex-start;*/

/*  background: linear-gradient(*/
/*    135deg,*/
/*    rgba(255,255,255,0.98),*/
/*    rgba(248,250,255,0.95)*/
/*  );*/

/*  border-radius: 22px 22px 22px 8px;*/
/*  padding: 14px 18px 16px;*/

  /* 关键：颜色边框锚点 */
/*  box-shadow:*/
/*    inset 0 0 0 1px rgba(120,130,255,0.35),*/
/*    0 12px 36px rgba(120,130,255,0.18);*/

  /* Telegram 弹入 */
/*  animation: tgPopIn 0.28s cubic-bezier(.22,.61,.36,1) both;*/

/*  transition:*/
/*    box-shadow 0.3s ease,*/
/*    filter 0.3s ease;*/
/*}*/


/*@keyframes tgPopIn {*/
/*  from {*/
/*    opacity: 0;*/
/*    transform: scale(0.96);*/
/*  }*/
/*  to {*/
/*    opacity: 1;*/
/*    transform: scale(1);*/
/*  }*/
/*}*/

/*@keyframes softGlow {*/
/*  0%,100% {*/
/*    box-shadow:*/
/*      inset 0 0 0 1px rgba(120,130,255,0.32),*/
/*      0 12px 36px rgba(120,130,255,0.18);*/
/*  }*/
/*  50% {*/
/*    box-shadow:*/
/*      inset 0 0 0 1px rgba(120,130,255,0.45),*/
/*      0 18px 52px rgba(120,130,255,0.28);*/
/*  }*/
/*}*/

/*.comment-item {*/
/*  animation:*/
/*    tgPopIn 0.28s cubic-bezier(.22,.61,.36,1) both,*/
/*    softGlow 6s ease-in-out infinite;*/
/*}*/

/*.comment-item:hover {*/
/*  filter: brightness(1.02);*/
/*  box-shadow:*/
/*    inset 0 0 0 1px rgba(120,130,255,0.6),*/
/*    0 22px 60px rgba(120,130,255,0.35);*/
/*}*/


/*.comment-item .comment-header {*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*  font-size: 13px;*/
/*  margin-bottom: 6px;*/
/*  opacity: .75;*/
/*}*/

/*.comment-item .comment-header strong {*/
/*  font-weight: 600;*/
/*  color: #2b2f55;*/
/*}*/

/*.comment-item .comment-header span {*/
/*  font-size: 12px;*/
/*  white-space: nowrap;*/
/*  color: #7b81b8;*/
/*}*/

/*html[data-theme='dark'] .comment-panel {*/
/*  background: linear-gradient(*/
/*    180deg,*/
/*    rgba(26,30,46,.92),*/
/*    rgba(20,23,38,.88)*/
/*  );*/
/*}*/

/*html[data-theme='dark'] .comment-item {*/
/*  background: linear-gradient(*/
/*    135deg,*/
/*    rgba(38,42,66,.96),*/
/*    rgba(30,34,56,.92)*/
/*  );*/
/*}*/

/*html[data-theme='dark'] .comment-item .comment-header strong {*/
/*  color: #e6e9ff;*/
/*}*/

/*html[data-theme='dark'] .comment-item .comment-header span {*/
/*  color: #aab0ff;*/
/*}*/




/* =========================
   Telegram 评论区（覆盖版）
   直接放到你 CSS 最后面
========================= */

/* 1) 整个模块不要占满屏：收进页面宽度 */
.comment-scope{
  --accent1:#6b74ff;
  --accent2:#ff5c7a;
  --accent3:#34d399;
  --panel-bg: rgba(255,255,255,.55);
  --panel-bg2: rgba(245,247,255,.42);
  --text:#1f2437;
  --muted:#6b7390;

  width: min(1100px, calc(100% - 56px));
  margin: 70px auto;
  padding: 46px 46px 52px;
  border-radius: 32px;
  background: radial-gradient(900px 420px at 12% 10%, rgba(107,116,255,.22), transparent 60%),
              radial-gradient(820px 380px at 88% 20%, rgba(255,92,122,.14), transparent 62%),
              linear-gradient(180deg, rgba(245,247,255,.72), rgba(250,251,255,.86));
  box-shadow: 0 40px 110px rgba(90,110,255,.12);
  overflow: hidden;
}

/* 标题 + 呼吸线（居中） */
.comment-title{
  text-align:center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text);
  margin: 4px 0 34px;
}
.title-line{
  display:block;
  width: 54px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent1), rgba(107,116,255,.35));
  animation: titleBreathe 2.8s ease-in-out infinite;
}
@keyframes titleBreathe{
  0%{opacity:.45; transform:scaleX(.85);}
  50%{opacity:1; transform:scaleX(1.15);}
  100%{opacity:.45; transform:scaleX(.85);}
}

/* 2) 黄金比例：左短右长；两边高度一致 */
.comment-layout{
  display:grid;
  grid-template-columns: 0.382fr 0.618fr; /* 左短右长 */
  gap: 26px;
  align-items: stretch; /* 关键：高度一致 */
}

/* 左侧留言区（稳定，不上下浮动） */
.comment-form-card{
  height: 560px;                 /* 与右侧一致 */
  border-radius: 28px;
  padding: 26px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 22px 70px rgba(90,110,255,.14);
  position: relative;
  overflow: hidden;

  /* 细彩边框（不刺眼） */
  border: 1.5px solid rgba(107,116,255,.20);
}
.comment-form-card::before{
  content:"";
  position:absolute; inset:-2px;
  background: conic-gradient(from 180deg,
      rgba(107,116,255,.55),
      rgba(255,92,122,.40),
      rgba(52,211,153,.40),
      rgba(107,116,255,.55));
  filter: blur(14px);
  opacity: .18;
  pointer-events:none;
}
.comment-form-card input,
.comment-form-card textarea{
  width:100%;
  border-radius: 16px;
  border: 1.5px solid rgba(107,116,255,.30);
  background: rgba(255,255,255,.72);
  padding: 14px 14px;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.comment-form-card input{ margin-bottom: 14px; }
.comment-form-card textarea{
  height: 300px;
  resize: none;
  margin-bottom: 16px;
  line-height: 1.65;
}
.comment-form-card input:focus,
.comment-form-card textarea:focus{
  border-color: rgba(107,116,255,.65);
  box-shadow: 0 0 0 5px rgba(107,116,255,.16);
  background: rgba(255,255,255,.86);
}
.comment-form-card button{
  width: 168px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent2), var(--accent1));
  box-shadow: 0 18px 42px rgba(255,92,122,.18), 0 10px 26px rgba(107,116,255,.16);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.comment-form-card button:hover{
  filter: brightness(1.03);
  box-shadow: 0 22px 56px rgba(255,92,122,.24), 0 12px 30px rgba(107,116,255,.18);
}
.comment-form-card button:active{ transform: scale(.98); }

/* 右侧评论区面板（高度一致 + 更明显） */
.comment-panel{
  height: 560px;                 /* 与左侧一致 */
  border-radius: 28px;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, var(--panel-bg), var(--panel-bg2));
  box-shadow: inset 0 0 0 1px rgba(107,116,255,.14),
              0 26px 86px rgba(90,110,255,.16);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}

/* 评论列表滚动容器 */
.comment-list{
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 10px;
  display:flex;
  flex-direction: column;
  gap: 14px;
}

/* 3) 滚动条更“iOS/Telegram” */
.comment-list::-webkit-scrollbar{ width: 10px; }
.comment-list::-webkit-scrollbar-track{
  background: transparent;
}
.comment-list::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(107,116,255,.22), rgba(255,92,122,.14));
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.comment-list:hover::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(107,116,255,.38), rgba(255,92,122,.24));
  background-clip: padding-box;
}

/* =========================
   4) Telegram 左右气泡（自动交错）
   - 不再“颜色都糊一起”：每条独立底色 + 边框 + 间距
   - 呼吸感：只做光影，不移动
   - 弹入：Telegram pop（不晃不飘）
========================= */

.comment-item{
  position: relative;
  max-width: 86%;
  padding: 12px 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1.5px solid rgba(107,116,255,.22);
  box-shadow: 0 12px 34px rgba(90,110,255,.12);
  color: var(--text);

  /* Telegram 弹入：不晃不飘（只轻微 scale+opacity） */
  animation: tgPop .26s ease-out both, glowBreath 6.2s ease-in-out infinite;
  transition: box-shadow .25s ease, filter .25s ease, border-color .25s ease;
  will-change: transform, opacity;
}

/* 左气泡（默认） */
.comment-item{
  align-self: flex-start;
  border-radius: 18px 18px 18px 6px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.90),
    rgba(246,248,255,.86));
}
/* 左气泡小尾巴 */
.comment-item::after{
  content:"";
  position:absolute;
  left: -6px;
  bottom: 12px;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
  border-left: 1.5px solid rgba(107,116,255,.14);
  border-bottom: 1.5px solid rgba(107,116,255,.14);
  border-radius: 2px;
}

/* 右气泡：nth-child(even) 自动交错 */
.comment-item:nth-child(even){
  align-self: flex-end;
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(135deg,
    rgba(255,92,122,.14),
    rgba(107,116,255,.16),
    rgba(255,255,255,.90));
  border-color: rgba(255,92,122,.22);
}
.comment-item:nth-child(even)::after{
  left: auto;
  right: -6px;
  border-left: 0;
  border-bottom: 0;
  border-right: 1.5px solid rgba(255,92,122,.16);
  border-top: 1.5px solid rgba(255,92,122,.16);
}

/* 颜色边框：轻微彩光，不“糊成一片” */
.comment-item::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(107,116,255,.55),
    rgba(255,92,122,.42),
    rgba(52,211,153,.35));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .45;
  pointer-events:none;
}

/* 呼吸（只动光影，不移动） */
@keyframes glowBreath{
  0%,100% { box-shadow: 0 12px 34px rgba(90,110,255,.12); }
  50%     { box-shadow: 0 18px 48px rgba(90,110,255,.20); }
}

/* Telegram 弹入：不飘不晃 */
@keyframes tgPop{
  from{ opacity: 0; transform: scale(.985); }
  to  { opacity: 1; transform: scale(1); }
}

/* Hover：增强层次（不位移，保证阅读） */
.comment-item:hover{
  filter: brightness(1.02);
  box-shadow: 0 22px 66px rgba(90,110,255,.26);
}

/* 头部：作者 + 时间（别挤在一起） */
.comment-item .comment-header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--muted);
  opacity: .92;
}
.comment-item .comment-header strong{
  font-weight: 800;
  color: var(--text);
}
.comment-item .comment-header span{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}

/* 内容 */
.comment-item .comment-content,
.comment-item > div:last-child{
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  word-break: break-word;
}

/* 分页（底部固定，不挤占列表） */
.comment-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 14px;
  padding: 10px 0 2px;
}
.comment-pagination button{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  color: rgba(30,36,60,.9);
  background: rgba(107,116,255,.14);
  box-shadow: 0 10px 26px rgba(90,110,255,.10);
  transition: filter .2s ease, box-shadow .2s ease, background .2s ease;
}
.comment-pagination button:hover{
  background: rgba(255,92,122,.18);
  box-shadow: 0 16px 44px rgba(255,92,122,.14), 0 10px 30px rgba(107,116,255,.12);
}
.comment-pagination span{
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .5px;
}

/* =========================
   5) 响应式：窄屏上下排列
========================= */
@media (max-width: 980px){
  .comment-scope{
    width: min(960px, calc(100% - 26px));
    padding: 34px 18px 40px;
  }
  .comment-layout{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .comment-form-card,
  .comment-panel{
    height: auto;
    min-height: 420px;
  }
}

/* =========================
   6) 夜间模式（跟你站点 data-theme 适配）
========================= */
html[data-theme='dark'] .comment-scope{
  --panel-bg: rgba(24,28,45,.70);
  --panel-bg2: rgba(20,22,38,.84);
  --text:#e9ecff;
  --muted:#aab2d9;

  background: radial-gradient(900px 420px at 12% 10%, rgba(107,116,255,.20), transparent 60%),
              radial-gradient(820px 380px at 88% 20%, rgba(255,92,122,.12), transparent 62%),
              linear-gradient(180deg, rgba(18,20,34,.72), rgba(16,18,30,.86));
  box-shadow: 0 40px 120px rgba(0,0,0,.35);
}
html[data-theme='dark'] .comment-form-card{
  background: rgba(26,30,48,.68);
  border-color: rgba(107,116,255,.22);
}
html[data-theme='dark'] .comment-form-card input,
html[data-theme='dark'] .comment-form-card textarea{
  background: rgba(18,20,34,.65);
  border-color: rgba(107,116,255,.28);
  color: #e9ecff;
}
html[data-theme='dark'] .comment-panel{
  box-shadow: inset 0 0 0 1px rgba(107,116,255,.18),
              0 26px 90px rgba(0,0,0,.28);
}
html[data-theme='dark'] .comment-item{
  background: linear-gradient(135deg, rgba(32,36,58,.86), rgba(22,24,40,.86));
  border-color: rgba(107,116,255,.22);
}
html[data-theme='dark'] .comment-item:nth-child(even){
  background: linear-gradient(135deg, rgba(255,92,122,.14), rgba(107,116,255,.16), rgba(26,30,48,.86));
  border-color: rgba(255,92,122,.20);
}
html[data-theme='dark'] .comment-pagination button{
  color: rgba(233,236,255,.92);
  background: rgba(107,116,255,.16);
}

/* 左侧气泡（访客） */
.comment-item.is-guest {
  align-self: flex-start;
  border-left: 3px solid #9aa4ff;
}

/* 右侧气泡（作者） */
.comment-item.is-author {
  align-self: flex-end;
  background: linear-gradient(135deg, #ffeef3, #fff5f8);
  border-right: 3px solid #ff7aa2;
}

.comment-item.mine {
  align-self: flex-end;
  background: linear-gradient(135deg, #ffd6e7, #ffe9f2);
}

.comment-item.other {
  align-self: flex-start;
}

.comment-item.is-author {
  border-left: 4px solid #5b6cff;
  background: linear-gradient(
    135deg,
    rgba(91,108,255,0.08),
    rgba(255,255,255,0.95)
  );
}

.reply-quote {
  background: rgba(120,130,255,.08);
  border-left: 3px solid #7b83ff;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  font-size: 13px;
}

.reply-label {
  color: #7b83ff;
  font-weight: 600;
  font-size: 12px;
}

.reply-text {
  margin-top: 4px;
  color: #555;
  line-height: 1.5;
}

.comment-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.comment-actions button {
  border: none;
  background: rgba(120,130,255,.12);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
}

.comment-actions button:hover {
  background: rgba(120,130,255,.25);
}

/* ===============================
   Telegram 风 @ 回复引用气泡
   =============================== */

.comment-reply {
  position: relative;
  margin: 8px 0 10px;
  padding: 10px 14px 10px 16px;

  background: linear-gradient(
    135deg,
    rgba(240, 243, 255, 0.9),
    rgba(250, 251, 255, 0.95)
  );

  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;

  display: flex;
  flex-direction: column;
  gap: 4px;

  /* Telegram 左侧引用条 */
  box-shadow:
    inset 4px 0 0 rgba(120, 130, 255, 0.55);

  opacity: 0.9;
}

/* 回复对象（@某人） */
.comment-reply .reply-author {
  font-weight: 600;
  font-size: 12px;
  color: rgb(99, 102, 241);
  white-space: nowrap;
}

/* 被引用的原文 */
.comment-reply .reply-content {
  font-size: 13px;
  color: #4b516e;
  line-height: 1.55;

  /* 原文最多显示 3 行，像 Telegram */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===============================
   回复气泡 Hover（极轻，不抢主内容）
   =============================== */

.comment-item:hover .comment-reply {
  opacity: 1;
  box-shadow:
    inset 4px 0 0 rgba(120, 130, 255, 0.85),
    0 6px 20px rgba(120, 130, 255, 0.18);
}

/* ===============================
   夜间模式适配
   =============================== */

html[data-theme='dark'] .comment-reply {
  background: linear-gradient(
    135deg,
    rgba(36, 40, 68, 0.9),
    rgba(30, 34, 58, 0.95)
  );

  box-shadow:
    inset 4px 0 0 rgba(165, 180, 252, 0.6);
}

html[data-theme='dark'] .comment-reply .reply-author {
  color: rgb(165, 180, 252);
}

html[data-theme='dark'] .comment-reply .reply-content {
  color: rgba(230, 233, 255, 0.85);
}

/*以上功能成熟，保留，以下为优化*/

.reply-quote {
  margin: 8px 0 10px;
  padding: 8px 12px;
  border-left: 3px solid #6b7cff;
  background: rgba(120,130,255,.08);
  border-radius: 10px;
  font-size: 13px;
}

.reply-label {
  font-weight: 600;
  color: #5a66ff;
  display: block;
  margin-bottom: 4px;
}

.reply-text {
  color: #555;
  line-height: 1.5;
}


/*滚动条*/
/* =========================
   Telegram / iOS 风滚动条
========================= */

/* Firefox */
.comment-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(140,150,255,.35) transparent;
}

/* WebKit (Chrome / Safari / Edge) */
.comment-list::-webkit-scrollbar {
  width: 8px;
}

.comment-list::-webkit-scrollbar-track {
  background: transparent;
}

.comment-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(160,170,255,.25),
    rgba(120,130,255,.35)
  );
  border: 2px solid transparent;
  background-clip: content-box;
  opacity: 0;
  transition: opacity .25s ease, background .25s ease;
}

/* hover 评论区时才显示 */
.comment-panel:hover .comment-list::-webkit-scrollbar-thumb {
  opacity: 1;
}

/* hover 滚动条本体 */
.comment-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(160,170,255,.55),
    rgba(120,130,255,.75)
  );
}

/* =========================
   夜间模式适配
========================= */

html[data-theme='dark'] .comment-list::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(150,160,255,.25),
    rgba(120,130,255,.4)
  );
}

html[data-theme='dark'] .comment-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(150,160,255,.45),
    rgba(120,130,255,.65)
  );
}

/* =========================
   Telegram 风滚动条（淡入 / 淡出）
========================= */

/* 基础：隐藏 */
.comment-list::-webkit-scrollbar {
  width: 6px;
}

.comment-list::-webkit-scrollbar-track {
  background: transparent;
}

.comment-list::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 255, 0.35);
  border-radius: 999px;

  opacity: 0;
  transition: opacity 0.4s ease, background 0.3s ease;
}

/* 悬停评论区 or 正在滚动时显示 */
.comment-panel:hover .comment-list::-webkit-scrollbar-thumb,
.comment-list:active::-webkit-scrollbar-thumb {
  opacity: 1;
}

/* 滚动时更明显 */
.comment-list::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 130, 255, 0.55);
}

/* Firefox 兼容（降级但不丑） */
.comment-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(120,130,255,0.35) transparent;
}


html[data-theme='dark'] .comment-list::-webkit-scrollbar-thumb {
  background: rgba(150, 160, 255, 0.35);
}

html[data-theme='dark'] .comment-list::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 160, 255, 0.6);
}

/* =========================
   Telegram / macOS 风滚动条
   滚动时显示，停止后淡出
========================= */

/* 基础 */
.comment-list {
  scrollbar-width: thin;                /* Firefox */
  scrollbar-color: rgba(120,130,255,0) transparent;
}

/* WebKit */
.comment-list::-webkit-scrollbar {
  width: 6px;
}

.comment-list::-webkit-scrollbar-track {
  background: transparent;
}

/* 默认：几乎不可见 */
.comment-list::-webkit-scrollbar-thumb {
  background: rgba(120,130,255,0);
  border-radius: 999px;
  transition: background 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}

/* Hover 或滚动中显示 */
.comment-list:hover::-webkit-scrollbar-thumb,
.comment-list.scrolling::-webkit-scrollbar-thumb {
  background: rgba(120,130,255,0.35);
  opacity: 1;
}

/* 夜间模式 */
html[data-theme='dark'] .comment-list:hover::-webkit-scrollbar-thumb,
html[data-theme='dark'] .comment-list.scrolling::-webkit-scrollbar-thumb {
  background: rgba(170,180,255,0.35);
}

/* =========================
   Mobile Responsive
========================= */
@media (max-width: 768px) {

  .comment-scope {
    padding: 32px 16px;
    border-radius: 20px;
  }

  .comment-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* 评论区优先 */
  .comment-panel {
    order: 1;
    height: auto;
    max-height: 65vh;
    padding: 18px 14px;
  }

  .comment-list {
    padding-right: 4px;
  }

  /* 输入区放下面 */
  .comment-form-card {
    order: 2;
    padding: 20px 18px;
  }

  /* 气泡更贴近 Telegram */
  .comment-item {
    max-width: 92%;
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 18px;
  }

  .comment-item.mine {
    align-self: flex-end;
    border-radius: 18px 18px 6px 18px;
  }

  .comment-item.other {
    align-self: flex-start;
    border-radius: 18px 18px 18px 6px;
  }

  .comment-header {
    font-size: 12px;
  }

  .comment-content {
    font-size: 14px;
    line-height: 1.6;
  }

  /* 分页按钮更轻 */
  .comment-pagination button {
    width: 32px;
    height: 32px;
  }
}