/* ===========================================
   基础样式设置 - 控制整体页面布局和全局样式
   =========================================== */
body {
    /* 使用Flexbox实现上中下三栏布局 */
    display: flex;
    flex-direction: column;
    /* 确保页面最小高度为视口高度 */
    min-height: 100vh;
    /* 重置默认边距和内边距 */
    margin: 0;
    padding: 0;
    /* 设置全局文本颜色 */
    color: #2d3748;
    /* 设置默认字体 */
    font-family: 'Noto Sans SC', sans-serif;
    /* 全局盒模型 */
    box-sizing: border-box;
}

/*
 * 统一盒模型设置
 * 将所有元素（包括伪元素）的盒模型计算方式设置为继承父元素的值
 * 由于body已设置为border-box，这确保了整个页面的一致性
 * 使用inherit而非直接指定border-box提供了更大的灵活性
 */
*, *::before, *::after {
    box-sizing: inherit;
}

a{
    text-decoration: none; /* 移除下划线 */
}

li{
    list-style-type: none; /* 移除列表项标记 */
}

/* ===========================================
   头部导航样式 - 固定在顶部的导航栏
   =========================================== */
header {
    /* 确保导航栏在最上层，滚动时固定在顶部 */
    z-index: 100;
    position: sticky;
    top: 0;
    /* 上下内边距 */
    padding: 1rem 0;
    /* 半透明白色背景 */
    background: rgba(255,255,255,0.95);
    /* 添加轻微阴影效果 */
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    /* 背景模糊效果 - 毛玻璃效果 */
    backdrop-filter: blur(5px);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
}

header h1 {
    /* 标题字体大小 */
    font-size: 1.5rem;
    margin: 0;
}

header h1 a {
    color: #2d4831;
}

/* ===========================================
   主要内容区域样式 - 自适应中间区域
   =========================================== */
main {
    /* Flex自动扩展，填充剩余空间 */
    flex: 1;
    /* 上下内边距 */
    padding: 0;
    /* 宽度占满父容器 */
    width: 100%;
    /* 重置外边距 */
    margin: 0;
    /* 淡入动画效果 */
    animation: fadeIn 0.5s ease-out;
    /* 内容区域背景色 */
    background-color: #f8f9fa;
    /* 轻微阴影效果 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    /* 使用Flexbox垂直居中内容 */
    display: flex;
}

/* 添加main-content类的样式定义 */
.main-content {
    display: flex;
    width: 100%;
}
/* ===========================================
   主要内容区域样式 - flash消息样式
   =========================================== */
.flash-messages {
    /* 固定位置 */
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    /* 内边距 */
    padding: 10px 20px;
    /* 圆角 */
    border-radius: 5px;
    /* 字体大小 */
    font-size: 16px;
    /* 字体加粗 */
    font-weight: bold;
    /* 内联元素居中 */
    display: inline-block;
    /* 动画效果 */
    animation: slideInAndOut 3.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    /* 动画结束后元素不保留 */
    animation-fill-mode: forwards;
    z-index: 1000;
}

/* Flash消息公共样式 */
.flash-message {
    border-radius: 6px;
    transition: all 0.3s ease;
    padding: 12px 16px;
    margin-bottom: 12px;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 成功消息样式 */
.flash-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    /* 继承 .flash-message 的公共样式 */
}

/* 错误消息样式 */
.flash-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    /* 继承 .flash-message 的公共样式 */
}

/* 警告消息样式 */
.flash-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    /* 继承 .flash-message 的公共样式 */
}

/* 信息消息样式 */
.flash-info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    /* 继承 .flash-message 的公共样式 */
}

/* 悬停效果 */
.flash-success:hover, .flash-error:hover, .flash-warning:hover, .flash-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 添加slideIn动画定义 */
@keyframes slideInAndOut {
    0% { transform: translate(-50%, -20px); opacity: 0; }
    10% { transform: translate(-50%, 0); opacity: 1; }
    20% { transform: translate(-50%, 0); opacity: 1; }
    70% { transform: translate(-50%, 0); opacity: 1; }
    85% { transform: translate(-50%, 0); opacity: 0.5; }
    100% { transform: translate(-50%, 0); opacity: 0; visibility: hidden; }
}

/* ===========================================
   页脚样式 - 固定在底部
   =========================================== */
footer {
    /* 文本居中对齐 */
    text-align: center;
    /* 内边距设置 */
    padding: 0.5rem;
    /* 文本颜色 */
    color: #718096;
    /* 字体大小 */
    font-size: 0.8rem;
    /* 半透明白色背景 */
    background: rgba(255,255,255,0.9);
    /* 顶部轻微阴影 */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    /* 自动 margin-top 确保页脚在底部 */
    margin-top: auto;
    z-index: 99;
}

/* 页脚链接样式 */
footer a {
    color: #718096;
    transition: all 0.2s ease; /* 平滑过渡效果 */
}

footer a:hover {
    color: #2c5282; /* 加深颜色 */
    text-decoration: underline; /* 悬停时下划线 */
    text-underline-offset: 2px; /* 下划线偏移 */
}