@charset "UTF-8";
html {-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body {background-color: #fdfdfd; color: #234; margin: 0; font-size: 16px;}
h1 {margin-bottom: 32px; font-size: 2.6em;}
h2 {margin-top: 48px;}
h1, h2 {color: #234;}
h3, h4, h5 {color: #345;}
h1, h2, h3, h4, h5, a, p, span, body, div {font-weight: normal; font-family: 'Lato', Verdana, Helvetica, sans-serif;}
/* .header {background: linear-gradient(to bottom, #fdfdfd 10%, #f4f4f8 90%); width: 100%; padding-top: 16px; padding-bottom: 32px;} */
.header {
  background: radial-gradient(1200px 500px at 0% 0%, rgba(99,102,241,.08), transparent 60%),
              radial-gradient(900px 400px at 100% 0%, rgba(59,130,246,.06), transparent 60%),
              linear-gradient(to bottom, #f8fbff 0%, #f8fbff 40%, #fbf5fb 100%);
  /* background:
    radial-gradient(60% 70% at 30% 75%, rgba(255,255,255,.50), rgba(255,255,255,0) 70%),
    radial-gradient(90% 80% at 85% 10%, rgba(170,235,205,.18), transparent 80%),
    radial-gradient(90% 80% at 20% 35%, rgba(170,190,255,.18), transparent 80%); */
  width: 100%;
  padding: 56px 0 64px;
}
/* .header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 70% at 30% 75%, rgba(255,255,255,.50), rgba(255,255,255,0) 70%),
    radial-gradient(90% 80% at 85% 10%, rgba(170,235,205,.18), transparent 80%),
    radial-gradient(90% 80% at 20% 35%, rgba(170,190,255,.18), transparent 80%);
  filter: blur(22px);
  pointer-events:none;
  z-index:0;
} */
.header-profile-picture, .header-text {display: inline-block;}
.header-name h1 {margin: 0;}
.header-subtitle {margin-bottom: 12px;}
/* .header-profile-picture {width: 200px; height: 200px; margin-right: 12px; border-radius: 50%; background-image: url(files/me.png); background-position: center; background-size: contain;} */
.header-profile-picture {
  width: 200px;
  height: 200px;
  margin-right: 12px;
  border-radius: 50%;
  background-image: url(files/me.png);
  background-position: center;
  background-size: cover;
  border: 6px solid #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10), 0 0 0 10px rgba(255,255,255,0.35);
  position: relative;
  filter: contrast(0.98) saturate(0.98);
}

.header-profile-picture::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translate(-50%,-40%);
  width:86%;
  height:26%;
  border-radius:50%;
  background:radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,.16), rgba(0,0,0,0) 70%);
  filter:blur(12px);
  z-index:-2;
}

.header-profile-picture::before {
  filter: blur(10px) brightness(1.05);
}

.name {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 10px 0 0;
}

/* .header .content {display: flex; flex-direction: column; align-items: center; text-align: center;}
.header .header-profile-picture {margin-right: 0; margin-bottom: 12px;}
.header .header-text {text-align: center;}  */

.header .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 56px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 60px 20px;
}
.header .content.row {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}
.header-right ul li {
  line-height: 1.6;
  margin-bottom: 8px;
}
.header .header-text { text-align: center; }
.header .header-profile-picture {
  margin-right: 12px;
  margin-bottom: 0;
}
.header-name h1 {
  font-family: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-stretch: 95%;
  font-size: clamp(40px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 28px 0 8px;
}
/* .header-subtitle {
  font-size: clamp(16px, 2.2vw, 18px);
  color: #456;
  margin-bottom: 12px;
} */
.header-subtitle {
  font-family: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.02em;
  color: #445;
  /* white-space: nowrap; */
}
@media (max-width: 900px) {
  .header .content {
    flex-direction: column;
    text-align: center;
  }

  .header .header-text {
    text-align: center;
  }

  .header .header-right {
    text-align: left;
  }

  .header .header-profile-picture {
    margin: 0 auto 12px;
    margin-bottom: 20px;
  }
}
.content {max-width: 748px; padding-left: 16px; padding-right: 16px; margin: auto; margin-top: 48px;}
.hr {width: 100%; height: 1px; margin: 48px 0; background-color: #d6dbdf;}
a {color: #2471a3; text-decoration: none;}
a:focus, a:hover {color: #f09228;}
p {line-height: 1.5em;}
.nobreak {white-space: nowrap;}
.noselect {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.bulletpoints {line-height: 1.5em;}
.row {box-sizing: border-box;}
.row-media {display: block; float: left; width: 160px; height: 90px; background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 6px;}
.row-text {display: block; float: left; margin-left: 12px; line-height: 1.5em; max-width: 566px;}
.row-text span {line-height: inherit;}
.clearfix {content: ""; clear: both; display: table;}
.publication {margin-bottom: 32px;}
.press {width: 100px; height: 80px; border: 1px solid #def; margin-right: 12px; background-size: cover;}  
.img-contain {background-size: contain !important;}
.footer {background-color: #345; width: 100%}
.footer-content {color: #fff; font-size: 10px; padding: 6px 0; max-width: 968px; margin: auto;}
.footer-content a {color: #fff; text-decoration: underline;}
.footer-content a:hover {color: #f09228 !important;}
.stars {font-size: 10px; display: inline-block; margin-left: 6px; color: #666;}
.icon {
  width: 33px;
  height: 33px;
  vertical-align: middle;
  filter: brightness(1) invert(0.1);
  transition: filter 0.2s ease;
  margin-right: 18px;
}
.icon:hover {
  filter: brightness(1) invert(0.6);
}
/* Counter */
.flag-counter {margin: 24px 0; text-align: center;}

/* Tabs */
.tabs {display: inline-flex; gap: 8px; background: #f2f4f8; padding: 6px; border-radius: 10px; margin: 12px 0 20px;}
.tab-btn {appearance: none; border: 0; background: transparent; padding: 8px 12px; border-radius: 8px; color: #345; cursor: pointer; font-weight: 600;}
.tab-btn:hover {background: #e6eaef;}
.tab-btn.active {background: #234; color: #fff;}
.tab-pane {animation: fadeIn 140ms ease-in;}
@keyframes fadeIn {from {opacity: 0} to {opacity: 1}}

/* News */
.news-wrap {
  max-width: 760px;
  margin: 24px auto 0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.65));
  padding: 14px 16px 12px;
}

.news-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 10px 6px;
}

.news-emoji {
  font-size: 22px;
}

.news-head h2 {
  font-size: 20px;
  font-weight: 800;
  color: #123;
  margin: 0;
}

.updates {
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  max-height: 260px;
  overflow-y: auto;
  padding: 0;
}

.update-item {
  display: flex; /* 修改为 flex */
  align-items: flex-start; /* 顶部对齐 */
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.update-item:last-child {
  border-bottom: none;
}

.update-date {
  flex-shrink: 0;
  width: 130px;
  color: #2471a3;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.75;
}

.update-text {
  flex: 1;
  color: #1e2932;
  line-height: 1.75;
}

.update-text a {
  color: #2471a3;
  font-weight: 600;
  text-decoration: none;
}

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

/* Scrollbar */
.updates::-webkit-scrollbar { width: 8px; }
.updates::-webkit-scrollbar-track { background: transparent; }
.updates::-webkit-scrollbar-thumb { background: #ccd6e0; border-radius: 8px; }
.updates:hover::-webkit-scrollbar-thumb { background: #aab7c6; }

/* Publication card polish */
.publication {padding: 12px 12px; border-radius: 10px; transition: box-shadow .15s ease, transform .15s ease;}
.publication:hover {box-shadow: 0 4px 16px rgba(0,0,0,0.06); transform: translateY(-1px);}
.publication-title {color: #123;}
.publication .btn {display: inline-block; margin-top: 4px;}
.award-msg {
  color: #c62828;
  font-weight: 700;
  font-style: italic;
  margin-top: 4px;
}
.note-msg {
  color: #666;
  font-size: 0.9em;
  font-style: italic;
  margin-top: 2px;
}


/* Buttons */
a.btn {display: inline-block; border: 1px solid #ccd6e0; padding: 3px 8px; border-radius: 6px; background: #fff; transition: all .15s ease;}
a.btn:hover {border-color: #234; color: #234; box-shadow: 0 2px 6px rgba(0,0,0,0.05)}

/* Topic sections */
.topic-section {margin: 18px 0 8px;}
.topic-section h3 {margin: 18px 0 8px;}

/* Research Interests grid */
.interests-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.interest-card {
  background: #fff;
  border: 1px solid #e6eaef;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.interest-card h3 {margin-top: 4px; margin-bottom: 8px;}
.interest-card ul {margin: 0; padding-left: 18px;}
.interest-card li {margin: 6px 0;}

@media only screen and (max-width: 900px) {
  .interests-grid {grid-template-columns: 1fr;}
}

/* Industry Experience */
.experience-list {margin-top: 12px;}
.experience-item {display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e6eaef; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.04); margin-bottom: 12px;}
.experience-logo {width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: #fff;}
.experience-meta {display: flex; flex-direction: column;}
.experience-role {font-weight: 700; color: #123;}
.experience-company {color: #345;}
.experience-dates {color: #667; font-size: 0.95em;}
.experience-location {color: #667; font-size: 0.95em;}
.experience-description {margin-top: 6px; color: #234; line-height: 1.45em;}

@media only screen and (max-width: 1150px) {
    .header-profile-picture, .header-text {display: block; margin: auto; text-align: center;}
    .header-profile-picture {margin-bottom: 12px; width: 140px; height: 140px;}
    body {font-size: 18px;}
    a.btn {font-size: 14px; padding: 2px 6px;}
}

/* Extra-small devices: enforce header photo centering */
@media only screen and (max-width: 600px) {
  .header .content {align-items: center;}
  .header-profile-picture {display: block !important; margin: 0 auto 12px !important;}
  .header .header-text {text-align: center;}
}

@media only screen and (max-width: 1000px) {
    .publication {margin-bottom: 46px;}
    .publication .row-media {width: 260px; height: 130px; margin: auto; margin-bottom: 12px; display: block;}
    .publication .row-text {display: block; width: 100%; margin-left: 0;}
    .press {display: block;}
}

/* Project Cards */
.proj-card{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #e6eaef;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.proj-thumb{width:200px;height:200px;object-fit:contain;border-radius:10px;background:#fff;flex:0 0 200px}
.proj-body{flex:1;min-width:0}
.proj-line1{display:flex;align-items:center;gap:8px}
.proj-title{font-weight:800;color:#2471a3;text-decoration:none}
.proj-title:hover{color:#0f5f96;text-decoration:underline}
.proj-stars{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid #e6eaef;border-radius:999px;background:#f8fafc;color:#445}
.star-ico{width:16px;height:16px;fill:#f5b301}
.proj-star-num{font-weight:700}
.proj-desc{margin-top:4px;color:#234;line-height:1.55}
.proj-bullets{margin:6px 0 0 18px;line-height:1.6}
.proj-bullets li{margin:3px 0}
@media (max-width: 640px) {
  .proj-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .proj-thumb {
    width: 100%;
    height: auto;
    max-width: 320px; /* 控制图片不太大 */
    flex: none; /* 移除固定 flex 比例 */
    margin-bottom: 10px;
  }

  .proj-body {
    width: 100%;
  }

  .proj-line1 {
    justify-content: center;
  }

  .proj-desc {
    text-align: left;
  }

  .proj-bullets {
    margin-left: 0;
    padding-left: 0;
    list-style-position: inside;
    text-align: left;
  }
}