/* ============================================================
   AIDDPM Lab — Main Stylesheet
   AI for Drug Discovery & Precision Medicine
   Zhejiang University · aiddpm.com
   ============================================================
   目录 TABLE OF CONTENTS
   01. Google Fonts 字体引入
   02. CSS 变量 (颜色/字体/阴影/圆角)
   03. 全局重置 & Body 基础样式
   04. 导航栏 Navigation
   05. 页面容器 Page Wrapper
   06. Hero 轮播区 (早期定义)
   07. Hero 主区域
   08. 按钮 Buttons
   09. 通用 Section / 标题
   10. 研究方向卡片 Research Cards
   11. 新闻列表 News
   12. 校园照片横排 Campus Strip
   13. 内页顶部 Banner (pg-header)
   14. 成员页 Members
   15. 论文页 Publications
   16. 博客列表 Blog Grid
   17. 博客文章页 Blog Post
   18. 工具页 Tools
   19. 教学页 Teaching
   20. 加入我们 Join Us
   21. 访客统计条 Visitor Bar
   22. 底部 Footer
   23. 动画 & 响应式 Animations / Media Queries
   24. Hero 轮播 (完整版，覆盖早期定义)
   25. 访客地图区 Visitor Map Section (已弃用，移入 Footer)
   ============================================================ */


/* ============================================================
   01. GOOGLE FONTS 字体引入
   - Inter: 全站正文/标题主字体
   - Source Serif 4: 博客文章/大标题衬线字体
   - JetBrains Mono: 代码/标签/徽章等等宽字体
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap');


/* ============================================================
   02. CSS 变量 (Design Tokens)
   修改这里可以全站换色/换字体/换圆角
   ============================================================ */
:root {
  /* 背景色 Background */
  --bg:#f0f2f8;           /* 页面主背景：淡薰衣草灰 */
  --bg-card:#ffffff;      /* 卡片背景：纯白 */
  --bg-alt:#e8ebf4;       /* 次级区块背景：略深灰蓝 */

  /* 品牌色 Brand Colors */
  --navy:#0f1f40;         /* 深海军蓝，用于标题/深色区块 */
  --navy-2:#1a3362;       /* 稍浅海军蓝，用于作者名等 */
  --indigo:#4f46e5;       /* 主色调：靛蓝，用于链接/标签/按钮 */
  --indigo-2:#6366f1;     /* 稍亮靛蓝 */
  --violet:#7c3aed;       /* 紫罗兰，渐变终点色 */

  /* 渐变 Gradients */
  --grad:linear-gradient(135deg,#4f46e5,#7c3aed);                               /* 主渐变：靛蓝→紫 */
  --grad-soft:linear-gradient(135deg,rgba(79,70,229,0.08),rgba(124,58,237,0.08)); /* 浅色渐变背景 */

  /* 文字色 Text */
  --text:#1e2a3a;         /* 主文字：近黑深蓝 */
  --text-2:#374151;       /* 次文字：深灰 */
  --text-3:#6b7280;       /* 辅助文字：中灰 */
  --text-4:#9ca3af;       /* 弱文字：浅灰（小字说明） */

  /* 边框 Borders */
  --border:#e2e5f0;       /* 主边框 */
  --border-2:#d1d5e8;     /* 稍深边框 */

  /* 阴影 Shadows（从小到大） */
  --sh-xs:0 1px 3px rgba(79,70,229,0.06),0 1px 2px rgba(0,0,0,0.04);
  --sh-sm:0 2px 12px rgba(79,70,229,0.08);
  --sh:0 4px 24px rgba(79,70,229,0.10);
  --sh-lg:0 12px 40px rgba(79,70,229,0.14);

  /* 圆角 Border Radius */
  --radius:10px;          /* 按钮/输入框 */
  --radius-lg:16px;       /* 卡片 */
  --radius-xl:24px;       /* 大卡片/弹窗 */

  /* 导航高度 */
  --nav-h:66px;

  /* 过渡时间 */
  --t:0.2s ease;

  /* 字体 Fonts */
  --F-display:'Source Serif 4',Georgia,serif;   /* 衬线展示字体 */
  --F-body:'Inter',system-ui,sans-serif;         /* 正文字体 */
  --F-mono:'JetBrains Mono',monospace;           /* 等宽字体 */
}


/* ============================================================
   03. 全局重置 & Body 基础样式
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body {
  font-family:var(--F-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-size:17px;         /* 全站基础字号（比默认16px略大） */
  letter-spacing:-0.01em; /* 轻微字间距收紧 */
}
a { color:var(--indigo); text-decoration:none; transition:color var(--t) }
a:hover { color:var(--violet) }
img { max-width:100%; display:block }


/* ============================================================
   04. 导航栏 Navigation
   固定在顶部，毛玻璃效果
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center;
  padding:0 max(28px,5vw);
  background:rgba(240,242,248,0.93); /* 半透明背景 */
  backdrop-filter:blur(16px);         /* 毛玻璃 */
  border-bottom:1px solid var(--border);
  box-shadow:var(--sh-xs);
}

/* 品牌 Logo 区域 */
.nav-brand { display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none }
.nav-logo-img { width:34px; height:34px; flex-shrink:0 }
.nav-brand-text { line-height:1.2 }
.nav-brand-main { font-family:var(--F-body); font-size:15px; font-weight:700; color:var(--navy); letter-spacing:-0.02em }  /* "AIDDPM Lab" */
.nav-brand-sub  { font-family:var(--F-body); font-size:9px; color:var(--indigo); letter-spacing:1px; text-transform:uppercase; font-weight:600; opacity:0.85 }  /* "Zhejiang University" */

/* 导航链接 */
.nav-links { display:flex; align-items:center; gap:2px; list-style:none }
.nav-links a {
  padding:7px 15px; font-size:16px; font-weight:500;
  color:var(--text-3); border-radius:8px; transition:all var(--t);
}
.nav-links a:hover  { color:var(--navy); background:rgba(79,70,229,0.07) }
.nav-links a.active { color:var(--indigo); font-weight:600; background:rgba(79,70,229,0.08) } /* 当前页高亮 */

/* 汉堡菜单按钮（移动端） */
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--navy); border-radius:2px }

/* 移动端导航展开 */
@media(max-width:860px) {
  .nav-links {
    display:none; position:fixed; top:var(--nav-h); left:0; right:0;
    background:rgba(240,242,248,0.97); flex-direction:column; align-items:stretch;
    padding:16px 24px 24px; border-bottom:1px solid var(--border); box-shadow:var(--sh);
  }
  .nav-links.open { display:flex }       /* JS 切换此 class 来展开 */
  .nav-links a { padding:10px 14px }
  .nav-toggle { display:flex }
}


/* ============================================================
   05. 页面容器 Page Wrapper
   所有页面内容的外层，保留导航栏高度的顶部间距
   ============================================================ */
.page { padding-top:var(--nav-h); min-height:100vh }


/* ============================================================
   06. Hero 轮播 — 早期定义（完整版见第24节）
   注：此处定义会被文件末尾的第24节覆盖，以末尾为准
   ============================================================ */
.hero-slides { position:absolute; inset:0; overflow:hidden }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center 40%;
  opacity:0;
  transition:opacity 1.2s ease-in-out;  /* 淡入淡出过渡 1.2秒 */
  filter:saturate(1.05) brightness(1.0); /* 略微提升饱和度 */
}
.hero-slide.active { opacity:0.90 }      /* 当前激活的幻灯片透明度 ← 调这里控制亮度 */

/* 底部小圆点 */
.hero-dots {
  position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:10;
}
.hero-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.35);
  border:none; cursor:pointer; padding:0;
  transition:all 0.3s ease;
}
.hero-dot.active  { background:#fff; transform:scale(1.3) }  /* 当前激活的圆点 */
.hero-dot:hover   { background:rgba(255,255,255,0.7) }


/* ============================================================
   07. Hero 主区域
   首页大标题区，背景为幻灯片叠加渐变
   ============================================================ */
.hero {
  position:relative; overflow:hidden;
  min-height:88vh;                        /* 最小占屏幕88%高 */
  display:flex; align-items:center;
  background:var(--navy);                 /* 图片加载前的底色 */
}
.hero-canvas { position:absolute; inset:0; overflow:hidden } /* 所有背景层的容器 */

/* 渐变遮罩层 — 叠在图片上，让文字更易读
   调整 rgba 最后一位数字（0~1）可控制遮罩深浅 ↓ */
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    160deg,
    rgba(10,20,50,0.42) 0%,   /* 左上角：深蓝，0.42=42%不透明 */
    rgba(30,40,90,0.30) 55%,  /* 中间：稍浅 */
    rgba(60,40,120,0.15) 100% /* 右下角：淡紫，最浅 */
  );
}

/* 网格纹理（微弱）*/
.hero-grid {
  position:absolute; inset:0; opacity:0.04;
  background-image:
    linear-gradient(rgba(255,255,255,1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,1) 1px,transparent 1px);
  background-size:60px 60px;
}

/* 光晕装饰球 */
.hero-orb1 { position:absolute; width:480px; height:480px; border-radius:50%; top:-80px; right:12%; background:radial-gradient(circle,rgba(99,102,241,0.18) 0%,transparent 70%); pointer-events:none }
.hero-orb2 { position:absolute; width:320px; height:320px; border-radius:50%; bottom:-60px; left:8%;  background:radial-gradient(circle,rgba(124,58,237,0.12) 0%,transparent 70%); pointer-events:none }

/* Hero 内容主布局：左侧文字 + 右侧 Logo */
.hero-inner {
  position:relative; z-index:2;
  padding:80px max(32px,8vw) 120px;
  display:grid; grid-template-columns:1fr auto;
  gap:60px; align-items:center; width:100%;
}
.hero-left { max-width:680px }

/* 顶部标签胶囊："College of Pharmaceutical Sciences · ZJU · Hangzhou" */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--F-body); font-size:11px; font-weight:600;
  color:rgba(165,180,252,0.9); letter-spacing:2px; text-transform:uppercase;
  background:rgba(99,102,241,0.12); border:1px solid rgba(99,102,241,0.25);
  padding:5px 14px; border-radius:100px; margin-bottom:28px;
}
.hero-eyebrow::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:rgba(165,180,252,0.9);
  animation:pulse 2s ease infinite; /* 呼吸动画小圆点 */
  flex-shrink:0;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }

/* 大标题 */
.hero h1 {
  font-family:var(--F-body);
  font-size:clamp(2.6rem,5vw,4rem); /* 响应式字号：最小2.6rem，最大4rem */
  font-weight:800; line-height:1.08;
  color:#fff; letter-spacing:-0.04em; margin-bottom:22px;
}
.hero h1 .accent {
  /* "AI-Driven" 渐变文字 */
  background:linear-gradient(90deg,#a5b4fc,#c4b5fd);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* 副标题描述 */
.hero-desc { font-size:1.12rem; color:rgba(255,255,255,0.62); max-width:540px; line-height:1.82; margin-bottom:34px; font-weight:300 }

/* 关键词胶囊标签（AI Drug Design / Cancer Multi-Omics 等） */
.hero-pills { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:32px }
.hero-pill  { font-size:11px; font-family:var(--F-body); font-weight:500; padding:4px 12px; border-radius:100px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.6) }

/* CTA 按钮行 */
.hero-actions { display:flex; flex-wrap:wrap; gap:12px }

/* 右侧浮动 Logo */
.hero-logo-wrap     { display:flex; flex-direction:column; align-items:center; gap:14px }
.hero-logo-img      { width:clamp(100px,12vw,150px); opacity:.88; animation:float 4.5s ease-in-out infinite; filter:drop-shadow(0 0 28px rgba(99,102,241,0.4)) }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }  /* 上下浮动 */
.hero-logo-wordmark { font-family:var(--F-mono); font-size:10px; color:rgba(255,255,255,0.28); letter-spacing:3px; text-transform:uppercase; text-align:center }

/* 统计数字条（已从首页移除，保留样式备用） */
.hero-stats   { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:center; z-index:2; border-top:1px solid rgba(255,255,255,0.08); background:rgba(15,31,64,0.65); backdrop-filter:blur(10px) }
.hero-stat    { flex:1; max-width:200px; text-align:center; padding:18px 20px; border-right:1px solid rgba(255,255,255,0.07) }
.hero-stat:last-child { border-right:none }
.hero-stat-n  { font-family:var(--F-body); font-size:2.1rem; font-weight:800; color:#c4b5fd; line-height:1; display:block; margin-bottom:3px; letter-spacing:-0.03em }
.hero-stat-l  { font-size:9.5px; color:rgba(255,255,255,0.38); letter-spacing:1.5px; text-transform:uppercase }


/* ============================================================
   08. 按钮 Buttons
   统一的按钮系统，四种变体
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px; border-radius:var(--radius);
  font-size:13.5px; font-weight:500; letter-spacing:0.1px;
  transition:all var(--t); cursor:pointer; border:none;
  text-decoration:none; font-family:var(--F-body);
}
.btn-primary { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; box-shadow:0 2px 8px rgba(99,102,241,0.25); font-weight:500 }  /* 主要按钮：紫色渐变 */
.btn-primary:hover { filter:brightness(1.05); color:#fff; transform:translateY(-1px); box-shadow:0 4px 16px rgba(99,102,241,0.35) }

.btn-ghost { background:rgba(255,255,255,0.1); color:#fff; border:1.5px solid rgba(255,255,255,0.3) }  /* 幽灵按钮：用于深色背景 */
.btn-ghost:hover { background:rgba(255,255,255,0.15); color:#fff }

.btn-outline { background:transparent; color:var(--indigo); border:1.5px solid var(--indigo) }  /* 描边按钮 */
.btn-outline:hover { background:rgba(79,70,229,0.07); transform:translateY(-1px) }

.btn-soft { background:rgba(99,102,241,0.06); color:#5b5fcf; border:1.5px solid rgba(99,102,241,0.2); font-weight:500 }  /* 柔和按钮：浅色次要操作 */
.btn-soft:hover { background:rgba(99,102,241,0.12); border-color:rgba(99,102,241,0.35) }


/* ============================================================
   09. 通用 Section 布局 & 标题系统
   ============================================================ */
.section         { padding:76px max(24px,6vw) }   /* 所有内容区通用内边距 */
.section-alt     { background:var(--bg-alt) }       /* 浅灰背景区块（交替背景） */
.section-dark    { background:var(--navy); color:#fff } /* 深色背景区块 */
.section-header  { margin-bottom:48px }

/* 小标签（如 "RESEARCH DIRECTIONS"） */
.eyebrow { font-family:var(--F-body); font-size:10.5px; color:var(--indigo); letter-spacing:2px; text-transform:uppercase; display:block; margin-bottom:10px; font-weight:600 }
.section-dark .eyebrow { color:rgba(165,180,252,0.8) }  /* 深色区块中的标签颜色 */

/* 区块标题 */
.s-title { font-family:var(--F-body); font-size:clamp(1.75rem,3.2vw,2.5rem); font-weight:700; line-height:1.15; color:var(--navy); margin-bottom:12px; letter-spacing:-0.03em }
.section-dark .s-title { color:#fff }

/* 区块副标题/描述 */
.s-sub { font-size:1.02rem; color:var(--text-3); max-width:none; width:100%; line-height:1.78 }
.section-dark .s-sub { color:rgba(255,255,255,0.48) }


/* ============================================================
   10. 研究方向卡片 Research Cards
   首页 "What We Work On" 4-5张卡片
   ============================================================ */
.research-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px }
.r-card {
  background:var(--bg-card); border-radius:var(--radius-lg); padding:28px 24px;
  border:1px solid var(--border); box-shadow:var(--sh-xs);
  transition:all var(--t); position:relative; overflow:hidden;
}
.r-card-accent { /* 悬停时顶部出现的渐变线条 */
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease;
}
.r-card:hover { transform:translateY(-3px); box-shadow:var(--sh-lg) }
.r-card:hover .r-card-accent { transform:scaleX(1) }   /* 悬停时展开顶部线条 */
.r-icon  { width:46px; height:46px; border-radius:12px; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px }
.r-card h3 { font-size:1rem; font-weight:600; color:var(--navy); margin-bottom:8px; line-height:1.35 }
.r-card p  { font-size:.97rem; color:var(--text-3); line-height:1.72 }


/* ============================================================
   11. 新闻列表 News & Highlights
   ============================================================ */
.news-list { list-style:none }
.news-item {
  display:grid; grid-template-columns:88px 1fr; /* 左：日期列；右：内容列 */
  gap:18px; padding:16px 0; border-bottom:1px solid var(--border); align-items:baseline;
}
.news-item:last-child { border-bottom:none }
.news-date { font-family:var(--F-mono); font-size:10.5px; color:var(--indigo); letter-spacing:0.3px } /* 如 "2026.01" */
.news-text { font-size:1rem; color:var(--text-2); line-height:1.65 }

/* 新闻类型徽章 */
.nbadge      { display:inline-block; font-size:9px; font-weight:700; font-family:var(--F-body); padding:2px 7px; border-radius:4px; text-transform:uppercase; letter-spacing:0.5px; margin-right:6px }
.nb-pub      { background:rgba(79,70,229,0.1); color:var(--indigo) }   /* 论文发表 */
.nb-award    { background:rgba(245,158,11,0.1); color:#b45309 }        /* 荣誉/奖项 */
.nb-news     { background:rgba(15,31,64,0.07); color:var(--text-3) }   /* 一般动态 */


/* ============================================================
   12. 校园照片横排 Campus Strip
   首页新闻区底部三张浙大校园照片
   ============================================================ */
.campus-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:44px }
.campus-img   { border-radius:var(--radius-lg); overflow:hidden; height:175px }
.campus-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease }
.campus-img:hover img { transform:scale(1.04) }  /* 悬停轻微放大 */


/* ============================================================
   13. 内页顶部 Banner — pg-header
   Members / Publications / Teaching / Tools / Join Us 等页面顶部
   ============================================================ */
.pg-header {
  /* 渐变背景：蓝紫色，修改三个颜色值可改变整体色调 */
  background:transparent;  /* linear-gradient(135deg,#2d3a6e 0%,#3d2d7a 60%,#1e3a5f 100%);*/
  padding:60px max(24px,8vw) 52px; color:#fff;
  position:relative; overflow:hidden;
}
.pg-header::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../images/header/westlake_new.jpg') center/cover no-repeat;
  opacity: 1;              /* 原来可能有 opacity < 1 */
  filter: none;            /* 去掉 saturate() 等滤镜 */
}

/* .pg-header::before {
  /* 背景图片叠加层
     修改 url('../images/...') 可换背景照片
     修改 opacity 可控制照片清晰度（当前1.0=完全显示，用渐变遮色）
     修改 filter:saturate() 可控制照片色彩饱和度 */
  content:''; position:absolute; inset:0;
  background:url('../images/header/westlake_new.jpg') center/cover no-repeat;
  opacity:1.0;
  filter:saturate(0.5);
} */


/* .pg-header::after {
  /* 底部高光细线 */
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(165,180,252,0.5),transparent);
}
 */


.pg-header::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.45) 0%,   /* 左侧文字区稍暗 */
    rgba(0,0,0,0.0) 60%    /* 右侧完全透明 */
  );
}

.pg-header .eyebrow { color:rgba(139,92,246,0.95); position:relative; z-index:1 }  /* 如 "RESEARCH OUTPUT" */
.pg-header h1 { font-family:var(--F-body); font-size:clamp(2.2rem,4.5vw,3.2rem); 
                font-weight:700; line-height:1.12; margin-bottom:14px; 
                position:relative; z-index:1; letter-spacing:-0.03em }
.pg-header p  { color:rgba(255,255,255,0.75); max-width:none; 
                font-weight:700;
                line-height:1.78; font-size:1.05rem; position:relative; z-index:1 } 

/* ============================================================
   14. 成员页 Members
   PI 大卡片 + 成员网格
   ============================================================ */
/* PI 卡片（横向布局：照片 + 信息） */
.pi-block   { display:flex; gap:40px; align-items:flex-start; background:var(--bg-card); border-radius:var(--radius-xl); padding:36px; box-shadow:var(--sh); border:1px solid var(--border); margin-bottom:48px }
.pi-photo   { width:140px; height:175px; flex-shrink:0; border-radius:12px; overflow:hidden; box-shadow:var(--sh) }
.pi-photo img { width:100%; height:100%; object-fit:cover }
.pi-info h2   { font-family:var(--F-body); font-size:1.55rem; font-weight:700; color:var(--navy); margin-bottom:3px; letter-spacing:-0.03em }
.pi-role      { font-size:.98rem; color:var(--indigo); font-weight:500; margin-bottom:14px; line-height:1.6 }
.pi-bio       { font-size:1.02rem; color:var(--text-3); line-height:1.82; max-width:none; margin-bottom:18px }
.pi-links     { display:flex; flex-wrap:wrap; gap:8px }
.pilink       { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; padding:5px 12px; border-radius:8px; border:1.5px solid var(--border-2); color:var(--text-3); transition:all var(--t) }
.pilink:hover { border-color:var(--indigo); color:var(--indigo); background:rgba(79,70,229,0.05) }

/* 成员分类标题（PhD Students / Master's Students 等） */
.msec      { margin-bottom:44px }
.msec-head { font-family:var(--F-mono); font-size:10px; color:var(--indigo); letter-spacing:2.5px; text-transform:uppercase; margin-bottom:18px; padding-bottom:10px; border-bottom:1.5px solid var(--border) }

/* 成员卡片网格：宽屏4列，响应式收窄 */
.members-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
@media(max-width:1100px) { .members-grid { grid-template-columns:repeat(3,1fr) } }
@media(max-width:720px)  { .members-grid { grid-template-columns:repeat(2,1fr) } }
@media(max-width:420px)  { .members-grid { grid-template-columns:1fr } }

/* 单个成员卡片 */
.m-card   { background:var(--bg-card); border-radius:var(--radius-lg); padding:22px 16px; text-align:center; border:1px solid var(--border); box-shadow:var(--sh-xs); transition:all var(--t) }
.m-card:hover { transform:translateY(-3px); box-shadow:var(--sh) }
.m-avatar { width:78px; height:78px; border-radius:50%; overflow:hidden; margin:0 auto 13px; border:3px solid var(--bg-alt) }
.m-avatar img { width:100%; height:100%; object-fit:cover }
.m-av-ph  { /* 无照片时的占位头像 */ width:100%; height:100%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-family:var(--F-display); font-size:24px; color:rgba(255,255,255,0.8); font-weight:400; font-style:italic }
.m-name   { font-weight:600; font-size:.92rem; color:var(--navy); margin-bottom:3px }
.m-role   { font-size:.7rem; color:var(--indigo); font-weight:600; text-transform:uppercase; letter-spacing:.8px; margin-bottom:7px }
.m-info   { font-size:.87rem; color:var(--text-4); line-height:1.6 }
.m-links  { display:flex; justify-content:center; gap:7px; margin-top:10px }
.m-link   { font-size:11px; font-weight:500; color:var(--text-3); padding:2px 8px; border-radius:5px; border:1px solid var(--border); transition:all var(--t) }
.m-link:hover { color:var(--indigo); border-color:var(--indigo) }


/* ============================================================
   15. 论文页 Publications
   搜索栏 + 筛选标签 + 按年份分组的论文列表
   ============================================================ */
/* 工具栏：搜索框 + 筛选按钮 */
.pub-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:30px }
.pub-search  {
  flex:1; min-width:200px; max-width:300px;
  padding:9px 14px 9px 36px;              /* 左侧留搜索图标位置 */
  border:1.5px solid var(--border); border-radius:var(--radius);
  font-size:13px; color:var(--text);
  background:var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 11px center;
  transition:border-color var(--t); outline:none;
}
.pub-search:focus { border-color:var(--indigo) }
.pub-filters { display:flex; flex-wrap:wrap; gap:6px }
.pf-btn       { padding:6px 14px; border-radius:100px; font-size:12px; font-weight:500; cursor:pointer; border:1.5px solid var(--border-2); background:var(--bg-card); color:var(--text-3); transition:all var(--t) }
.pf-btn.active,.pf-btn:hover { background:var(--navy); border-color:var(--navy); color:#fff }

/* 年份分组 */
.pub-year-section { margin-bottom:48px }
.pub-year-head    { font-family:var(--F-body); font-size:1.3rem; font-weight:700; color:var(--navy); letter-spacing:-0.02em; padding-bottom:10px; border-bottom:2px solid var(--border); margin-bottom:18px }

/* 单篇论文卡片 */
.pub-card { display:grid; grid-template-columns:1fr 120px; gap:20px; padding:20px 0; border-bottom:1px solid var(--border); align-items:start }
.pub-card:last-child { border-bottom:none }
.pub-body       { flex:1 }
.pub-title      { font-size:1.04rem; font-weight:600; color:var(--navy); line-height:1.45; margin-bottom:6px }
.pub-title a    { color:inherit }
.pub-title a:hover { color:var(--indigo) }
.pub-authors    { font-size:.93rem; color:var(--text-4); margin-bottom:4px; line-height:1.6 }
.pub-authors strong { color:var(--navy-2); font-weight:600 }  /* PI 名字加粗 */
.pub-venue      { font-size:.93rem; color:var(--text-3); font-style:italic; margin-bottom:9px }
.pub-venue .pub-yr { font-style:normal; font-weight:700; color:var(--indigo) }  /* 年份高亮 */
.pub-links      { display:flex; flex-wrap:wrap; gap:6px }
.plink          { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:5px; letter-spacing:0.2px; text-transform:uppercase; transition:all var(--t) }
.pl-doi  { background:rgba(79,70,229,0.08);  color:var(--indigo) }  /* DOI 链接 */
.pl-pdf  { background:rgba(220,38,38,0.07);  color:#dc2626 }        /* PDF */
.pl-code { background:rgba(15,31,64,0.06);   color:var(--text-2) }  /* Code/GitHub */
.pl-web  { background:rgba(245,158,11,0.1);  color:#b45309 }        /* 网页/Demo */
.plink:hover { filter:brightness(1.1); transform:translateY(-1px) }
.pub-badge  { /* 期刊标签（如 "NMI"） */ display:inline-block; font-size:9px; font-weight:700; padding:2px 7px; border-radius:4px; background:var(--grad); color:#fff; vertical-align:middle; margin-left:7px; text-transform:uppercase; letter-spacing:0.5px }
.pub-thumb  { border-radius:10px; overflow:hidden; border:1px solid var(--border); align-self:flex-start; flex-shrink:0 }   /* Graphical Abstract 缩略图 */
.pub-thumb img { width:120px; height:80px; object-fit:cover; display:block }
@media(max-width:600px) { .pub-card { grid-template-columns:1fr } .pub-thumb { display:none } }


/* ============================================================
   16. 博客列表 Blog Grid
   ============================================================ */
.blog-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px }
.b-card     { background:var(--bg-card); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--sh-sm); border:1px solid var(--border); transition:all var(--t); display:flex; flex-direction:column }
.b-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg) }
.b-cover    { height:170px; position:relative; overflow:hidden; background:var(--grad) }  /* 封面图，无图时显示渐变 */
.b-cover img { width:100%; height:100%; object-fit:cover }
.b-cover-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:44px; opacity:.4 }  /* emoji 占位 */
.b-cat      { position:absolute; top:12px; left:12px; font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 9px; border-radius:5px; background:rgba(79,70,229,0.85); color:#fff }  /* 分类标签 */
.b-body     { padding:20px; flex:1; display:flex; flex-direction:column }
.b-meta     { display:flex; gap:12px; margin-bottom:8px }
.b-date,.b-author { font-size:10.5px; color:var(--text-4); font-family:var(--F-mono) }
.b-title    { font-size:1.08rem; font-weight:600; color:var(--navy); line-height:1.38; margin-bottom:8px }
.b-excerpt  { font-size:.95rem; color:var(--text-3); line-height:1.72; flex:1 }
.b-footer   { margin-top:14px; display:flex; justify-content:space-between; align-items:center }
.b-more     { font-size:11px; font-weight:700; color:var(--indigo); letter-spacing:.3px; text-transform:uppercase }
.b-tags     { display:flex; gap:5px; flex-wrap:wrap }
.b-tag      { font-size:10px; padding:2px 7px; border-radius:4px; background:rgba(79,70,229,0.07); color:var(--indigo) }


/* ============================================================
   17. 博客文章页 Blog Post
   ============================================================ */
.bp-header    { background:linear-gradient(160deg,var(--navy),#1e1b4b); color:#fff; padding:68px max(24px,8vw) 48px; position:relative; overflow:hidden }
.bp-header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(165,180,252,0.35),transparent) }
.bp-back      { color:#a5b4fc; font-size:12px; font-weight:600; margin-bottom:20px; display:inline-flex; align-items:center; gap:5px }
.bp-header h1 { font-family:var(--F-display); font-size:clamp(1.7rem,3.5vw,2.6rem); font-weight:400; line-height:1.18; margin-bottom:16px; max-width:800px }
.bp-meta      { display:flex; flex-wrap:wrap; gap:16px }
.bp-meta span { font-size:12px; color:rgba(255,255,255,0.45); font-family:var(--F-mono) }

/* 文章正文区（居中，最大宽740px） */
.bp-content             { max-width:740px; margin:0 auto; padding:52px max(24px,6vw); font-size:1.02rem; line-height:1.88; color:var(--text-2) }
.bp-content h2          { font-family:var(--F-display); font-size:1.4rem; font-weight:400; color:var(--navy); margin:40px 0 14px; padding-top:4px; border-top:1.5px solid var(--border) }
.bp-content h3          { font-size:1.05rem; font-weight:600; color:var(--navy); margin:26px 0 10px }
.bp-content p           { margin-bottom:18px }
.bp-content code        { font-family:var(--F-mono); font-size:.87em; background:rgba(79,70,229,0.07); padding:2px 6px; border-radius:4px; color:var(--indigo) }
.bp-content pre         { background:var(--navy); color:#c7d2fe; padding:22px; border-radius:12px; font-family:var(--F-mono); font-size:.84rem; line-height:1.7; overflow-x:auto; margin:22px 0 }
.bp-content pre code    { background:none; padding:0; color:inherit }
.bp-content blockquote  { border-left:3px solid var(--indigo); padding:10px 20px; margin:22px 0; color:var(--text-3); font-style:italic; background:rgba(79,70,229,0.05); border-radius:0 8px 8px 0 }
.bp-content ul,.bp-content ol { margin:14px 0 14px 24px }
.bp-content li          { margin-bottom:6px }
.bp-author-box          { margin-top:48px; padding:24px; background:var(--bg-alt); border-radius:12px; display:flex; gap:16px; align-items:flex-start; border:1px solid var(--border) }


/* ============================================================
   18. 工具页 Tools
   ============================================================ */
.tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px }
.t-card     { background:var(--bg-card); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--sh-xs); border:1px solid var(--border); transition:all var(--t) }
.t-card:hover { transform:translateY(-3px); box-shadow:var(--sh) }
.t-head     { display:flex; align-items:center; gap:12px; margin-bottom:12px }
.t-icon     { width:44px; height:44px; border-radius:10px; flex-shrink:0; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:19px }
.t-name     { font-family:var(--F-body); font-size:1.05rem; font-weight:700; color:var(--navy) }
.t-type     { font-size:10px; color:var(--indigo); text-transform:uppercase; letter-spacing:1px }
.t-desc     { font-size:.97rem; color:var(--text-3); line-height:1.72; margin-bottom:14px }
.t-tags     { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px }
.t-tag      { font-size:10px; padding:2px 8px; border-radius:4px; background:rgba(79,70,229,0.08); color:var(--indigo); font-weight:500 }
.t-links    { display:flex; gap:8px }


/* ============================================================
   19. 教学页 Teaching
   ============================================================ */
.course-list  { display:flex; flex-direction:column; gap:16px }
.c-card       { background:var(--bg-card); border-radius:var(--radius-lg); padding:24px 28px; box-shadow:var(--sh-xs); border:1px solid var(--border); display:flex; gap:20px; align-items:flex-start; transition:all var(--t) }
.c-card:hover { box-shadow:var(--sh) }
.c-code       { font-family:var(--F-mono); font-size:10px; color:var(--indigo); letter-spacing:1px; background:rgba(79,70,229,0.08); padding:4px 10px; border-radius:6px; white-space:nowrap; align-self:flex-start; font-weight:500 }  /* 课程代码，如 "PS-601" */
.c-info h3    { font-size:1rem; font-weight:600; color:var(--navy); margin-bottom:5px }
.c-info p     { font-size:.97rem; color:var(--text-3); line-height:1.7 }
.c-meta       { display:flex; flex-wrap:wrap; gap:14px; margin-top:9px }
.c-meta-i     { font-size:11px; color:var(--text-4); display:flex; align-items:center; gap:4px }


/* ============================================================
   20. 加入我们 Join Us
   招募区布局
   ============================================================ */
/* 实验室介绍框（Why AIDDPM Lab?） */
.join-intro   { background:linear-gradient(135deg,rgba(79,70,229,0.06),rgba(124,58,237,0.06)); border-radius:var(--radius-xl); padding:40px 52px; margin-bottom:48px; border:1px solid rgba(79,70,229,0.12); width:100%; box-sizing:border-box }
.join-intro h2 { font-family:var(--F-body); font-size:1.6rem; font-weight:700; color:var(--navy); margin-bottom:14px; letter-spacing:-0.02em }
.join-intro p  { font-size:1.05rem; color:var(--text-2); line-height:1.82; width:100%; max-width:none }  /* max-width:none 确保文字占满整行 */

/* 博士后三个方向卡片网格（3列） */
.postdoc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:48px }
.postdoc-card {
  background:var(--bg-card); border-radius:var(--radius-lg); padding:28px;
  border:1px solid var(--border); box-shadow:var(--sh-xs);
  border-top:4px solid var(--indigo);  /* 顶部蓝线标识 */
  transition:all var(--t); position:relative; overflow:hidden;
}
.postdoc-card:hover { box-shadow:var(--sh-lg); transform:translateY(-3px) }
.postdoc-card::before { /* 右上角 "POSTDOC" 标签 */ content:'POSTDOC'; position:absolute; top:14px; right:14px; font-family:var(--F-mono); font-size:8px; font-weight:700; color:var(--indigo); letter-spacing:1.5px; background:rgba(79,70,229,0.08); padding:3px 8px; border-radius:4px }
.postdoc-num   { font-family:var(--F-body); font-size:10.5px; color:var(--indigo); letter-spacing:1.5px; margin-bottom:10px; text-transform:uppercase; font-weight:500 }  /* "POSITION 01 · IMMEDIATE" */
.postdoc-title { font-size:1.2rem; font-weight:700; color:var(--navy); margin-bottom:12px; line-height:1.28; letter-spacing:-0.02em }
.postdoc-desc  { font-size:1rem; color:var(--text-2); line-height:1.8; margin-bottom:16px }
.postdoc-tags  { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }
.postdoc-tag   { font-size:10px; padding:3px 9px; border-radius:100px; background:rgba(79,70,229,0.08); color:var(--indigo); font-weight:600 }
.req-list      { list-style:none }
.req-list li   { font-size:.96rem; color:var(--text-2); padding:4px 0; display:flex; align-items:flex-start; gap:7px; font-weight:500 }
.req-list li::before { content:'→'; color:var(--indigo); flex-shrink:0; font-weight:700; font-size:.85rem }

/* 其他职位网格（PhD/硕士/RA/访问学者等，3列） */
.pos-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:44px }
.pos-card  { background:var(--bg-card); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--sh-xs); border:1px solid var(--border); transition:all var(--t) }
.pos-card:hover { box-shadow:var(--sh) }
.pos-icon  { font-size:22px; display:inline; margin-right:10px; vertical-align:middle }  /* emoji 与标题同行 */
.pos-title { font-size:1.08rem; font-weight:700; color:var(--navy); margin-bottom:8px; display:inline; vertical-align:middle }
.pos-desc  { font-size:.97rem; color:var(--text-3); line-height:1.7 }

/* 联系我们深色 CTA 框 */
.cta-box   { background:linear-gradient(135deg,var(--navy),#1e1b4b); color:#fff; border-radius:var(--radius-xl); padding:40px 44px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:22px }
.cta-box h3 { font-family:var(--F-display); font-size:1.3rem; font-weight:400; margin-bottom:6px }
.cta-box p  { color:rgba(255,255,255,0.55); font-size:.9rem; max-width:440px }
.cta-email  { font-family:var(--F-mono); font-size:.95rem; color:#a5b4fc; font-weight:500; margin-top:8px; display:block }


/* ============================================================
   21. 访客统计条 Visitor Bar（备用样式）
   ============================================================ */
.visitor-bar        { background:#0d1424; border-top:1px solid rgba(255,255,255,0.06); padding:20px max(24px,6vw); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px }
.visitor-inner      { max-width:1100px; width:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px }
.visitor-map-widget { display:flex; align-items:center; gap:10px }
.visitor-label      { font-size:11.5px; color:rgba(255,255,255,0.35); letter-spacing:0.5px; text-transform:uppercase; font-weight:600 }
.visitor-count      { font-size:13px; color:rgba(255,255,255,0.55) }
.visitor-count strong { color:rgba(165,180,252,0.9); font-size:15px; font-weight:700 }


/* ============================================================
   22. 底部 Footer
   深色，四列布局（品牌信息 / Pages / Tools / ClustrMaps 地球仪）
   ============================================================ */
.footer        { background:#0d1424; color:rgba(255,255,255,0.5); padding:52px max(24px,6vw) 28px }
.footer-inner  { display:grid; grid-template-columns:1.8fr 1fr 1fr auto; /* 四列：品牌/导航/工具/地图 */ gap:44px; margin-bottom:40px; max-width:1200px; align-items:start }
.f-brand       { font-family:var(--F-body); font-size:1.05rem; color:#fff; font-weight:700; margin-bottom:8px; letter-spacing:-0.02em }
.f-desc        { font-size:.93rem; line-height:1.78; margin-bottom:16px; color:rgba(255,255,255,0.45) }
.f-col-head    { font-family:var(--F-body); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:16px }  /* 列标题 PAGES / TOOLS */
.f-links       { list-style:none }
.f-links li    { margin-bottom:7px }
.f-links a     { font-size:.97rem; color:rgba(255,255,255,0.5); transition:color var(--t) }
.f-links a:hover { color:#a5b4fc }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.07); padding-top:22px; display:flex; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,0.28); flex-wrap:wrap; gap:8px; max-width:1200px }

/* Footer 响应式 */
@media(max-width:900px) { .footer-inner { grid-template-columns:1fr 1fr; gap:28px } }
@media(max-width:600px) { .footer-inner { grid-template-columns:1fr; gap:24px } }

.footer-wrap { max-width:1100px; margin:0 auto }  /* 约束 footer 内容最大宽度 */


/* ============================================================
   23. 动画 & 响应式 Animations / Media Queries
   ============================================================ */
/* 滚动进入淡入上移效果（JS 添加 .visible class 触发） */
.fade-up         { opacity:0; transform:translateY(20px); transition:opacity .5s ease,transform .5s ease }
.fade-up.visible { opacity:1; transform:none }

/* 平板：招聘卡片降为2列 */
@media(max-width:960px) {
  .postdoc-grid { grid-template-columns:repeat(2,1fr) }
  .pos-grid     { grid-template-columns:repeat(2,1fr) }
}

/* 手机：单列布局 */
@media(max-width:700px) {
  .hero-inner      { grid-template-columns:1fr }
  .hero-logo-wrap  { display:none }      /* 手机隐藏右侧 Logo */
  .pi-block        { flex-direction:column }
  .c-card          { flex-direction:column }
  .cta-box         { flex-direction:column }
  .campus-strip    { grid-template-columns:1fr 1fr }
  .postdoc-grid    { grid-template-columns:1fr }
  .pos-grid        { grid-template-columns:1fr }
}


/* ============================================================
   24. Hero 轮播 — 完整版（覆盖第06节的早期定义）
   ── 修改参数说明 ──
   hero-slide.active opacity  →  控制图片明暗（0=全黑，1=全亮）
   hero-overlay rgba 数值      →  控制遮罩深浅（越大越暗）
   ============================================================ */
.hero-slides { position:absolute; inset:0; z-index:0 }
.hero-slide  {
  position:absolute; inset:0;
  background-size:cover; background-position:center 40%;
  opacity:0;
  transition:opacity 1.2s ease-in-out;
  filter:saturate(1.05) brightness(1.0);
}
.hero-slide.active { opacity:0.90 }  /* ← 调这个数值控制图片亮度 */

/* 底部切换圆点 */
.hero-dots { position:absolute; bottom:72px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10 }
.hero-dot  { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.35); border:none; cursor:pointer; padding:0; transition:all 0.3s ease }
.hero-dot.active  { background:#fff; transform:scale(1.25) }
.hero-dot:hover   { background:rgba(255,255,255,0.7) }


/* ============================================================
   25. 访客地图区 Visitor Map Section
   注：此区域已整合进 Footer 第四列（index.html）
   以下样式为备用，如需独立区块可重新启用
   ============================================================ */
.visitor-section { background:var(--navy); padding:48px max(24px,6vw) 40px }
/* .visitor-inner 已在第21节定义，此处不重复 */
.visitor-title { font-family:var(--F-body); font-size:1.2rem; font-weight:700; color:#fff; margin-bottom:6px; letter-spacing:-0.02em }
.visitor-sub   { font-size:.9rem; color:rgba(255,255,255,0.45); margin-bottom:20px }
#visitor-map-wrap { width:100%; aspect-ratio:2/1; border-radius:12px; overflow:hidden; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08) }
#visitor-count    { display:flex; flex-wrap:wrap; gap:20px; margin-top:20px }
.vcount-item      { background:rgba(255,255,255,0.05); border-radius:10px; padding:14px 20px; min-width:120px }
.vcount-num       { font-size:1.6rem; font-weight:800; color:#a5b4fc; display:block; letter-spacing:-0.03em }
.vcount-label     { font-size:.8rem; color:rgba(255,255,255,0.4); letter-spacing:1px; text-transform:uppercase }
@media(max-width:720px) { .visitor-inner { grid-template-columns:1fr } }