:root{
  --bg:#f7f8fa;                 /* 更干净的浅背景 */
  --card:#ffffff;               /* 卡片背景 */
  --muted:#4b5563;              /* 更深的次要文字，更清晰 */
  --text:#111827;               /* 正文深灰（接近黑色但不刺眼） */
  --line:rgba(15,23,42,.12);    /* 更明显的边框线 */
  --accent:#2563eb;             /* 主题强调色 */
  --shadow: 0 10px 25px rgba(15,23,42,.10);
  --radius:16px;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    var(--bg);
  color:var(--text);
  line-height:1.65;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


.container{
  max-width: 1320px;   /* 原来是 1100px，改大一点 */
  margin: 0 auto;
  padding: 0 18px;
}


.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(12px);
  background: rgba(245,247,252,.95);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; gap:14px;
}

.brand{
  font-weight:700; letter-spacing:.2px;
  color:var(--text); text-decoration:none;
  padding:10px 12px; border-radius:12px;
}
.brand:hover{background: rgba(233,238,249,.06);}

.nav{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.nav-btn{
  appearance:none; border:0;
  color:var(--muted);
  background: transparent;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}
.nav-btn:hover{background: rgba(233,238,249,.06); color:var(--text);}
.nav-btn.is-active{
  background: rgba(122,162,255,.14);
  color: var(--text);
  outline: 1px solid rgba(122,162,255,.30);
}

.hamburger{
  display:none;
  width:42px; height:38px;
  border-radius:12px;
  background: rgba(233,238,249,.06);
  border: 1px solid var(--line);
  cursor:pointer;
}
.hamburger span{
  display:block; height:2px; margin:6px 10px;
  background: var(--text);
  opacity:.9;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 20px;
  color: #1a1a1a;   /* 关键：让 card 正文和 bio 完全一致 */
}

.hero{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:22px;
  align-items:start;
}
.title{margin:0; font-size:34px; line-height:1.15;}
.subtitle{margin:8px 0 14px; color:var(--muted); font-weight:600;}
.bio{
  margin: 14px 0 0;
  max-width: 680px;          /* 控制行宽，视觉立刻稳 */
  color: #1a1a1a;
  line-height: 1.6;
  text-align: justify;       /* 两端对齐 */
  text-justify: inter-word;
  hyphens: auto;             /* 防止单词间距过大 */
  -webkit-hyphens: auto;
}


.recruit{
  margin-top: 16px;
  padding-top: 10px;
  font-size: 0.9em;
  line-height: 1.55;
  color: #2f4f7f;                 
  border-top: 1px dashed rgba(47,79,127,.35);

  text-align: justify;            /* 两端对齐 */
  text-justify: inter-word;
  hyphens: auto;                  /* 防止单词间距过大 */
  -webkit-hyphens: auto;
}

/* links inside recruit note */
.recruit a{
  color: #3f6fb5;
  text-decoration: none;
  font-weight: 600;
}

.recruit a:hover{
  text-decoration: underline;
}


.quick{display:flex; flex-wrap:wrap; gap:10px;}
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration:none;
  background: rgba(233,238,249,.04);
}
.chip:hover{border-color: rgba(122,162,255,.45);}

.hero-right{display:flex; flex-direction:column; gap:14px;}
.avatar{
  height:170px;
  border-radius: 18px;
  border: 1px dashed rgba(233,238,249,.25);
  display:flex; align-items:center; justify-content:center;
  color: rgba(233,238,249,.55);
  background: rgba(233,238,249,.03);
}
.meta{border:1px solid var(--line); border-radius: 14px; padding:12px; background: rgba(233,238,249,.03);}
.meta-row{display:flex; justify-content:space-between; gap:14px; padding:7px 6px; border-bottom:1px solid rgba(233,238,249,.08);}
.meta-row:last-child{border-bottom:0}
.k{color: var(--muted); font-weight:600;}
.v{color: var(--text); font-weight:600;}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px;}
#research .grid2{
  grid-template-columns: 1fr;
}
#research .pill{
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);   /* 边界更清晰 */
  background: #ffffff;                    /* 与页面拉开 */
}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px;}

.h2{margin:0 0 12px; font-size:22px;}
.h3{margin:0 0 8px; font-size:16px; color: rgba(233,238,249,.95);}

.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px;}
.hint{margin:0; color: var(--muted); font-size:13px;}

.list{margin:0; padding-left:18px; color: #1a1a1a;font-size: 0.92em;}
.links{display:flex; flex-direction:column; gap:8px;}
.links a{color: var(--text); text-decoration:none; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background: rgba(233,238,249,.03);}
.links a:hover{border-color: rgba(122,162,255,.45);}

.timeline{display:flex; flex-direction:column; gap:10px;}
.t-item{display:grid; grid-template-columns: 90px 1fr; gap:14px; padding:12px; border-radius:14px; border:1px solid rgba(233,238,249,.08); background: rgba(233,238,249,.02);}
.t-date{color: var(--muted); font-weight:700;}
.t-body{color: rgba(233,238,249,.92);}

.pill{
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(233,238,249,.10);
  background: rgba(233,238,249,.02);
}
.pill .h3{
  color: var(--text);
}

/* Students grid: 更稳定的三列 */
/* Students grid: 三列布局 + 自适应 */
.cards3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* 一行三个 */
  gap: 16px;
  align-items: stretch;
}

/* 中等屏幕：两列 */
@media (max-width: 1100px){
  .cards3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 小屏幕：一列 */
@media (max-width: 720px){
  .cards3{
    grid-template-columns: minmax(0, 1fr);
  }
}


.person{
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);   /* 明显但不突兀 */
  background: #ffffff;                    /* 纯白卡片 */
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
}


.p-top{display:flex; gap:10px; align-items:center;}
.p-avatar{
  width:36px; height:36px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(122,162,255,.18);
  border: 1px solid rgba(122,162,255,.25);
  font-weight:800;
}
.p-name{font-weight:800;font-size:17px;}

.p-role{color: var(--muted); font-weight:600; font-size:11px;}
.p-tags{margin:10px 0 8px; display:flex; flex-wrap:wrap; gap:6px;}
.tag{
  font-size:12px;
  font-weight:700;
  color:#1a1a1a;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 6px rgba(15,23,42,.10);
}

.p-note{
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;

  padding-left: 10px;
  border-left: 2px solid rgba(15,23,42,.12);
}

.p-links{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap;}
.p-links a{
  color: var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:11px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(233,238,249,.10);
  background: rgba(233,238,249,.03);
}
.p-links a:hover{border-color: rgba(122,162,255,.45);}

.pub{padding:14px; border-radius:14px; border:1px solid rgba(233,238,249,.10); background: rgba(233,238,249,.02); margin-top:12px;}
.pub-title{font-weight:800;}
.pub-meta{color: var(--muted); font-weight:600; font-size:13px; margin-top:4px;}
.pub-links{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.pub-links a{color:var(--text); text-decoration:none; font-weight:700; font-size:13px; padding:8px 10px; border-radius:12px; border:1px solid rgba(233,238,249,.10); background: rgba(233,238,249,.03);}
.pub-links a:hover{border-color: rgba(122,162,255,.45);}

.page{display:none; margin-top:18px;}
.page.is-visible{display:block;}

.footer{
  padding:28px 0 40px;
  border-top:1px solid var(--line);
  margin-top:10px; 
}
.foot{color: var(--muted); font-weight:600;}

@media (max-width: 920px){
  .hero{grid-template-columns:1fr; }
  .grid2{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
}

@media (max-width: 880px){
  .hamburger{display:block;}
  .nav{
    position:absolute;
    top:64px; left:0; right:0;
    padding:12px 18px 18px;
    background: rgba(11,15,23,.92);
    border-bottom: 1px solid var(--line);
    display:none;
  }
  .nav.is-open{display:flex;}
  .nav-btn{width:100%; text-align:left;}
}
.avatar{
  width: 200px;        /* 头像明显收敛 */
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(233,238,249,.10);
  background: rgba(233,238,249,.03);
  margin: 0 auto;      /* 关键：水平居中 */
}

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}


.hero-right{
  align-items: center;
  gap: 14px;
}


.meta{
  width: 360px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #f9fafb;
  border: 1px solid rgba(0,0,0,0.06);

  text-align: center;          /* 整体居中 */
}

.meta-line{
  font-size: 0.95em;
  line-height: 1.55;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.meta-line.title{
  font-weight: 700;
  font-size: 1.25em;
}

.meta-line.org{
  font-weight: 600;            /* 单位加粗 */
}

.meta-line.email{
  margin-bottom: 0;
  display: flex;               /* 图标 + 邮箱对齐 */
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.meta-line.email .icon{
  font-size: 0.95em;
  color: #2f5fa8;
}

.meta-line a{
  color: #2f5fa8;
  text-decoration: none;
  font-weight: 500;
}

.meta-line a:hover{
  text-decoration: underline;
}

.meta-line.email{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.meta-line.email .icon{
  display: inline-flex;
  align-items: center;
}

.meta-line.email svg{
  width: 18px;
  height: 18px;
  fill: #2f5fa8;   /* 与按钮图标一致的深色 */
}

.meta-line.email a{
  color: #2f5fa8;
  text-decoration: none;
  font-weight: 500;
}

.meta-line.email a:hover{
  text-decoration: underline;
}


.hero{
  align-items: flex-start;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;   /* 图标与文字之间的间距 */
}

.section-head .intro{
  margin-top: 12px;
  max-width: 620px;   /* 防止横向拉太长 */
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.7rem;
}

#research .pill .h3{
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px;
}

#research .pill p{
  color: #374151;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

#research .pill-pubs{
  counter-reset: pub;
  margin-top: 6px;
  padding-left: 18px;
  border-left: 2px solid rgba(15,23,42,.10);
}

#research .pill-pub{
  position: relative;
  counter-increment: pub;

  font-size: 13px;
  line-height: 1.6;
  color: #1f2933;

  margin-top: 6px;
  padding-left: 24px;   /* 给 [1] 留空间 */
}

#research .pill-pub::before{
  content: "[" counter(pub) "] ";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: rgba(31,41,51,.55);
}


/* venue 高亮（NeurIPS 2023） */
#research .pub-venue{
  font-weight: 600;
  color: #1f2933;

  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(15,23,42,.04);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.10);
}

/* links：必须是行内，不换行 */
#research .pub-links{
  display: inline;
  margin-left: 6px;
  white-space: nowrap;   /* 关键：禁止换行 */
}

/* links 本身是“文字”，不是按钮 */
#research .pub-links a{
  display: inline;
  font-size: 10px;
  font-weight: 500;
  color: rgba(15,23,42,.65);
  text-decoration: none;

  /* 强制清除你之前可能有的按钮样式 */
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* 中点分隔符 */
#research .pub-links a:not(:last-child)::after{
  content: " · ";
  color: rgba(15,23,42,.4);
}

/* hover 仅下划线 */
#research .pub-links a:hover{
  text-decoration: underline;
}
#research .pill-desc{
  color: #374151;
  font-size: 14px;
  line-height: 1.65;
}

#research .pill-desc .level{
  font-weight: 600;
  color: #1f2933;
}
/* 让 Service 卡片和 Research 主卡片同宽 */
#service.page {
  max-width: 1200px;   /* 根据需要调，和 research 用同一个值即可 */
  margin: 0 auto;
}

#service .card {
  width: 100%;
  max-width: 1200px;   /* 覆盖全局较小的 max-width */
  margin: 0 auto;
  box-sizing: border-box;
}