:root {
            --primary-purple: rgb(102, 8, 118);
            --accent-blue: rgb(5, 25, 100);
            --tech-dark: #111827;
            --tech-accent: #3b82f6;
            --text-dark: #1a1a1a;
            --text-gray: #666;
            --bg-light: #f9f9fb;
            --white: #ffffff;
            --border-color: #e1e1e1;
            --container-width: 1200px;}

        * { margin: 0; padding: 0; box-sizing: border-box;}
        body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--text-dark); background-color: var(--bg-light); line-height: 1.6;}
        a { text-decoration: none; color: inherit; transition: all 0.3s;}
        ul { list-style: none;}
        
        .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px;}

        /* --- LAYOUT CONFIGURATION --- */
        .layout-container {
            display: grid;
            grid-template-columns: 240px 1fr; /* 左侧栏固定，右侧自适应 */
            gap: 40px;
            padding: 50px 10px 80px;
            align-items: start;
            }

        /* --- SIDEBAR STYLES --- */
        .sidebar { position: sticky; top: 130px;}
        
        /* Search Box */
        .search-box { position: relative; margin-bottom: 30px;}
        .search-box input {
            width: 100%; padding: 12px 15px 12px 40px; border: 1px solid #ddd;
            border-radius: 6px; outline: none; transition: border 0.3s;}
        .search-box input:focus { border-color: var(--primary-purple);}
        .search-box i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #999;}

        /* Category Menu */
        .category-title { font-size: 14px; font-weight: 700; color: #999; text-transform: uppercase; margin-bottom: 15px; letter-spacing: 1px;}
        .category-menu li { margin-bottom: 8px;}
        .cat-link {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 15px; background: var(--white); border-radius: 6px;
            border: 1px solid transparent; font-weight: 600; color: var(--text-gray); font-size: 15px;}
        .cat-link:hover, .cat-link.active {
            background: var(--white); color: var(--primary-purple);
            border-color: var(--primary-purple); box-shadow: 0 4px 10px rgba(102, 8, 118, 0.08);}
        .cat-count { background: #eee; font-size: 12px; padding: 2px 8px; border-radius: 10px; color: #666;}
        .cat-link.active .cat-count { background: var(--primary-purple); color: #fff;}

        /* --- NEWS CONTENT AREA --- */
        .news-section-header {
            display: flex; justify-content: space-between; align-items: flex-end;
            margin-bottom: 25px; padding-bottom: 10px; border-bottom: 2px solid #eee;}
        .mod-title { font-size: 24px; font-weight: 800; color: var(--accent-blue); position: relative;}
        .mod-title::after {
            content: ''; position: absolute; bottom: -12px; left: 0; 
            width: 60px; height: 3px; background: var(--primary-purple);}
        .view-all { font-size: 14px; font-weight: 600; color: var(--primary-purple);}
        .view-all:hover { text-decoration: underline;}

        /* General Card Styles */
        .news-grid { display: grid; gap: 30px; margin-bottom: 60px;}
        .news-card {
            background: var(--white); border-radius: 8px; overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: transform 0.3s, box-shadow 0.3s;
            display: flex; flex-direction: column; height: 100%; border: 1px solid #f0f0f0;}
        .news-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1);}
        
        .card-img-wrapper { position: relative; height: 200px; overflow: hidden;}
        .card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s;}
        .news-card:hover .card-img-wrapper img { transform: scale(1.05);}
        
        .tag {
            position: absolute; top: 15px; left: 15px; padding: 4px 12px;
            font-size: 12px; font-weight: 700; color: #fff; border-radius: 20px; text-transform: uppercase;
            z-index: 2; letter-spacing: 0.5px;}
        /* Tag Colors */
        .tag.research { background: linear-gradient(135deg, #3b82f6, #2563eb);}
        .tag.dept { background: linear-gradient(135deg, var(--primary-purple), #4a044e);}
        .tag.alumni { background: linear-gradient(135deg, #f59e0b, #d97706);}
        .tag.student { background: linear-gradient(135deg, #10b981, #059669);}

        .card-body { padding: 25px; flex: 1; display: flex; flex-direction: column;}
        .news-meta {font-size: 13px;color: #888;/* margin-bottom: 10px; */display: flex;align-items: center;gap: 10px;}
        .news-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; line-height: 1.4; color: var(--text-dark);}
        .news-excerpt { font-size: 14px; color: #666; margin-bottom: 20px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
        .read-more { font-size: 13px; font-weight: 700; color: var(--accent-blue); text-transform: uppercase;}

        /* --- HERO: TOP STORY --- */
        .hero-story { 
            display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; 
            background: var(--white); border-radius: 12px; overflow: hidden; 
            box-shadow: 0 5px 20px rgba(0,0,0,0.08); margin-bottom: 60px; 
            border: 1px solid #eee;}
        .hero-img { height: 100%; min-height: 350px; position: relative;}
        .hero-img img { width: 100%; height: 100%; object-fit: cover;}
        .hero-content { padding: 40px; display: flex; flex-direction: column; justify-content: center;}
        .hero-title { font-size: 28px; font-weight: 800; color: var(--accent-blue); margin: 15px 0;}
        .hero-excerpt { font-size: 16px; color: #555; margin-bottom: 25px;}
        
/* --- MODULE 1: RESEARCH FRONTIERS (修复版) --- */
        .tech-section {
            background: transparent; /* 去除深色背景 */
            padding: 0; 
            margin-bottom: 60px;
            border-radius: 0;}
        .tech-section::before { display: none;}

        /* 标题颜色回归正常 */
        .tech-section .mod-title { color: var(--accent-blue); border-bottom: none;}
        .tech-section .mod-title::after { background: var(--primary-purple);}
        .tech-section .view-all { color: var(--primary-purple);}
        
        .research-grid {
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 30px;}

        /* 核心修复：使用 Grid 布局卡片内部，防止重叠 */
        .research-card {
            background: var(--white); 
            border: 1px solid #e1e1e1; /* 清爽的细边框 */
            border-radius: 8px; 
            padding: 20px; 
            
            display: grid; 
            /* 关键点：左侧固定140px放图，右侧自动填满 */
            grid-template-columns: 140px 1fr; 
            gap: 20px; 
            
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.03);
            position: relative;
            overflow: hidden;}

        /* 鼠标悬停效果：加深阴影，左边框变色体现科技感 */
        .research-card:hover { 
            border-color: #d1d1d1; 
            box-shadow: 0 8px 20px rgba(0,0,0,0.08); 
            transform: translateY(-2px);
            border-left: 4px solid var(--accent-blue); /* 唯一的科技感点缀 */
            padding-left: 16px;}

        /* 图片容器 */
        .rs-img { 
            width: 100%; 
            height: 140px; /* 固定高度，保持方正 */
            border-radius: 6px; 
            overflow: hidden; 
            background: #f0f0f0;}

        .rs-img img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: transform 0.5s;}
        
        .research-card:hover .rs-img img { transform: scale(1.08);}

        /* 文字内容 */
        .rs-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;}

        .rs-meta { 
            font-size: 11px; 
            color: var(--accent-blue); /* 蓝色标签文字 */
            font-weight: 700;
            text-transform: uppercase; 
            letter-spacing: 0.5px;
            margin-bottom: 8px;
            display: inline-block;
            background: #eef2ff; /* 极淡的蓝色背景衬托 */
            padding: 3px 8px;
            border-radius: 4px;
            align-self: flex-start;}

        .rs-content h4 { 
            font-size: 18px; 
            margin-bottom: 10px; 
            font-weight: 800; 
            color: var(--text-dark); /* 标题改回深色 */
            line-height: 1.3;}
.rs-content h4 a{display: -webkit-box;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;}
        .rs-content p { 
            font-size: 13px; 
            color: #666; /* 正文灰色 */
            margin-bottom: 0;
            line-height: 1.5;
            /* 限制显示两行 */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;}

        /* 手机适配 */
        @media (max-width: 768px) {
            .research-grid { grid-template-columns: 1fr;}
            .research-card { grid-template-columns: 100px 1fr;} /* 手机上图片小一点 */
            .rs-img { height: 100px;}
        }
        /* --- MODULE 2 & 3: SPLIT (Dept & Alumni) --- */
        .split-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px;}
        
        /* List Style for Dept News */
        .list-news-item { 
            display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid #eee; 
            align-items: start;}
        .list-news-item:last-child { border: none;}
        .date-badge { 
            background: #eee; color: #333; padding: 5px 10px; border-radius: 4px; 
            text-align: center; min-width: 60px;}
        .date-day { font-size: 18px; font-weight: 800; display: block; line-height: 1;}
        .date-month { font-size: 11px; text-transform: uppercase;}
        .list-content h5 { font-size: 16px; margin-bottom: 5px; color: var(--text-dark); transition: color 0.2s;}
        .list-content h5:hover { color: var(--primary-purple); cursor: pointer;}
        
        /* --- MODULE 4: STUDENTS ACTIVITY (Masonry-ish) --- */
        .student-grid { 
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px;}

        /* --- FOOTER --- */
        @media (max-width: 768px) {
            .layout-container { grid-template-columns: 1fr;}
            .sidebar { position: static; margin-bottom: 40px;}
            .hero-story { grid-template-columns: 1fr;}
            .hero-img { height: 250px;}
            .research-grid, .split-modules, .student-grid { grid-template-columns: 1fr;}
        }