body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

/* 引入 Montserrat Black（OTF 格式） */
@font-face {
font-family: "Montserrat Black";
src: url("../fonts/Montserrat-Black.otf") format("opentype");
font-weight: 900; /* Black 字重对应 900 */
font-style: normal;
font-display: swap; /* 优化加载：先显示后备字体，加载完替换 */
}

/* 引入 Nunito Black（TTF 格式） */
@font-face {
font-family: "Nunito Black";
src: url("../fonts/Nunito-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
}

/* 引入 Nunito Regular（TTF 格式） */
@font-face {
font-family: "Nunito Regular";
src: url("../fonts/Nunito-Regular.ttf") format("truetype");
font-weight: 400; /* Regular 字重对应 400 */
font-style: normal;
font-display: swap;
}

/* color */
.bg-clolor1 {background-color: rgb(251,150,72);}
.bg-color2 {background-color: rgb(248,175,168);}
.bg-color3 {background-color: rgb(94,217,225);}
.bg-color4 {background-color: rgb(180,253,207);}
.bg-color5 {background-color: rgb(252,219,116);}
.bg-color6 {background-color: rgb(244,253,174);}
.bgpink {background-color: #F8C9C9;}
.bgyellow {background-color: #FFFAEB;}
.colblue {background-color: #8ec5fc}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  /* 滚动条宽度 */
  width: 8px;
  height: 8px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  /* 淡紫色轨道，带轻微透明度 */
  background: rgba(221, 187, 255, 0.1);
  /* 轨道圆角 */
  border-radius: 4px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  /* 淡紫色滑块 */
  background: rgba(186, 174, 250, 0.7);
  /* 滑块圆角 */
  border-radius: 4px;
  /* 滑块边框，增强层次感 */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 滚动条滑块hover状态 */
::-webkit-scrollbar-thumb:hover {
  /* 加深颜色，提升交互反馈 */
  background: rgba(178, 144, 233, 0.8);
}

/* 滚动条角落（水平和垂直滚动条交汇处） */
::-webkit-scrollbar-corner {
  background: transparent;
}

/* 作用于整个页面的渐变背景 */
body {
  margin: 0; /* 移除默认边距，避免渐变周围出现白边 */
  min-height: 100vh; /* 确保背景至少覆盖整个屏幕高度 */
  background-image: linear-gradient(-20deg, #d7c6f4 0%, #fdffdb 100%);
  background-attachment: fixed; /* 可选：固定背景，滚动时不重复 */
}

/* 页面lead */
.lead-img-container {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.lead-fullpage-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

/* ①menu导航栏css ↓*/
.navbar {
    background-color: #9d7bc7; /* 浅紫色主体 */
    padding: 0;
    border: 3px solid #7e5aad; /* 边框颜色 */
    box-shadow: 4px 4px 0 #7c4da8; /* 像素阴影 */
}

.navbar-brand {
    color: #f0e6ff;
    font-size: 1.7rem;
    font-weight: bold;
    text-shadow: 2px 2px 0 #7a57a8; /* 像素文字阴影 */
}

.navbar-nav .nav-link {
    color: #f0e6ff;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0.6rem;
    padding: 8px 12px;
    border: 2px solid transparent;
    transition: all 0.1s ease; /* 像素风格快速过渡 */
    text-shadow: 2px 2px 0 #7a57a8;
}

.navbar-nav .nav-link:hover {
    color: #ffffff;
    background-color: #8e66c3; /* 悬浮时颜色加深 */
    border-color: #decbf9; /* 淡紫色边框突出像素感 */
    transform: translate(-1px, -1px); /* 上移增强立体感 */
    box-shadow: 2px 2px 0 #7c4da8;
}

/* 下拉菜单样式（突出像素风） */
.dropdown-menu {
    background-color: #e8e0f7; /* 淡紫色下拉框 */
    border: 3px solid #7c4da8; /* 粗边框强化像素感 */
    margin-top: 2px;
    padding: 0;
    box-shadow: 4px 4px 0 #63448b; /* 明显阴影增强立体感 */
    transition: all 0.15s ease;
}

.dropdown-item {
    color: #5a327f; /* 深紫色文字 */
    font-size: 1rem;
    font-weight: 500;
    padding: 8px 16px;
    border-bottom: 2px solid #d0c0e5; /* 分隔线强化像素感 */
    transition: all 0.1s ease;
}

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

.dropdown-item:hover {
    background-color: #ad8ed4; /* 恢复之前的下拉项悬浮颜色 */
    color: #ffffff; /* 白色文字突出 */
    transform: translate(2px, 0); /* 像素风格位移 */
}

/* 移动端菜单样式 */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #b394e4; /* 浅紫色背景 */
        border: 2px solid #7a57a8;
        margin-top: 4px;
        padding: 8px;
        box-shadow: 3px 3px 0 #7c4da8;
    }
    .navbar-nav .nav-link {
        padding: 8px 12px;
        margin: 2px 0;
    }
}
/* 像素风格按钮图标 */
.navbar-toggler {
    border: 2px solid #986cd1;
    box-shadow: 2px 2px 0 #63448b;
    background-color: #ab86d9;
}
/* ①menu导航栏样式  ↑ */


/* ②展示页面css  ↓ */
/* 基础样式 */
body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #f9fafb;
    color: #1f2937;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit;
    image-rendering: pixelated;
    overflow-x: hidden;
}

/* 导航圆环样式 - 加大左侧边距 */
.nr-ring-container {
    position: fixed;
    left: clamp(3.5rem, 10vw, 10rem); /* 左侧导航栏左侧边距加大 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.nr-ring-segment {
    transition: all 0.2s linear;
    cursor: pointer;
    stroke-linecap: square;
    stroke-linejoin: square;
}

.nr-ring-segment:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.nr-nav-text {
    fill: rgba(75, 85, 99, 0.8);
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: auto;
    transition: all 0.2s linear;
    text-shadow: 2px 2px 0 rgba(255,255,255,0.8);
    font-smooth: never;
    -webkit-font-smoothing: none;
}

.nr-nav-text:hover {
    fill: rgba(55, 65, 81, 1);
}

.nr-nav-text.active {
    fill: rgba(55, 65, 81, 1);
    font-size: 18px !important;
    font-weight: 900;
    text-shadow: 2px 2px 0 rgba(255,255,255,0.8);
}

.nr-nav-tooltip {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
    border: 2px solid #0003;
}

a, .nr-nav-link {
    color: inherit;
    text-decoration: none;
}

a:hover, a:active, a:focus,
.nr-nav-link:hover, .nr-nav-link:active, .nr-nav-link:focus {
    text-decoration: none;
}

.nr-ring-segment:hover + .nr-nav-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* 背景和内容样式 - 调整右边距，恢复文字间距 */
.nr-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(#f0f0f0 1px, transparent 1px),
                        linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
    background-size: 20px 20px;
}

.nr-content-container {
    background-color: #fff;
    border-radius: 0;
    box-shadow: 8px 8px 0 rgba(128, 0, 128, 0.6);
    border: 3px solid #000;
    max-width: 1000px;
    width: clamp(50%, 63vw, 66%); /* 内容区宽度调整 */
    margin: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    margin-right: clamp(2rem, 5vw, 5rem); /* 右侧内容区右边距减小 */
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.nr-content-section {
    padding: 3rem; /* 恢复原始内边距 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 3px solid #000;
}

.nr-content-section:last-child {
    border-bottom: none;
}

.nr-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.nr-scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.textztbf { 
    font-size: 1.25rem;
    line-height: 2;
    letter-spacing: 0.06em; /* 恢复原始文字间距 */
    text-shadow: 1px 1px 0 #fff;
    font-smooth: never;
    -webkit-font-smoothing: none;
    margin: 0; /* 移除额外外边距 */
    padding: 0; /* 移除额外内边距 */
}

h2 {
    text-shadow: 3px 3px 0 rgba(128, 0, 128, 0.4);
    font-smooth: never;
    -webkit-font-smoothing: none;
    letter-spacing: -0.02em;
    border-bottom: 3px solid #000;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 0; /* 恢复标题间距 */
}

:root {
    --primary: #66CCFF;
    --secondary: #FFCC66;
    --accent: #66CC99;
    --warning: #CC6666;
    --purple-shadow: rgba(128, 0, 128, 0.6);
    --black-border: #000;
}
/* ②展示页面css  ↑ */

/* ③成员member页面css  ↓ */
/* 基础样式保持不变 */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
html {
    line-height: 1.5;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}
body {
    margin: 0;
    line-height: inherit;
    background-color: #f0f0f0;
    padding: 0;
    min-height: 100vh;
}

/* 像素风格核心样式 */
.pixel-border {
    border: 4px solid #424242;
    box-shadow: 5px 5px 0 #9c27b0, 5px 5px 0 4px #424242;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}
.pixel-border::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: -4px;
    bottom: -4px;
    background: #d000ff0e;
    z-index: -1;
}
.pixel-border:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 #7e5aad, 7px 7px 0 4px #424242;
}
.pixel-avatar {
    image-rendering: pixelated;
    border: 4px solid #fff;
    box-shadow: 4px 4px 0 #666;
    transition: transform 0.2s ease;
    max-width: 100%;
    max-height: 100%;
}
.pixel-border:hover .pixel-avatar {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #666;
}
.pixel-section-title {
    position: relative;
    display: inline-block;
    padding: 4px 12px;
    background-color: #fff;
    border: 3px solid #424242;
    box-shadow: 4px 4px 0 #9c27b0;
    margin-bottom: 16px;
}

/* 布局样式 - 加大左侧边距 */
.page-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem; /* 加大整体左右内边距 */
}

/* 左侧导航栏样式 */
.sidebar-nav {
    width: 16rem;
    flex-shrink: 0;
    padding: 2rem 0;
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    height: 100vh;
    display: flex;
    align-items: center;
    margin-right: 3rem; /* 增加导航栏右侧的间距（即与人物框的距离） */
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* 右侧内容区域样式 */
.content-area {
    flex: 1;
    padding: 2rem 0; /* 调整内容区上下内边距 */
}

/* 其他工具类样式 */
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1.5rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.font-medium {
    font-weight: 500;
}
.text-mem-primary {
    color: #9c27b0;
}
.hover:text-mem-primary:hover {
    color: #7b1fa2;
}
.transition-colors {
    transition: color 0.15s ease;
}
.mr-3 {
    margin-right: 0.75rem;
}
.mb-16 {
    margin-bottom: 4rem;
}
.scroll-mt-8 {
    scroll-margin-top: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-family: "Montserrat Black", sans-serif;
}
.font-bold {
    font-weight: 700;
}
.mb-8 {
    margin-bottom: 2rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.bg-white {
    background-color: #fff;
}
.rounded-none {
    border-radius: 0;
}
.p-6 {
    padding: 1.5rem;
}
.items-center {
    align-items: center;
}
.flex {
    display: flex;
}
.w-48 {
    width: 12rem;
}
.h-48 {
    height: 12rem;
}
.rounded-full {
    border-radius: 9999px;
}
.object-cover {
    object-fit: cover;
}
.mem-info-wrapper {
    position: relative;
    min-height: 200px;
    width: 100%;
}
.mem-info-content, .mem-hover-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.4s ease;
}
.mem-info-content {
    opacity: 1;
}
.mem-hover-content {
    opacity: 0;
}
.text-2xl {
    font-size: 1.8rem;
    line-height: 2rem;
    font-family: "Nunito Black", sans-serif;
}
.text-gray-600 {
    color: #757575;
}
.mt-1 {
    margin-top: 0.25rem;
}
.text-lg {
    font-size: 1.3rem;
    line-height: 1.75rem;
    font-family: "Nunito Regular", sans-serif;
}
.mt-3 {
    margin-top: 0.75rem;
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 1rem;
}
.text-gray-500 {
    color: #9e9e9e;
}
.mt-4 {
    margin-top: 1rem;
}
.text-gray-700 {
    color: #616161;
}
.mem-avatar-container {
    position: relative;
    width: 12rem;
    height: 12rem;
    overflow: hidden;
    flex-shrink: 0;
}
.mem-avatar-primary, .mem-avatar-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}
.mem-avatar-secondary {
    opacity: 0;
}
.gap-8 {
    gap: 2rem;
}
.flex-1 {
    flex: 1 1 0%;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .page-container {
    flex-direction: column;
    padding: 0 1rem; /* 移动设备上减小边距 */
    }
    .sidebar-nav {
    width: 100%;
    height: auto;
    position: static;
    transform: none;
    margin-right: 0; /* 移动设备上去除右侧间距 */
    margin-bottom: 2rem;
    }
    .content-area {
    padding: 1rem 0;
    }
}
/* ③成员member页面css  ↑ */


/* ④聊天框css  ↑ */
/* 聊天框样式 - 整合到现有样式中 */
.lt-chat-container {
    width: 100%;
    margin-top: 1.5rem;
}

.lt-message-item {
    display: flex;
    margin-bottom: 2rem;
    align-items: flex-start;
}

.lt-message-item-right {
    justify-content: flex-end;
}

.lt-message-content {
    max-width: 70%;
}

.lt-name-tag {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #121212;
    font-smooth: never;
    -webkit-font-smoothing: none;
}

.lt-name-tag-right {
    text-align: right;
}

.lt-message-box {
    background-color: #FFFFFF;
    border: 3px solid #121212;
    padding: 1.5rem;
    border-radius: 3px;
    transition: transform 0.2s ease;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}

.lt-message-box:hover {
    transform: scale(1.01);
}

.lt-pixel-left {
    box-shadow: 4px 0 0 0 #FF9F1C, 0 4px 0 0 #FF9F1C, 4px 4px 0 0 #FF9F1C;
}

.lt-pixel-right {
    box-shadow: 4px 0 0 0 #7B2CBF, 0 4px 0 0 #7B2CBF, 4px 4px 0 0 #7B2CBF;
}

.lt-message-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #121212;
    text-shadow: 1px 1px 0 #fff;
    font-smooth: never;
    -webkit-font-smoothing: none;
}

@media (min-width: 768px) {
    body {
        padding: 4rem;
    }
}
/* ④聊天框css  ↑ */

/* ===== 图片Footer样式 ===== */
    .image-footer {
        background-image: url('https://static.igem.wiki/teams/5844/footer/footer1.webp');
        background-size: cover; /* 改为cover以更好适应不同屏幕 */
        background-position: center bottom; 
        background-repeat: no-repeat;
        position: relative;
        width: 100%; /* 使用100%而非100vw避免横向滚动 */
        min-height: 200px; /* 设置最小高度确保内容可见 */
        margin: 0;
        padding: 0;
        padding-bottom: 40%; /* 控制背景图显示比例 */
        overflow: hidden;
        margin-top: auto; /* 这会将footer推到页面底部 */
    }
    
    .footer-overlay {
        background: rgba(0, 0, 0, 0.6);
        width: 100%;
        padding: 0px 0; /* 增加内边距让内容更舒适 */
        position: absolute;
        bottom: 0; /* 调整到底部 */
        left: 0;
        right: 0;
    }
    
    .footer-text {
        text-align: center; /* 文字居中 */
        color: white;
        padding: 0 20px;
        margin: 0 auto; /* 水平居中 */
        max-width: 1200px; /* 限制最大宽度，在宽屏上更美观 */
        padding-bottom: -20px;
    }
    
    .footer-text a {
        color: #fff;
        font-weight: bold;
        text-decoration: none;
    }
    
    .footer-text a:hover {
        text-decoration: underline;
        color: #e0e0e0;
    }