@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');
:root {
  --ink: #102033;
  --muted: #5f7184;
  --blue: #0e3a5b;
  --blue-2: #0b2741;
  --gold: #e5b84b;
  --paper: #f7f9fc;
  --line: #e4edf4;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: var(--ink); background: #06111f; line-height: 1.65; }
a { color: #0b66a0; }
.topbar { position: sticky; top: 0; z-index: 10; background: transparent; border-bottom: 1px solid rgba(126,242,255,.18); backdrop-filter: none; }
.nav { max-width: 1280px; margin: 0 auto; padding: 10px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { font-weight: 900; color: #ffffff; text-decoration: none; line-height: 1.15; }
.brand small { display: block; color: #bcecff; font-weight: 650; font-size: .78rem; }
.navlinks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.navlinks a { text-decoration: none; color: #eaf8ff; font-weight: 750; padding: 8px 12px; border-radius: 999px; background: rgba(5,14,27,.34); border: 1px solid rgba(126,242,255,.12); backdrop-filter: blur(8px); }
.navlinks a:hover, .navlinks a.active { background: rgba(126,242,255,.16); color: #ffffff; }
.lang { background: linear-gradient(135deg, #7df3ff, #e5b84b) !important; color: #071629 !important; }
.hero { position: relative; overflow: hidden; background: transparent; color: white; padding: 46px 24px 54px; min-height: calc(100vh - 70px); display: flex; align-items: flex-start; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 70% 30%, black, transparent 72%); z-index: 0; }
.hero > * { position: relative; }
.hero-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr); gap: 28px; align-items: stretch; }
.kicker { color: #cfe8ff; text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 800; }
h1 { font-size: clamp(2.35rem, 5vw, 4.55rem); line-height: 1.05; margin: 8px 0; }
.lead { font-size: 1.22rem; color: #e7f3ff; max-width: 790px; }
.buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.button { display: inline-block; padding: 11px 18px; border-radius: 999px; text-decoration: none; font-weight: 800; background: var(--gold); color: #111; }
.button.secondary { background: rgba(255,255,255,.12); color: white; border: 1px solid rgba(255,255,255,.28); }
.portrait { width: min(320px, 100%); border-radius: 28px; border: 6px solid rgba(229,184,75,.9); box-shadow: 0 24px 70px rgba(0,0,0,.35); }
main { max-width: 1160px; margin: 0 auto; padding: 38px 24px 76px; }
.page-title { background: white; border-radius: 24px; padding: 28px; margin-bottom: 22px; box-shadow: 0 12px 35px rgba(16,32,51,.06); }
section { background: rgba(255,255,255,.88); border: 1px solid rgba(126,242,255,.18); border-radius: 24px; padding: 28px; margin: 22px 0; box-shadow: 0 18px 55px rgba(0,0,0,.18); backdrop-filter: blur(14px); }
h2 { margin-top: 0; color: var(--blue); }
h3 { color: var(--blue-2); margin-bottom: 8px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.card { background: linear-gradient(180deg, #ffffff, #f4f9fc); border: 1px solid #dceaf3; border-radius: 20px; padding: 20px; box-shadow: 0 10px 28px rgba(14,58,91,.06); }
.card:hover { transform: translateY(-2px); transition: .18s ease; box-shadow: 0 16px 36px rgba(14,58,91,.10); }
.card strong { color: var(--blue-2); }
.pub { padding: 16px 0; border-top: 1px solid #e6edf3; }
.pub:first-of-type { border-top: 0; }
.badge { display: inline-block; background: #fff5d6; color: #745009; border: 1px solid #f3d57a; border-radius: 999px; padding: 5px 10px; font-size: .9rem; font-weight: 800; margin: 4px 6px 4px 0; }
.muted { color: var(--muted); }
.cta { background: linear-gradient(135deg, #071629, var(--blue)); color: white; }
.cta h2 { color: white; }
.cta .muted { color: #d6e8f7; }
footer { text-align: center; color: var(--muted); padding: 34px 20px; }
@media (max-width: 980px) { .hero-inner, .grid, .grid.two { grid-template-columns: 1fr; } .nav { align-items: flex-start; flex-direction: column; } .navlinks { justify-content: flex-start; } }

.visual { width: 100%; border-radius: 24px; box-shadow: 0 20px 55px rgba(6,22,41,.18); border: 1px solid rgba(255,255,255,.28); }
.feature-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; }
.image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.image-grid img { width: 100%; border-radius: 20px; border: 1px solid var(--line); background: white; }
.pill-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.pill { background: #eaf8ff; border: 1px solid #cbe8f7; color: #0b3d5f; padding: 8px 12px; border-radius: 999px; font-weight: 800; font-size: .94rem; }
@media (max-width: 860px) { .feature-row, .image-grid { grid-template-columns: 1fr; } }

.ai-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; mix-blend-mode: screen; z-index: 2; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,22,.76), rgba(5,8,22,.34) 48%, rgba(5,8,22,.10)); pointer-events: none; z-index: 1; }
.hero-inner { position: relative; z-index: 3; }
.hero .visual { background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.tech-note { border-left: 4px solid #7df3ff; padding-left: 16px; color: #dff8ff; }

body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 18% 18%, rgba(121,242,255,.16), transparent 30%), radial-gradient(circle at 88% 8%, rgba(229,184,75,.13), transparent 24%), radial-gradient(circle at 82% 82%, rgba(64,120,255,.10), transparent 28%); animation: bg-drift 14s ease-in-out infinite alternate; }
@keyframes bg-drift { from { transform: translate3d(0,0,0) scale(1); opacity: .85; } to { transform: translate3d(-18px, 14px, 0) scale(1.04); opacity: 1; } }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.logo-mark { width: 330px; height: auto; max-height: 96px; border-radius: 0; box-shadow: none; flex: 0 0 auto; object-fit: contain; background: transparent; padding: 0; display: block; }
@media (max-width: 720px) { .logo-mark { width: 270px; max-height: 82px; } }
@media (max-width: 520px) { .logo-mark { width: 220px; max-height: 68px; } }

.site-bg-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; opacity: 1; background: radial-gradient(circle at 72% 18%, rgba(121,242,255,.18), transparent 28%), radial-gradient(circle at 18% 72%, rgba(229,184,75,.14), transparent 30%), #06111f; }
.hero-title-cn { font-size: clamp(2.55rem, 5.1vw, 5.15rem); letter-spacing: .02em; white-space: nowrap; }
.hero-slogan { font-size: clamp(1.02rem, 1.55vw, 1.34rem); font-weight: 850; color: #dff8ff; margin: 12px 0 16px; line-height: 1.35; white-space: nowrap; }
.hero-panel { background: rgba(5,14,27,.46); border: 1px solid rgba(126,242,255,.24); border-radius: 30px; padding: 24px 28px; box-shadow: 0 25px 80px rgba(0,0,0,.28); backdrop-filter: blur(12px); height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hero-actions { margin-top: 22px; }
.hero .lead { color: #eefcff; font-size: 1.08rem; margin: 10px 0; }

.news-panel { background: rgba(5,14,27,.56); border: 1px solid rgba(126,242,255,.26); border-radius: 30px; padding: 22px; box-shadow: 0 25px 80px rgba(0,0,0,.28); backdrop-filter: blur(14px); color: #effcff; min-height: 100%; overflow: hidden; align-self: stretch; }
.news-panel h2 { color: #ffffff; margin-bottom: 18px; }
.panel-title-link { color: inherit; text-decoration: none; }
.panel-title-link:hover { color: #7df3ff; }
.news-more { margin-top: 18px; }
.news-tabs { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.news-tab { border: 1px solid rgba(126,242,255,.28); background: rgba(126,242,255,.11); color: #dff8ff; border-radius: 999px; padding: 7px 12px; font-weight: 850; font-size: .92rem; }
.news-scroll { max-height: 390px; overflow: hidden; position: relative; }
.news-list { display: flex; flex-direction: column; gap: 14px; animation: news-roll 18s linear infinite; }
.news-scroll:hover .news-list { animation-play-state: paused; }
.news-item { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 13px 15px; }
.news-date { color: #ffd66b; font-weight: 900; font-size: .92rem; }
.news-title { color: #ffffff; font-weight: 900; margin: 4px 0; }
.news-text { color: #cfefff; font-size: .96rem; }
@keyframes news-roll { 0%, 16% { transform: translateY(0); } 28%, 44% { transform: translateY(-112px); } 56%, 72% { transform: translateY(-224px); } 84%, 100% { transform: translateY(-336px); } }
@media (max-width: 980px) { .hero-title-cn, .hero-slogan { white-space: normal; } .news-panel { max-height: none; } .news-scroll { max-height: none; } .news-list { animation: none; } }
.timeline { display: grid; gap: 16px; }
.timeline-item { background: linear-gradient(180deg, #ffffff, #f4f9fc); border: 1px solid #dceaf3; border-radius: 20px; padding: 20px; }
.pub-card { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.pub-main { flex: 1 1 auto; min-width: 0; }
.pub-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: start; }
.pub-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 0; }
.pub-number { color: var(--blue); font-weight: 950; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.65; text-align: right; }
.pub-citation { color: #26384a; overflow-wrap: anywhere; }
.pub-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; min-width: 140px; }
.featured-pub { border-left: 4px solid var(--gold); padding-left: 18px; }
.star-badge { font-size: .78rem; padding: 3px 8px; margin: 0 0 5px; }
.pub-pdf, .light-button { white-space: nowrap; padding: 8px 13px; }
.light-button { background: #eaf8ff !important; color: #0b3d5f !important; border: 1px solid #cbe8f7; }
.missing-pdf { color: #8a5a00; background: #fff5d6; border: 1px solid #f3d57a; border-radius: 999px; padding: 8px 12px; font-weight: 850; white-space: nowrap; }
code { background: #edf5fb; border: 1px solid #d6e7f2; border-radius: 6px; padding: 1px 6px; }
@media (max-width: 760px) { .pub-card { align-items: flex-start; flex-direction: column; } .pub-actions { justify-content: flex-start; } }
@media (max-width: 520px) { .pub-row { grid-template-columns: 46px minmax(0, 1fr); gap: 9px; } }

.member-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 310px); gap: 24px; align-items: start; }
.member-photo { width: 100%; border-radius: 24px; border: 1px solid rgba(126,242,255,.24); box-shadow: 0 18px 45px rgba(6,22,41,.22); object-fit: cover; }
.member-card-link { display: block; text-decoration: none; color: inherit; }
.member-summary-card { display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 18px; align-items: center; cursor: pointer; }
.member-summary-card:hover { transform: translateY(-2px); transition: .18s ease; box-shadow: 0 18px 42px rgba(14,58,91,.12); }
.member-thumb { width: 124px; height: 150px; object-fit: cover; border-radius: 18px; border: 1px solid rgba(126,242,255,.28); box-shadow: 0 12px 28px rgba(6,22,41,.18); }
.text-link { color: #0b66a0; text-decoration: underline; font-weight: 800; }
.youtube-card { margin-top: 18px; background: linear-gradient(135deg, #071629, #0e3a5b); color: white; border-color: rgba(126,242,255,.22); }
.youtube-card h3 { color: white; }
.youtube-card p { color: #dff4ff; }
.youtube-card .button { background: #ff0033; color: white; }
@media (max-width: 760px) { .member-profile { grid-template-columns: 1fr; } .member-photo { max-width: 320px; } .member-summary-card { grid-template-columns: 1fr; } .member-thumb { width: 128px; height: 154px; } }