:root {
            /* colors */
            --primary-purple: rgb(102, 8, 118);
            --accent-blue: rgb(5, 25, 100);
            --text-dark: #333333;
            --text-light: #666666;
            --bg-light: #f9f9fb;
            --white: #ffffff;
            --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;}

        /* --- 3. SUB-NAV TABS (3 Columns) --- */
        .sub-nav-section {
            transform: translateY(-30px);
            margin-bottom: 20px;
            z-index: 10;
            position: relative;}
        .sub-nav-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4等分 */
            gap: 20px;}
        .sub-nav-card {
            background: var(--white);
            padding: 25px;
            text-align: center;
            border-radius: 4px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            border-bottom: 4px solid transparent;
            cursor: pointer;
            transition: all 0.3s;}
        .sub-nav-card h4 { font-size: 18px; color: var(--text-dark); margin-bottom: 5px;}
        .sub-nav-card span { font-size: 13px; color: var(--text-light);}
        
        .sub-nav-card:hover { transform: translateY(-3px);}
        .sub-nav-card.active {
            background: var(--primary-purple);
            border-bottom-color: var(--accent-blue);}
        .sub-nav-card.active h4, .sub-nav-card.active span { color: var(--white);}


        /* --- 4. LAYOUT SYSTEM (For Faculty & Postdoc) --- */
        .faculty-section { padding-bottom: 80px;}
        .layout-grid {
            display: grid;
            grid-template-columns: 280px 1fr; /* sidebar宽一点容纳checkbox */
            gap: 40px;}

        /* --- SIDEBAR STYLES (Advanced) --- */
        .sidebar {
            background: var(--white);
            padding: 25px;
            border-radius: 4px;
            border: 1px solid #e1e1e1;
            align-self: start;}
        .filter-group { margin-bottom: 35px;}
        .filter-group:last-child { margin-bottom: 0;}
        
        .filter-group h3 {
            font-size: 16px;
            color: var(--accent-blue);
            font-weight: 700;
            margin-bottom: 15px;
            border-bottom: 2px solid #eee;
            padding-bottom: 8px;
            text-transform: uppercase;}

        /* Division List */
        .division-list li, .tag-list li { margin-bottom: 8px;}
        .division-list a, .tag-list a {
            font-size: 14px;
            color: var(--text-dark);
            display: flex;
            align-items: center;}
        .division-list .bullet, .tag-list .bullet {
            width: 6px; height: 6px; background: #ddd; border-radius: 50%; margin-right: 10px;}
        .division-list a:hover, .division-list a.active, .tag-list a:hover, .tag-list a.active { color: var(--primary-purple); font-weight: 600;}
        .division-list a.active .bullet, .tag-list a.active .bullet { background: var(--primary-purple);}

        /* Checkbox List */
        .checkbox-list { display: flex; flex-direction: column; gap: 8px;}
        .checkbox-item {
            display: block; position: relative; padding-left: 28px; cursor: pointer;
            font-size: 14px; color: var(--text-light);}
        .checkbox-item input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
        .checkmark {
            position: absolute; top: 3px; left: 0; height: 16px; width: 16px;
            background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 3px;}
        .checkbox-item input:checked ~ .checkmark { background-color: var(--primary-purple); border-color: var(--primary-purple);}
        .checkmark:after {
            content: ""; position: absolute; display: none;
            left: 5px; top: 1px; width: 4px; height: 9px;
            border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);}
        .checkbox-item input:checked ~ .checkmark:after { display: block;}
        .checkbox-item:hover { color: var(--primary-purple);}

        /* Alpha A-Z Grid */ 
        .alpha-filter { display: flex; flex-wrap: wrap; gap: 4px;        justify-content: center;}
        .alpha-link {
            display: flex; justify-content: center; align-items: center;
            width: 26px; height: 26px; font-size: 11px;
            background-color: #f4f4f4; border-radius: 2px;
            font-weight: 600; color: var(--text-light);}
        .alpha-link:hover, .alpha-link.active { background: var(--primary-purple); color: #fff;}


        /* --- CONTENT AREA & GRID --- */
        .directory-header {
            display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;}
        .section-heading { font-size: 24px; color: var(--primary-purple);}
        .search-box input { padding: 10px; border: 1px solid #ddd; width: 250px; border-radius: 4px;}

        /* ========================================= */ 
        /* 全新升级：极简现代学术风卡片 */ 
        /* ========================================= */ 

        .faculty-grid {
            display: grid;
            /* 关键修改：使用 minmax(0, 1fr) 代替 1fr */
            /* 这能防止长内容强制扩大网格单元格的宽度 */
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 30px; /* 增加卡片间距，减少拥挤感 */
            padding: 20px 0;}

        .profile-card {
            background: #ffffff;
            border-radius: 16px; /* 稍微圆润一点，更亲切 */
            padding: 30px 20px;
            text-align: center;
            text-decoration: none !important;
            color: inherit !important;
            /* 超淡弥散阴影，这是高级感的来源 */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.03);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 优化卡片容器的宽度控制 */
            width: 100%;       /* 确保占满网格宽度 */
            max-width: 100%;   /* 严格限制不超出父级 */
            box-sizing: border-box;
            overflow: hidden;}

        .profile-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(102, 8, 118, 0.12); /* 悬停时透出品牌色阴影 */
            border-color: rgba(102, 8, 118, 0.1);}

        /* 头像：增加细腻的光泽感 */
        .profile-img {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            object-fit: cover;
            object-position: center 10%; /* 将头像向下调整10%，避免头顶被裁剪 */
            margin-bottom: 20px;
            border: 4px solid #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);}

        /* 文字层级优化 */
        .profile-name {
            font-size: 20px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 6px;}

        .profile-title {
            font-size: 12px;
            font-weight: 600;
            color: #660876; /* 品牌紫色 */
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 8px;}

        .profile-area {
            font-size: 14px;
            color: #888;
            margin-bottom: 15px;}

        /* --- 学术标签：彻底解决“丑盒子”问题 --- */
        .academic-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-top: auto; /* 将标签推至底部对齐 */
            padding-top: 10px;
            /* 优化标签容器宽度控制 */
            width: 100%;               /* 撑满卡片内宽度 */
            box-sizing: border-box;}

        .tag {
            /* 核心修改：去掉固定高宽，使用极简线条 */
            background: transparent;
            color: #666;
            font-size: 11px;
            padding: 3px 10px;
            border-radius: 20px;
            border: 1px solid #eee; /* 使用淡灰色边框 */
            transition: all 0.3s ease;
            /* 核心修改：允许文字换行 */
            white-space: normal;       /* 覆盖掉之前的 nowrap */
            word-wrap: break-word;     /* 允许在长单词内换行 */
            overflow-wrap: break-word;
            
            line-height: 1.4;          /* 换行后增加行高，避免拥挤 */
            display: inline-block;     /* 保持行内块特性 */
            max-width: 100%;           /* 确保单个标签也不超出卡片 */
            text-align: center;}

        /* 悬停联动：当鼠标移入卡片，标签亮起 */
        .profile-card:hover .tag {
            border-color: #660876;
            color: #660876;
            background: rgba(102, 8, 118, 0.03);}

        /* 移除原有的链接文字样式 */
        .profile-link { display: none;}


        /* --- STAFF PAGE STYLES (No Sidebar, List View) --- */
        .staff-header-wrapper { text-align: center; margin-bottom: 40px;}
        .staff-container { max-width: 1000px; margin: 0 auto; padding-bottom: 60px;}
        
        .staff-group {
            background: var(--white); border: 1px solid #e1e1e1; border-radius: 6px;
            overflow: hidden; margin-bottom: 30px;}
        .staff-group-header {
            background: #f4f6f9; color: var(--accent-blue);
            padding: 15px 25px; font-size: 18px; font-weight: 700; border-bottom: 1px solid #e1e1e1;}
        .staff-row {
            display: grid; grid-template-columns: 2fr 1.5fr 1.5fr;
            padding: 15px 25px; border-bottom: 1px solid #f0f0f0; align-items: center; font-size: 15px;}
        .staff-row:last-child { border-bottom: none;}
        .staff-row.header-row {
            background-color: var(--white); font-weight: 600; color: var(--text-light);
            font-size: 13px; text-transform: uppercase; padding-top: 20px; padding-bottom: 10px;}
        
        .col-role strong { color: var(--primary-purple);}
        .col-name { color: var(--text-dark); font-weight: 500;}
        .col-contact { font-size: 14px; color: var(--text-light);}
        .col-contact a { color: var(--primary-purple); text-decoration: underline;}

        /* Footer */
        @media (max-width: 900px) {
            .nav-menu { display: none;}
            .sub-nav-grid, .faculty-grid { grid-template-columns: 1fr;}
            .layout-grid { grid-template-columns: 1fr;}
            .sidebar { position: static; margin-bottom: 30px; width: 100%;}
            .staff-row { grid-template-columns: 1fr; gap: 8px;}
            .staff-row.header-row { display: none;}
            .alpha-filter {     justify-content: center;}
        }