/* 全局重置 & 基础样式（原有代码保留，新增/修改以下内容） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", sans-serif;
}

/* 关键1：强制显示滚动条，避免切换页面时滚动条显/隐导致宽度变化 */
body {
    background: linear-gradient(145deg, #f8f9fb, #eef2f8);
    color: #0f172a;
    line-height: 1.6;
    overflow-y: scroll; /* 强制竖滚动条始终显示，哪怕内容不足 */
    padding-top: 120px; /* 给固定定位的header预留空间，避免内容被遮挡 */
}

/* 关键2：将header固定在顶部，尺寸完全固定，永不偏移 */
#common-header {
    position: fixed; /* 固定定位，脱离文档流，不受页面内容影响 */
    top: 0;
    left: 0;
    right: 0; /* 左右铺满，避免宽度变化 */
    z-index: 999; /* 置顶，防止被其他内容覆盖 */
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    border-bottom: 1px solid #d7ddeb;
    box-shadow: 0 12px 28px rgba(17, 28, 54, 0.08);
    backdrop-filter: blur(8px);
    padding: 1rem 2rem;
    text-align: center;
    /* 固定高度，消除尺寸突变 */
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 内容垂直居中，避免高度变化 */
    /* 禁止文字换行，防止内容溢出导致高度变化 */
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
}

/* 关键3：nav也固定在header下方，尺寸固定 */
#common-nav {
    position: fixed;
    top: 80px; /* 紧贴header底部 */
    left: 0;
    right: 0;
    z-index: 998;
    background: #ffffff;
    border-bottom: 1px solid #d7ddeb;
    backdrop-filter: blur(8px);
    padding: 0.8rem 2rem;
    /* 固定高度，消除晃动 */
    height: 40px;
    display: flex;
    align-items: center; /* 内容垂直居中 */
}

#common-nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    /* 防止nav内容溢出导致宽度变化 */
    overflow-x: auto;
    scrollbar-width: none; /* 隐藏横向滚动条（可选） */
}

#common-nav ul::-webkit-scrollbar {
    display: none; /* 兼容Chrome/Safari */
}

#common-nav a {
    color: #1d3760;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 0px solid #cfd8ea;
    background: #ffffff;
    border-radius: 0;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
}

#common-nav a:hover {
    color: #064b8f;
    border-color: #99b9e6;
    background: #f3f8ff;
}

/* 公共底部样式（原有保留） */
#common-footer {
    background: rgba(255, 255, 255, 0.9);
    color: #1d3760;
    border-top: 1px solid #d7ddeb;
    box-shadow: 0 12px 28px rgba(17, 28, 54, 0.08);
    text-align: center;
    padding: 1.5rem;
    margin-top: 2rem;
}

/* 降级样式（组件加载失败）（原有保留） */
.fallback-header, .fallback-nav, .fallback-footer {
    padding: 1rem;
    background-color: #f8d7da;
    color: #721c24;
    text-align: center;
    border: 1px solid #f5c6cb;
}

/* 响应式适配（补充固定定位的适配） */
@media (max-width: 768px) {
    body {
        padding-top: 100px; /* 移动端减少header+nav总高度，适配小屏 */
    }

    #common-header {
        height: 60px; /* 移动端header高度减小 */
        padding: 0.8rem 1rem;
    }

    #common-nav {
        top: 60px; /* 对应header高度调整 */
        height: 40px;
        padding: 0.8rem 1rem;
    }

    #common-nav ul {
        flex-direction: column;
        gap: 1rem;
        height: auto; /* 移动端nav内容换行，高度自适应 */
        padding-bottom: 0.5rem;
    }
}
/* 头部样式：包含用户名和登出按钮 */
.header-inner {
    background: transparent;
    color: #0f172a;
    padding: 0 20px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: none;
}

.site-brand-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-logo-badge {
    width: 56px;
    height: 40px;
    border-radius: 4px;
    background: linear-gradient(140deg, #0b6bcb, #064b8f);
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.03em;
    box-shadow: 0 4px 10px rgba(11, 107, 203, 0.25);
}

.site-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-product-name {
    margin: 0;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #c62020;
}

.site-title {
    margin: 2px 0 0;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #1f2d45;
}

.site-desc {
    margin: 1px 0 0;
    font-size: 0.82rem;
    color: #52607a;
}

.nav-list {
    align-items: center;
}

.nav-link.active,
.nav-link[aria-current='page'] {
    color: #ffffff !important;
    background: #0b6bcb !important;
    border-color: #0b6bcb !important;
}

.header-inner .user-info {
    position: relative;
    display: flex;
    align-items: center;
}

.header-inner .user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d7ddeb;
    border-radius: 18px;
    background: #ffffff;
    color: #1f2d45;
    padding: 6px 12px;
    cursor: pointer;
}

.header-inner .user-trigger-avatar {
    font-size: 16px;
}

.header-inner .user-trigger-name {
    font-size: 14px;
}

.header-inner .user-trigger-arrow {
    font-size: 12px;
    color: #64748b;
}

.header-inner .user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 260px;
    background: #202124;
    border: 1px solid #2f3136;
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.35);
    padding: 12px;
    display: none;
    z-index: 1100;
}

.header-inner .user-info.open .user-dropdown {
    display: block;
}

.header-inner .user-card {
    background: linear-gradient(160deg, #0f172a, #0b1638);
    border: 1px solid #1f2a44;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    margin-bottom: 10px;
}

.header-inner .user-card-avatar {
    font-size: 34px;
    margin-bottom: 6px;
}

.header-inner .username {
    color: #f8fafc;
    font-size: 22px;
    line-height: 1.2;
}

.header-inner .user-email {
    color: #cbd5e1;
    font-size: 14px;
    margin-top: 4px;
    word-break: break-all;
}

.header-inner .header-link {
    display: block;
    color: #e5e7eb;
    text-decoration: none;
    padding: 9px 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 15px;
    margin-top: 4px;
}

.header-inner .header-link:hover {
    color: #ffffff;
    background: #2b2d31;
}
/* 登出按钮样式 */
.header-inner .logout-btn {
    width: 100%;
    margin-top: 8px;
    padding: 9px 10px;
    background-color: transparent;
    color: #e5e7eb;
    border: 1px solid #3f4349;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s ease;
    text-align: left;
}

.header-inner .logout-btn:hover {
    color: #ffffff;
    background-color: #2b2d31;
}
/* 子页面核心内容容器 */
.page-content {
    width: 90%;
    max-width: 1200px;
    min-height: 436px;
    margin: 0rem auto;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #d7ddeb;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(17, 28, 54, 0.08);
    /*display: flex;*/
    flex-wrap: wrap; /* 自动换行适配小屏 */
}

/* 标题样式 */
.page-content h1 {
    width: 100%;
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.8rem;
    margin-bottom: 1.5rem;
}

.page-content h2 {
    color: #38a164;
    margin: 1.2rem 0 0.8rem;
}