/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --header-height: 80px;
    /* 移动优先：默认宽度 */
    --drawer-width: 260px;
    --drawer-collapsed: 56px;
    --icon-column: var(--drawer-collapsed);
    /* Color palette (Blue-gray + White card) */
    --color-header-bg: rgba(255,255,255,0.56); /* slightly more transparent */
    --color-header-text: #092029; /* darker slate for contrast */
    --sidebar-alpha: 0.4; /* control sidebar translucency */
    --color-sidebar-bg: rgba(10,25,47,var(--sidebar-alpha)); /* deep blue-gray translucent */
    --color-sidebar-top: rgba(12,32,58,calc(var(--sidebar-alpha) + 0.06));
    --accent-rgb: 0,123,255; /* electric blue accent */
    --card-bg: rgba(255,255,255,0.4); /* white translucent cards */
    --card-text: #102027;
    --glass-border: rgba(255,255,255,0.06);
    --header-title-color: rgba(9,32,41,0.3); /* title with 0.3 opacity */
}

/* 平板及以上（与现有 768px 断点一致） */
@media (min-width: 768px) {
    :root {
        --drawer-width: 320px;
    }
}

/* 桌面大屏（与常见 1200px 宽度一致） */
@media (min-width: 1200px) {
    :root {
        --drawer-width: 380px;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    line-height: 1.6;
    color: #502c2c;
    /* 使用 assets/background.jpg 作为页面背景，并在其上叠加轻微渐变以保持可读性 */
    background-color: #f0f8ff;
    background-image: 
        linear-gradient(rgba(240,248,255,0.6), rgba(230,242,255,0.6)),
        url("../assets/background.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

/* 容器样式 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
.header {
    /* frosted glass header: neutral frosted background */
    background-color: var(--color-header-bg);
    color: var(--color-header-text);
    padding: 20px 0;
    box-shadow: 0 6px 20px rgba(16,32,48,0.06);
    position: sticky;
    top: 0;
    z-index: 100;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background-clip: padding-box; /* avoid blur bleeding under borders */
    border-bottom: 1px solid var(--glass-border);
}

/* 侧边栏导航（左侧） */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: var(--drawer-width); /* 占位宽度，确保主内容布局稳定 */
    max-width: 80%;
    color: #fff;
    z-index: 120;
    min-width: var(--drawer-collapsed);
    overflow: hidden; /* 防止折叠态时子元素（背景/边框）溢出侧栏边缘 */
}

/* 内层真正展示视觉背景与宽度变化的容器 */
.sidebar-inner {
    height: 100%;
    box-sizing: border-box; /* ensure padding doesn't increase visual height */
    padding-top: var(--header-height); /* reserve space inside the inner background for header */
    position: relative; /* allow absolute footer inside */
    /* deep translucent sidebar for contrast */
    background-color: var(--color-sidebar-bg);
    background-image: linear-gradient(to bottom, var(--color-sidebar-top), var(--color-sidebar-bg));
    box-shadow: 2px 0 12px rgba(0,0,0,0.08);
    transition: width 0.26s cubic-bezier(.2,.9,.3,1), box-shadow 0.2s ease;
    width: var(--drawer-width);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-clip: padding-box;
    border-right: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}

/* Allow footer to escape clipping if necessary and sit above other layers */
.sidebar-inner {
    /* keep footer contained by default to avoid visual leakage/strips */
    overflow: hidden;
}

.sidebar-footer {
    z-index: 220; /* make sure footer (and its logo) sits above other sidebar elements */
}

/* 折叠时收窄内层容器至 collapsed 宽度（外层 sidebar 保持占位） */
body:not(.drawer-open) .sidebar-inner {
    width: var(--drawer-collapsed);
}

.sidebar .main-nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    /* 去掉左右 padding，让网格列控制图标位置 */
    padding: 0;
    gap: 6px;
}

.sidebar .main-nav a {
    color: #fff;
    display: grid;
    grid-template-columns: var(--icon-column) 1fr; /* 固定图标列 + 标签列 */
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 6px;
    transition: padding 0.22s ease, background-color 0.18s ease;
}

.sidebar .main-nav a:hover,
.sidebar .main-nav a.active {
    background-color: rgba(var(--accent-rgb), 0.08);
}

/* 侧栏始终保持完整宽度（图标列在固定位置），通过折叠标签列实现收起视觉效果 */
/* sidebar 宽度始终为 --drawer-width，以保证图标 x 位置一致 */

/* 收起状态：仅隐藏文字标签，不影响图标可见性。不要将整个 nav 隐藏（避免图标一起被隐藏） */
body:not(.drawer-open) .sidebar .main-nav {
    opacity: 1; /* 保持可见，只是内容受限 */
    visibility: visible;
}

/* 收起态：隐藏文本标签但保持图标列对齐，避免跳动 */
body:not(.drawer-open) .sidebar .main-nav a {
    /* 折叠态：减少水平内边距以避免背景/边框溢出 */
    padding: 8px 4px;
}

/* 折叠态：所有 nav 图标往左偏 6px（SVG + img.uni-logo）*/
body:not(.drawer-open) .sidebar .main-nav svg.icon,
body:not(.drawer-open) .sidebar .main-nav img.uni-logo {
  transform: translateX(-10px);
  transition: transform 0.18s ease;
}

/* label visibility handled via opacity/visibility later to allow smooth transitions */

/* 当鼠标进入侧栏时（即将由 JS 处理开/关），先给视觉上的提示 */
.sidebar:hover {
    box-shadow: 2px 0 18px rgba(0,0,0,0.12);
}

/* 主区域和 header 随侧边栏宽度变化而移动，避免遮挡 */
.header,
.main-content,
.footer {
    transition: margin-left 0.28s cubic-bezier(.2,.9,.3,1);
    margin-left: var(--drawer-collapsed);
}

body.drawer-open .header,
body.drawer-open .main-content,
body.drawer-open .footer {
    margin-left: var(--drawer-width);
}

/* 侧栏由 hover 控制，不再需要可点击的 drawer toggle 元素 */

/* 极窄屏幕下适当减小折叠宽度以保证内容不被挤压 */
@media (max-width: 360px) {
    :root {
        --drawer-collapsed: 40px;
    }
}

/* 导航项样式（支持图标） */
.sidebar .main-nav ul li {
    display: flex;
    align-items: center;
}

/* nav link layout is handled above using CSS grid (fixed icon column) */

.sidebar .main-nav svg.icon {
    width: 20px;
    height: 20px;
    justify-self: center; /* 图标在其列中居中，保持 x 位置稳定 */
    transition: transform 0.22s cubic-bezier(.2,.9,.3,1), opacity 0.18s ease;
}

/* Make the uni-logo used in the about link behave like the svg icons */
.sidebar .main-nav img.uni-logo{ width: 50px; height: 50px; }
.sidebar .main-nav .uni-logo {
    width: 50px;
    height: 50px;
    display: block;
    justify-self: center;
    align-self: center;
    transition: transform 0.22s cubic-bezier(.2,.9,.3,1), opacity 0.18s ease;
}

/* Support collapsed state sizing for the uni-logo */
body:not(.drawer-open) .sidebar .main-nav img.uni-logo,
body:not(.drawer-open) .sidebar .main-nav .uni-logo {
    width: min(50px, var(--icon-column));
    height: min(50px, var(--icon-column));
}

/* Make the footer/about label behave like other nav labels when placed inside main-nav */
.sidebar .main-nav a .seu-label {
    transition: opacity 0.18s ease, transform 0.18s ease;
    opacity: 1;
    transform: translateX(0);
    max-width: 999px;
    white-space: nowrap;
    overflow: hidden;
}
body:not(.drawer-open) .sidebar .main-nav a .seu-label {
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    max-width: 0;
}

/* 标签的入/出场：使用 opacity + transform，以获得更平滑的过渡 */
.sidebar .main-nav a .label {
    transition: opacity 0.18s ease, transform 0.18s ease;
    opacity: 1;
    transform: translateX(0);
    max-width: 999px;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar .main-nav a .seu-label {
    transition: opacity 0.18s ease, transform 0.18s ease;
    opacity: 1;
    transform: translateX(0);
    max-width: 999px;
    white-space: nowrap;
    overflow: hidden;
}

body:not(.drawer-open) .sidebar .main-nav a .label {
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none; /* 折叠时标签不可交互 */
    max-width: 0; /* 收起时把标签列宽度收缩为0，避免图标移动 */
}

body:not(.drawer-open) .sidebar .main-nav a .seu-label {
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none; /* 折叠时标签不可交互 */
    max-width: 0; /* 收起时把标签列宽度收缩为0，避免图标移动 */
}


/* 标签的入/出场：使用 opacity + transform，以获得更平滑的过渡 */
.sidebar .main-nav a .label {
    transition: opacity 0.18s ease, transform 0.18s ease;
    opacity: 1;
    transform: translateX(0);
    max-width: 999px;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar .main-nav a .seu-label {
    transition: opacity 0.18s ease, transform 0.18s ease;
    opacity: 1;
    transform: translateX(0);
    max-width: 999px;
    white-space: nowrap;
    overflow: hidden;
}

/* 遮罩层移除：侧栏仅由 hover 控制 */

/* 将主内容向右移动，给侧边栏留空间 */
.main-content {
    padding: 40px 0;
    margin-left: 0; /* 由 drawer 控制展示，不强制占位 */
}

.header h1 {
    font-size: 2rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    color: var(--header-title-color);
}

.main-nav ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
}

.main-nav li {
    margin-right: 20px;
    margin-bottom: 5px;
}

/* When a nav item has a TOC, stack its contents vertically so the sublist sits below the label */
.main-nav li.has-toc {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.main-nav li.has-toc > a {
    /* keep nav link appearance, but allow space for sublist underneath */
    padding-bottom: 6px;
}

/* place a small toggle button to the right of the nav label for collapsing the sublist */
.main-nav li.has-toc {
    position: relative;
}

.main-nav li.has-toc > .toc-toggle {
    position: absolute;
    right: 6px;
    top: 8px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 4px;
}

.main-nav li.has-toc > .toc-toggle[aria-expanded="true"] {
    transform: rotate(90deg);
}

/* hide toggle in collapsed sidebar */
body:not(.drawer-open) .main-nav li.has-toc > .toc-toggle {
    display: none;
}

.main-nav a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.3s;
}

.main-nav a:hover,
.main-nav a.active {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 主内容区域样式 */
.main-content {
    padding: 40px 0;
}

.content-section {
    /* frosted card over background */
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    border-left: 4px solid rgba(var(--accent-rgb), 0.22);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    display: none;
}

.content-section.active {
    display: block;
}

.content-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.2);
}

.content-section h2 {
    color: #2980b9;
    margin-bottom: 20px;
    font-size: 1.8rem;
    border-bottom: 2px solid #e6f2ff;
    padding-bottom: 10px;
}

/* 修复锚点被 header 遮挡：为每个目标元素添加滚动偏移 */
.content-section {
    scroll-margin-top: calc(var(--header-height) + 12px);
}

.section-content {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.text-content {
    flex: 1 1 60%;
    min-width: 300px;
}

.text-content p {
    margin-bottom: 15px;
    line-height: 1.8;
}

.image-content {
    flex: 1 1 30%;
    min-width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.feature-image:hover {
    transform: scale(1.02);
}

figcaption {
    text-align: center;
    margin-top: 10px;
    font-style: italic;
    color: #7f8c8d;
}
/* 页脚样式 */
.footer {
    background-color: transparent; /* transparent background so only text remains */
    color: #fff;
    padding: 30px 0;
    text-align: center;
    margin-top: 40px;
    box-shadow: none; /* remove blocky shadow */
    margin-top: auto; /* 让 footer 推到底部（body flex 布局） */
}

.footer p {
    margin-bottom: 10px;
}

.footer a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted #fff;
    transition: all 0.3s;
}

.footer a:hover {
    color: #e6f2ff;
    border-bottom-color: #e6f2ff;
}

    /* footer: slight background on hover */
    .footer:hover {
        background-color: rgba(25, 128, 185, 0.06);
        transition: background-color 220ms ease;
    }

/* 手风琴样式 */
.accordion {
    margin-top: 20px;
}

.accordion-item {
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);
    background-color: #fff;
    transition: box-shadow 0.3s;
}

.accordion-item:hover {
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}

.accordion-header {
    background-color: #e6f2ff;
    padding: 15px;
    cursor: pointer;
    font-weight: 600;
    color: #2980b9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
}

.accordion-header:hover {
    background-color: #d6ebff;
}

.accordion-header::after {
    content: '+';
    font-size: 1.2rem;
    transition: transform 0.3s;
}

.accordion-header.active::after {
    content: '-';
    transform: rotate(180deg);
}

.accordion-content {
    padding: 0 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.accordion-content.active {
    padding: 15px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header h1 {
        font-size: 1.8rem;
    }

    .main-nav ul {
        flex-direction: column;
        display: none; /* 默认隐藏 */
        width: 100%;
        text-align: center;
        background-color: #2980b9;
        border-radius: 0 0 8px 8px;
        padding: 10px 0;
        margin-top: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .main-nav.expanded ul {
        display: flex; /* 展开时显示 */
    }
    
    .main-nav li {
        margin-right: 0;
        margin-bottom: 8px;
    }

    .menu-icon {
        display: block; /* 在小屏幕上显示 */
        color: #fff;
        font-size: 1.8rem;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: rgba(255, 255, 255, 0.2);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s;
    }
    
    .menu-icon:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }
    
    .section-content {
        flex-direction: column;
    }
    
    .content-section {
        padding: 20px;
    }
    /* 小屏幕下保留侧边栏为抽屉（缩为竖条），不隐藏 */
    .sidebar {
        display: block;
    }
    .main-content {
        margin-left: 0;
    }
}

.grid {
  display: grid;
  grid-template-columns: 80px 1fr; /* 适当增大第一列宽度以容纳“组长：”等 */
  gap: 6px 12px;
  align-items: center;
}

/* 使第二列（有 class person 的单元格）成为左右两端布局 */
.grid .person {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 名字靠左，负责标签靠右 */
.grid .person .name {
  /* 如果姓名很长可允许换行，或用 white-space 控制不换行 */
  white-space: nowrap;
  margin-right: 8px;
}

.grid .person .role {
  white-space: nowrap;
  color: #333; /* 可自定义颜色 */
}

/* Sidebar footer (global, not nested) */
.sidebar-footer {
    position: relative; /* participate in normal sidebar flow */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px;
    margin-bottom: 14px; /* keep spacing from bottom when sidebar is tall */
}

/* TOC injected as sublists under existing .main-nav items */
.main-nav .toc-sublist {
    list-style: none;
    padding-left: calc(var(--icon-column) + 8px);
    margin: 0 8px 0 0;
    max-height: 0;              /* collapsed by default */
    overflow: hidden;          /* hide content when collapsed */
    transition: max-height 260ms ease, opacity 200ms ease, margin-top 200ms ease;
    opacity: 0;
}

.main-nav li.expanded > .toc-sublist {
    max-height: 480px;         /* allow it to expand */
    opacity: 1;
    margin-top: 6px;
}

.main-nav .toc-sublist li a {
    display: block;
    color: #eaf6ff;
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.82rem; /* compact */
    line-height: 1.15; /* reasonable line height to avoid jitter */
}

.main-nav .toc-sublist li a:hover {
    background-color: rgba(255,255,255,0.03);
}

/* Keep TOC hidden when sidebar is visually collapsed */
body:not(.drawer-open) .main-nav .toc-sublist {
    max-height: 0 !important;
    opacity: 0 !important;
}

/* Reduce gap between main nav label and sublist for items with a TOC */
.main-nav li.has-toc > a {
    padding-bottom: 2px;
}

/* In collapsed sidebar the footer's left/right inset reduces available width and
   can clip a large logo. Remove the inset/padding so the footer uses full collapsed width. */
/* In collapsed sidebar avoid expanding footer outside the sidebar; only reduce internal padding */
body:not(.drawer-open) .sidebar-footer {
    padding-left: 0;
    padding-right: 0;
}

.sidebar-footer .about-link {
    display: grid;
    grid-template-columns: var(--icon-column) 1fr;
    gap: 10px;
    align-items: center;
    color: #fff;
    text-decoration: none;
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background-color 0.18s ease;
}

/* Match padding transition behavior with main-nav items so footer shifts smoothly on open/close */
body:not(.drawer-open) .sidebar-footer .about-link {
    padding: 8px 4px;
}

body.drawer-open .sidebar-footer .about-link {
    padding: 8px 8px;
}

.sidebar-footer .about-link:hover,
.sidebar-footer .about-link.active {
    background-color: rgba(var(--accent-rgb), 0.08);
}

.sidebar-footer .uni-logo {
    /* Keep the footer logo aligned with other nav icons and stable in place.
       Use the same visual size/transition as main nav icons but do not absolute-position. */
    position: static;
    top : 0px;
    left: 0px;
    width: 10px; /* enlarged as requested */
    height: 10px;
    max-width: none;
    display: block;
    justify-self: center;
    align-self: center;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(.2,.9,.3,1), opacity 0.18s ease;
}

/* Slight horizontal move when the footer link is active, matching the subtle movement of other tabs */
.sidebar-footer .about-link.active .uni-logo {
    transform: none; /* do not shift logo when the link becomes active */
}

/* Add a consistent left indicator for active items so '关于我们' aligns with main nav */
.sidebar .main-nav a,
.sidebar-footer .about-link {
    border-left: 6px solid transparent; /* make indicator wide enough to wrap larger icons */
    box-sizing: border-box;
}

.sidebar .main-nav a.active {
    border-left-color: rgba(var(--accent-rgb), 0.9);
}
/* For the footer about-link, keep only the subtle background highlight when active; remove left border */
.sidebar-footer .about-link.active {
    border-left-color: transparent;
    background-color: rgba(var(--accent-rgb), 0.08);
}

/* Special styling: for the About item, remove the blue left border and instead
   show a dark framed ring around the uni-logo when selected. Works for both
   main-nav placement and footer placement of the about link. */
.sidebar .main-nav a[href="#about"].active,
.sidebar-footer .about-link.active {
    border-left-color: transparent; /* remove blue stripe */
}

.sidebar .main-nav a[href="#about"].active .uni-logo,
.sidebar-footer .about-link.active .uni-logo {
    /* dark framed outline around just the logo */
    box-shadow: 0 0 0 2px rgba(0,0,0,0.32) inset; /* inner subtle dark ring */
    border-radius: 6px; /* match logo shape; increase if logo is circular */
    background-clip: padding-box;
}

/* If you prefer an outer ring instead of inner inset, uncomment this instead:
.sidebar .main-nav a[href="#about"].active .uni-logo,
.sidebar-footer .about-link.active .uni-logo {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.22);
    border-radius: 50%;
}
*/

/* When the sidebar is collapsed and the footer link is active, extend left padding
   so the active background fully contains the larger (50x50) logo. */
body:not(.drawer-open) .sidebar-footer .about-link.active {
    /* ensure active background covers the whole icon column */
    padding-left: calc(var(--icon-column) + 8px);
}

/* Ensure the enlarged logo is centered inside the icon column when the sidebar is collapsed */
/* In collapsed state, keep the logo inside the grid flow (no absolute positioning)
   so it won't be clipped by ancestor containers. Center it in the icon column and
   clamp its size to the icon column width to avoid overflow. */
body:not(.drawer-open) .sidebar-footer .uni-logo {
    position: static;
    justify-self: center; /* center inside the icon column */
    align-self: center;
    width: min(20px, var(--icon-column));
    height: min(20px, var(--icon-column));
    margin: 0; /* reset any absolute-positioning margins */
}

/* Make the collapsed-active padding adapt to the icon column so the active background covers the icon. */
/* (replaced above) collapsed active padding now uses calc(var(--icon-column) + 8px) */


/* Small screens: if collapsed column is smaller than the logo, scale the logo down to fit. */
@media (max-width: 20px) {
    .sidebar-footer .uni-logo {
        width: 20px;
        height: 20px;
        margin-left: calc((var(--icon-column) - 32px) / 2);
        margin-right: calc((var(--icon-column) - 32px) / 2);
    }
    body:not(.drawer-open) .sidebar-footer .about-link.active {
        padding-left: calc(10px + ((var(--icon-column) - 32px) / 2));
    }
}

/* collapsed state: hide label like main-nav */
body:not(.drawer-open) .sidebar-footer .about-link .label {
    opacity: 0;
    transform: translateX(-6px);
    max-width: 0;
    pointer-events: none;
}

body.drawer-open .sidebar-footer .about-link .label {
    opacity: 1;
    transform: translateX(0);
    max-width: 160px;
}

body:not(.drawer-open) .sidebar-footer .about-link .seu-label {
    opacity: 0;
    transform: translateX(-6px);
    max-width: 0;
    pointer-events: none;
}

body.drawer-open .sidebar-footer .about-link .seu-label {
    opacity: 1;
    transform: translateX(0);
    max-width: 160px;
}

@media (max-width: 480px) {
    .header h1 {
        font-size: 1.5rem;
    }
    
    .content-section {
        padding: 15px;
    }
}


/* 添加淡入动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.8s ease forwards;
}