/* ==========================================================================
   AiCube - 主要样式文件 (Main Stylesheet)
   
   功能说明：
   - 定义全局基础样式和布局框架
   - 提供页面头部、导航、容器等核心组件样式
   - 统一管理通用UI组件（按钮、表单、通知等）
   - 建立响应式布局基础
   
   依赖关系：
   - variables.css: CSS变量定义（必须先加载）
   - utilities.css: 工具类系统
   
   注意事项：
   - 本文件为基础样式层，优先级最低
   - 避免在此文件中定义模块特定样式
   - 所有颜色、尺寸使用CSS变量，便于主题切换
   ========================================================================== */

/* 基础重置和变量定义 */
/* CSS变量已统一到 variables.css 文件中，确保样式一致性和可维护性 */

/* 引入工具类系统 (替代Bootstrap工具类) */
/* 提供常用的布局、间距、文本等工具类，避免Bootstrap样式冲突 */
@import url('utilities.css');

/* ========================================================================== */
/* 全局重置样式 (Global Reset Styles)
/* ========================================================================== */

/* 通用盒模型重置，确保所有元素使用border-box模型 */
* {
    margin: 0;                    /* 清除默认外边距 */
    padding: 0;                   /* 清除默认内边距 */
    box-sizing: border-box;       /* 使用border-box盒模型 */
}

/* HTML根元素设置，建立基础字体大小和滚动行为 */
html {
    font-size: 16px;              /* 基础字体大小，用于rem计算 */
    scroll-behavior: smooth;      /* 平滑滚动效果 */
}

/* 页面主体样式，定义全局字体、颜色和背景 */
body {
    font-family: var(--font-family);     /* 使用统一字体族 */
    line-height: var(--line-height);     /* 统一行高 */
    color: var(--text-primary);          /* 主要文本颜色 */
    background: var(--gradient-primary); /* 主要背景渐变 */
    min-height: 85vh;                    /* 最小高度，确保页面填充 */
    box-sizing: border-box;              /* 盒模型设置 */
}

/* ========================================================================== */
/* 布局容器系统 (Layout Container System)
/* ========================================================================== */

/* 主容器类，用于内容居中和响应式布局 */
.container {
    max-width: var(--container-max-width);  /* 最大宽度，防止内容过宽 */
    margin: 0 auto;                         /* 水平居中 */
    padding: 0 var(--spacing-lg);           /* 左右内边距，确保移动端显示 */
    box-sizing: border-box;                 /* 包含内边距在宽度计算内 */
}

/* ========================================================================== */
/* 页面头部组件 (Header Component)
/* ========================================================================== */

/* 主头部容器，固定定位，包含毛玻璃效果 */
.header {
    background: rgba(255, 255, 255, 0.95);  /* 半透明白色背景 */
    /* 毛玻璃效果，增强视觉层次感 */
    -webkit-backdrop-filter: blur(10px);    /* Safari/Chrome支持 */
    backdrop-filter: blur(10px);            /* 标准属性 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 底部边框 */
    
    /* 固定定位设置，始终显示在页面顶部 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;                          /* 高层级，确保在其他元素之上 */
    
    /* 视觉效果 */
    box-shadow: var(--shadow-sm);           /* 轻微阴影 */
    width: 100%;                            /* 全宽显示 */
    box-sizing: border-box;                 /* 盒模型设置 */
}

/* 头部内容容器，控制内部元素布局 */
.header-content {
    display: flex;                          /* 弹性布局 */
    align-items: center;                    /* 垂直居中对齐 */
    justify-content: space-between;         /* 两端对齐（logo左侧，导航右侧）*/
    padding: var(--spacing-md) 0;           /* 上下内边距 */
    height: 80px;                           /* 固定高度，确保一致性 */
    width: 100%;                            /* 全宽 */
    box-sizing: border-box;                 /* 盒模型设置 */
}

/* ========================================================================== */
/* Logo组件系统 (Logo Component System)
/* ========================================================================== */

/* Logo主容器，包含图标和文字 */
.logo {
    display: flex;                          /* 弹性布局 */
    align-items: center;                    /* 垂直居中对齐 */
    gap: var(--spacing-md);                 /* 图标和文字间距 */
    position: relative;                     /* 相对定位，为子元素提供定位基准 */
}

/* 公司Logo图片，使用绝对定位进行精确控制 */
.company-logo {
    width: 627px;                           /* 图片宽度 */
    height: 470px;                          /* 图片高度 */
    object-fit: contain;                    /* 保持图片比例，完整显示 */
    border-radius: var(--radius-sm);        /* 圆角效果 */
    
    /* 绝对定位设置，实现精确的视觉对齐 */
    margin-left: -470px;                    /* 负边距，向左偏移 */
    position: absolute;                     /* 绝对定位 */
    top: calc(50% + 25px);                  /* 垂直位置微调 */
    transform: translateY(-50%);            /* 垂直居中对齐 */
}

/* Logo文字容器，包含标题和副标题 */
.logo-text {
    display: flex;                          /* 弹性布局 */
    flex-direction: column;                 /* 垂直排列 */
    align-items: flex-start;                /* 左对齐 */
    margin-left: 10px;                      /* 与图片的间距 */
}

/* Logo主标题样式 */
.logo h1 {
    font-size: var(--font-size-xl);         /* 大号字体 */
    font-weight: 700;                       /* 粗体 */
    color: var(--primary-color);            /* 主色调 */
    margin: 0;                              /* 清除默认边距 */
    margin-bottom: var(--spacing-xs);       /* 底部间距 */
    
    /* 内部元素布局 */
    display: flex;                          /* 弹性布局 */
    align-items: center;                    /* 垂直居中 */
    gap: 0.5rem;                            /* 内部元素间距 */
}

/* Logo图标样式 */
.logo-icon {
    width: 48px;                            /* 图标宽度 */
    height: 48px;                           /* 图标高度 */
    object-fit: contain;                    /* 保持图标比例 */
}

/* Logo副标题样式 */
.logo .subtitle {
    font-size: var(--font-size-sm);         /* 小号字体 */
    color: var(--error-color);              /* 强调色 */
    font-weight: 400;                       /* 正常字重 */
    font-style: italic;                     /* 斜体样式 */
    font-family: 'Microsoft YaHei', sans-serif; /* 微软雅黑字体 */
    margin: 0;                              /* 清除默认边距 */
    margin-left: 20px;                      /* 左侧间距 */
}

/* ========================================================================== */
/* 导航组件系统 (Navigation Component System)
/* ========================================================================== */

/* 导航主容器 */
.nav {
    display: flex;                          /* 弹性布局 */
    gap: var(--spacing-lg);                 /* 导航项间距 */
}

/* 导航链接基础样式 */
.nav-link {
    text-decoration: none;                  /* 移除下划线 */
    color: var(--text-secondary);           /* 次要文字颜色 */
    font-weight: 500;                       /* 中等字重 */
    padding: var(--spacing-sm) var(--spacing-md); /* 内边距 */
    border-radius: var(--radius-md);        /* 圆角 */
    transition: var(--transition-normal);   /* 过渡动画 */
    position: relative;                     /* 相对定位，为伪元素提供基准 */
}

/* 导航链接悬停效果 */
.nav-link:hover {
    color: var(--primary-color);            /* 主色调文字 */
    background: rgba(79, 172, 254, 0.1);    /* 浅色背景 */
}

/* 激活状态的导航链接 */
.nav-link.active {
    color: var(--primary-color);            /* 主色调文字 */
    background: rgba(79, 172, 254, 0.15);   /* 稍深的背景 */
}

/* 激活状态的底部指示器 */
.nav-link.active::after {
    content: '';                            /* 空内容 */
    position: absolute;                     /* 绝对定位 */
    bottom: -2px;                           /* 底部位置 */
    left: 50%;                              /* 水平居中 */
    transform: translateX(-50%);            /* 精确居中 */
    width: 20px;                            /* 指示器宽度 */
    height: 2px;                            /* 指示器高度 */
    background: var(--primary-color);       /* 主色调背景 */
    border-radius: 1px;                     /* 圆角 */
}

/* 首页链接特殊定位调整 */
.nav-link[data-module="home"] {
    margin-left: 10px;                      /* 向右偏移，视觉平衡 */
}

/* ========================================================================== */
/* 用户菜单组件 (User Menu Component)
/* ========================================================================== */

/* 用户菜单容器，包含用户头像、姓名等信息 */
.user-menu {
    display: flex;                          /* 弹性布局 */
    align-items: center;                    /* 垂直居中对齐 */
    gap: var(--spacing-md);                 /* 菜单项间距 */
}

/* ========================================================================== */
/* 主要内容区域 (Main Content Area)
/* ========================================================================== */

/* 主内容容器，包含所有页面模块 */
.main {
    padding: var(--spacing-2xl) 0;          /* 上下内边距 */
    margin-top: 80px;                       /* 为固定导航栏留出空间 */
    min-height: calc(100vh - 80px);         /* 最小高度，减去导航栏高度 */
}

/* ========================================================================== */
/* 模块系统 (Module System)
/* ========================================================================== */

/* 模块基础样式，所有功能模块的通用容器 */
.module {
    display: none;                          /* 默认隐藏，通过JavaScript控制显示 */
    background: var(--bg-primary);          /* 主背景色 */
    border-radius: var(--radius-xl);        /* 大圆角 */
    box-shadow: var(--shadow-xl);           /* 深阴影效果 */
    overflow: hidden;                       /* 隐藏溢出内容 */
    position: relative;                     /* 相对定位 */
    z-index: 1;                             /* 层级设置 */
    
    /* 动画控制：移除自动动画，由JavaScript精确控制 */
    opacity: 0;                             /* 初始透明 */
    transform: translateY(0);               /* 初始位置 */
    transition: none;                       /* 禁用自动过渡 */
}

/* 激活状态的模块 */
.module.active {
    display: block;                         /* 显示模块 */
    opacity: 1;                             /* 完全不透明 */
    transform: translateY(0);               /* 正常位置 */
}

/* 模块切换动画：淡出效果 */
.module.switching-out {
    opacity: 0;                             /* 透明度为0 */
    transform: translateY(-10px);           /* 向上移动 */
    transition: opacity 0.15s ease-out, transform 0.15s ease-out; /* 快速淡出 */
}

/* 模块切换动画：淡入效果 */
.module.switching-in {
    opacity: 1;                             /* 完全不透明 */
    transform: translateY(0);               /* 正常位置 */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out; /* 平滑淡入 */
}

/* 注意：模块头部样式已统一到 components/module-header.css 中，避免重复定义 */

/* ========================================================================== */
/* 首页英雄区域 (Hero Section)
/* ========================================================================== */

/* 英雄区域主容器，包含渐变背景和主要宣传内容 */
.hero-section {
    /* 渐变背景，从主色调到次要色调 */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;                           /* 白色文字 */
    padding: var(--spacing-lg) var(--spacing-2xl); /* 内边距 */
    text-align: center;                     /* 文字居中 */
}

/* 英雄区域主标题 */
.hero-title {
    font-size: var(--font-size-3xl);        /* 超大字体 */
    font-weight: 700;                       /* 粗体 */
    margin-bottom: var(--spacing-md);       /* 底部间距 */
}

/* 英雄区域副标题 */
.hero-subtitle {
    font-size: var(--font-size-lg);         /* 大号字体 */
    opacity: 0.9;                           /* 轻微透明 */
    margin-bottom: var(--spacing-lg);       /* 底部间距 */
}

/* 特性展示区域容器 */
.hero-features {
    margin-bottom: var(--spacing-lg);       /* 底部间距 */
}

/* 特性展示网格布局 */
.feature-grid {
    display: grid;                          /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式列布局 */
    gap: var(--spacing-lg);                 /* 网格间距 */
    margin-top: var(--spacing-xl);          /* 顶部间距 */
}

/* 特性卡片样式 */
.feature-card {
    background: rgba(255, 255, 255, 0.1);   /* 半透明白色背景 */
    backdrop-filter: blur(10px);            /* 毛玻璃效果 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 半透明边框 */
    border-radius: var(--radius-lg);        /* 大圆角 */
    padding: var(--spacing-xl);             /* 内边距 */
    text-align: center;                     /* 文字居中 */
    transition: var(--transition-normal);   /* 过渡动画 */
}

/* 特性卡片悬停效果 */
.feature-card:hover {
    transform: translateY(-5px);            /* 向上浮动 */
    background: rgba(255, 255, 255, 0.15);  /* 背景变亮 */
}

/* 特性图标样式 */
.feature-icon {
    font-size: var(--font-size-3xl);        /* 超大字体 */
    margin-bottom: var(--spacing-md);       /* 底部间距 */
}

/* 特性卡片标题 */
.feature-card h3 {
    font-size: var(--font-size-xl);         /* 大号字体 */
    font-weight: 600;                       /* 半粗体 */
    margin-bottom: var(--spacing-sm);       /* 底部间距 */
}

/* 特性卡片描述文字 */
.feature-card p {
    opacity: 0.9;                           /* 轻微透明 */
    line-height: 1.5;                       /* 行高 */
}

/* 英雄区域操作按钮容器 */
.hero-actions {
    display: flex;                          /* 弹性布局 */
    gap: var(--spacing-md);                 /* 按钮间距 */
    justify-content: center;                /* 居中对齐 */
    flex-wrap: wrap;                        /* 允许换行 */
}

/* ========================================================================== */
/* 概述区域 (Overview Section)
/* ========================================================================== */

/* 概述区域主容器，展示系统功能概览 */
.overview-section {
    padding: 16px 30px 30px 30px;           /* 自定义内边距，适配内容布局 */
}

/* 注意：通用 section-header 样式已移至 base-shared.css，避免重复定义 */
/* 如需特殊样式，请使用 .main-section-header 类名进行覆盖 */

/* 主页面区域标题容器 */
.main-section-header {
    text-align: center;                     /* 文字居中 */
    margin-bottom: 16px;                    /* 底部间距 */
}

/* 主页面区域标题 */
.main-section-header h2 {
    font-size: var(--font-size-2xl);        /* 超大字体 */
    font-weight: 700;                       /* 粗体 */
    color: var(--text-primary);             /* 主要文字颜色 */
    margin-bottom: var(--spacing-sm);       /* 底部间距 */
}

/* 主页面区域描述文字 */
.main-section-header p {
    font-size: var(--font-size-lg);         /* 大号字体 */
    color: var(--text-secondary);           /* 次要文字颜色 */
}

/* ========================================================================== */
/* 架构图展示组件 (Architecture Diagram Component)
/* ========================================================================== */

/* 架构图主容器 */
.architecture-diagram {
    margin: 3rem 0;                         /* 上下间距 */
    text-align: center;                     /* 内容居中 */
}

/* 图表容器 */
.diagram-container {
    margin-bottom: 2rem;                    /* 底部间距 */
}

/* 架构图片样式 */
.architecture-image {
    max-width: 100%;                        /* 响应式宽度 */
    height: auto;                           /* 自动高度 */
    border-radius: 12px;                    /* 圆角 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 图表描述区域 */
.diagram-description {
    background: var(--gradient-primary);    /* 渐变背景 */
    color: white;                           /* 白色文字 */
    padding: 2rem;                          /* 内边距 */
    border-radius: 12px;                    /* 圆角 */
    margin: 2rem auto;                      /* 居中显示 */
    max-width: 800px;                       /* 最大宽度限制 */
}

/* 图表描述标题 */
.diagram-description h3 {
    margin-bottom: 1rem;                    /* 底部间距 */
    font-size: 1.5rem;                      /* 字体大小 */
}

/* 图表描述文字 */
.diagram-description p {
    font-size: 1.1rem;                      /* 字体大小 */
    line-height: 1.6;                       /* 行高 */
    opacity: 0.95;                          /* 轻微透明 */
}

/* ========================================================================== */
/* 概述网格系统 (Overview Grid System)
/* ========================================================================== */

/* 概述网格容器，展示功能模块卡片 */
.overview-grid {
    display: grid;                          /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式列布局 */
    gap: 2rem;                              /* 网格间距 */
    margin-top: 16px;                       /* 顶部间距 */
}

/* 概述卡片基础样式 */
.overview-card {
    background: white;                      /* 白色背景 */
    border-radius: var(--radius-lg);        /* 大圆角 */
    padding: 2rem;                          /* 内边距 */
    border: 1px solid var(--bg-tertiary);   /* 边框 */
    transition: var(--transition-normal);   /* 过渡动画 */
    position: relative;                     /* 相对定位，为数字标签提供基准 */
    border-left: 4px solid var(--primary-color); /* 左侧强调边框 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 基础阴影 */
}

/* 概述卡片悬停效果 */
.overview-card:hover {
    transform: translateY(-5px);            /* 向上浮动 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 增强阴影 */
    border-color: var(--primary-color);     /* 边框颜色变化 */
}

/* 卡片序号标签 */
.card-number {
    position: absolute;                     /* 绝对定位 */
    top: -10px;                             /* 顶部位置 */
    right: 20px;                            /* 右侧位置 */
    background: var(--primary-color);       /* 主色调背景 */
    color: white;                           /* 白色文字 */
    width: 30px;                            /* 宽度 */
    height: 30px;                           /* 高度 */
    border-radius: 50%;                     /* 圆形 */
    display: flex;                          /* 弹性布局 */
    align-items: center;                    /* 垂直居中 */
    justify-content: center;                /* 水平居中 */
    font-weight: bold;                      /* 粗体 */
    font-size: 1.1rem;                      /* 字体大小 */
}

/* 概述卡片标题 */
.overview-card h3 {
    font-size: 1.3rem;                      /* 字体大小 */
    font-weight: 600;                       /* 半粗体 */
    color: var(--primary-color);            /* 主色调 */
    margin-bottom: 1.5rem;                  /* 底部间距 */
}

/* 概述卡片描述文字 */
.overview-card p {
    color: var(--text-secondary);           /* 次要文字颜色 */
    line-height: 1.6;                       /* 行高 */
}

/* 特性列表文字样式 */
.feature-list p {
    color: var(--text-secondary);           /* 次要文字颜色 */
    line-height: 1.8;                       /* 较大行高 */
    margin-bottom: 0.8rem;                  /* 底部间距 */
    padding-left: 0.5rem;                   /* 左侧内边距 */
}

/* 注意：核心能力展示样式已删除，避免代码冗余 */

/* ========================================================================== */
/* 动画效果系统 (Animation System)
/* ========================================================================== */

/* 从下向上淡入动画，常用于卡片和内容块 */
@keyframes fadeInUp {
    from {
        opacity: 0;                         /* 初始透明 */
        transform: translateY(30px);        /* 向下偏移30px */
    }
    to {
        opacity: 1;                         /* 完全不透明 */
        transform: translateY(0);           /* 回到原位置 */
    }
}

/* 简单淡入动画，用于整体内容显示 */
@keyframes fadeIn {
    from {
        opacity: 0;                         /* 初始透明 */
    }
    to {
        opacity: 1;                         /* 完全不透明 */
    }
}

/* 从右侧滑入动画，用于侧边栏或提示信息 */
@keyframes slideInRight {
    from {
        opacity: 0;                         /* 初始透明 */
        transform: translateX(30px);        /* 向右偏移30px */
    }
    to {
        opacity: 1;                         /* 完全不透明 */
        transform: translateX(0);           /* 回到原位置 */
    }
}

/* 脉冲动画，用于强调重要元素 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);                /* 原始大小 */
    }
    50% {
        transform: scale(1.05);             /* 放大5% */
    }
}

/* ========================================================================== */
/* 响应式设计系统 (Responsive Design System)
/* ========================================================================== */

/* 小屏幕设备适配 (平板和小屏笔记本) */
@media (max-width: var(--breakpoint-sm)) {
    /* 容器内边距调整 */
    .container {
        padding: 0 var(--spacing-md);       /* 减少左右内边距 */
    }
    
    /* 头部内容垂直布局 */
    .header-content {
        flex-direction: column;             /* 改为垂直布局 */
        gap: var(--spacing-md);             /* 元素间距 */
        height: auto;                       /* 自动高度 */
        padding: var(--spacing-sm) 0;       /* 减少内边距 */
    }
    
    /* 公司Logo适配 */
    .company-logo {
        position: static;                   /* 取消绝对定位 */
        margin-left: 0;                     /* 清除左边距 */
        width: 150px;                       /* 缩小尺寸 */
        height: 112px;                      /* 缩小尺寸 */
        margin-bottom: var(--spacing-sm);   /* 底部间距 */
    }
    
    /* Logo区域垂直布局 */
    .logo {
        flex-direction: column;             /* 垂直排列 */
        text-align: center;                 /* 居中对齐 */
    }
    
    /* Logo文字居中 */
    .logo-text {
        align-items: center;                /* 居中对齐 */
        margin-left: 0;                     /* 清除左边距 */
    }
    
    /* 导航菜单换行布局 */
    .nav {
        flex-wrap: wrap;                    /* 允许换行 */
        justify-content: center;            /* 居中对齐 */
        gap: var(--spacing-sm);             /* 减少间距 */
    }
    
    /* 英雄区域标题字体调整 */
    .hero-title {
        font-size: var(--font-size-2xl);    /* 减小字体 */
    }
    
    /* 特性网格单列布局 */
    .feature-grid {
        grid-template-columns: 1fr;         /* 单列布局 */
    }
    
    /* 概述网格单列布局 */
    .overview-grid {
        grid-template-columns: 1fr;         /* 单列布局 */
    }
    
    /* 英雄区域按钮垂直布局 */
    .hero-actions {
        flex-direction: column;             /* 垂直排列 */
        align-items: center;                /* 居中对齐 */
    }
    
    /* 注意：核心能力相关响应式样式已删除，避免代码冗余 */
}

/* 超小屏幕设备适配 (手机设备) */
@media (max-width: var(--breakpoint-xs)) {
    /* 主内容区域调整 */
    .main {
        padding: var(--spacing-lg) 0;        /* 减少内边距 */
        margin-top: 120px;                  /* 为移动端header留出更多空间 */
    }
    
    /* 头部内容最小内边距 */
    .header-content {
        padding: var(--spacing-xs) 0;        /* 最小内边距 */
    }
    
    /* 公司Logo进一步缩小 */
    .company-logo {
        width: 125px;                       /* 更小尺寸 */
        height: 94px;                       /* 更小尺寸 */
    }
    
    /* Logo标题字体缩小 */
    .logo h1 {
        font-size: var(--font-size-lg);     /* 缩小字体 */
    }
    
    /* Logo副标题调整 */
    .logo .subtitle {
        font-size: var(--font-size-xs);     /* 最小字体 */
        margin-left: 0;                     /* 清除左边距 */
    }
    
    /* 导航链接紧凑布局 */
    .nav-link {
        padding: var(--spacing-xs) var(--spacing-sm); /* 最小内边距 */
        font-size: var(--font-size-sm);     /* 小字体 */
    }
    
    /* 各区域内边距统一调整 */
    .hero-section,
    .module-header {
        padding: var(--spacing-lg);         /* 统一内边距 */
    }
    
    .overview-section {
        padding: var(--spacing-lg);         /* 统一内边距 */
    }
    
    /* 卡片内边距调整 */
    .feature-card,
    .overview-card {
        padding: var(--spacing-lg);         /* 减少内边距 */
    }
}

/* ========================================================================== */
/* 打印样式 (Print Styles)
/* ========================================================================== */

/* 打印时的样式优化，确保内容清晰可读 */
@media print {
    /* 隐藏不必要的交互元素 */
    .header,
    .nav,
    .user-menu {
        display: none;                      /* 隐藏导航和菜单 */
    }
    
    /* 基础样式重置为打印友好 */
    body {
        background: white;                  /* 白色背景 */
        color: black;                       /* 黑色文字 */
    }
    
    /* 模块样式简化 */
    .module {
        box-shadow: none;                   /* 移除阴影 */
        border: 1px solid var(--module-border-light); /* 简单边框 */
    }
    
    /* 页脚样式调整 */
    .company-footer {
        background: white;                  /* 白色背景 */
        border-top: 1px solid var(--text-primary); /* 顶部边框 */
    }
    
    /* 隐藏装饰性伪元素 */
    .company-footer::before {
        display: none;                      /* 隐藏装饰元素 */
    }
}

/* ========================================================================== */
/* 通知和加载样式系统 - 统一UI组件 (Notification & Loading System)
/* ========================================================================== */

/* ========================================================================== */
/* 通知组件 (Notification Component)
/* ========================================================================== */

/* 通知主容器，固定定位在右上角 */
.notification {
    position: fixed;                        /* 固定定位 */
    top: 20px;                              /* 距离顶部20px */
    right: 20px;                            /* 距离右侧20px */
    min-width: 300px;                       /* 最小宽度 */
    max-width: 500px;                       /* 最大宽度 */
    background: var(--bg-primary);          /* 主背景色 */
    border-radius: var(--radius-md);        /* 中等圆角 */
    box-shadow: var(--shadow-lg);           /* 大阴影 */
    z-index: 9999;                          /* 最高层级 */
    
    /* 初始状态：隐藏在右侧 */
    transform: translateX(100%);            /* 向右偏移100% */
    opacity: 0;                             /* 透明 */
    transition: all 0.3s ease;             /* 平滑过渡 */
    border-left: 4px solid var(--info-color); /* 左侧信息色边框 */
}

/* 通知显示状态 */
.notification.show {
    transform: translateX(0);               /* 回到原位置 */
    opacity: 1;                             /* 完全不透明 */
}

/* 成功通知样式 */
.notification.success {
    border-left-color: var(--success-color); /* 成功色边框 */
}

/* 警告通知样式 */
.notification.warning {
    border-left-color: var(--warning-color); /* 警告色边框 */
}

/* 错误通知样式 */
.notification.error {
    border-left-color: var(--error-color);  /* 错误色边框 */
}

/* 通知内容容器 */
.notification-content {
    display: flex;                          /* 弹性布局 */
    align-items: center;                    /* 垂直居中 */
    justify-content: space-between;         /* 两端对齐 */
    padding: var(--spacing-md);             /* 内边距 */
}

/* 通知消息文字 */
.notification-message {
    flex: 1;                                /* 占据剩余空间 */
    color: var(--text-primary);             /* 主要文字颜色 */
    font-size: 14px;                        /* 字体大小 */
    line-height: 1.4;                       /* 行高 */
}

/* 通知关闭按钮 */
.notification-close {
    background: none;                       /* 无背景 */
    border: none;                           /* 无边框 */
    font-size: 18px;                        /* 字体大小 */
    color: var(--text-secondary);           /* 次要文字颜色 */
    cursor: pointer;                        /* 手型光标 */
    padding: 0;                             /* 无内边距 */
    margin-left: var(--spacing-sm);         /* 左边距 */
    width: 20px;                            /* 宽度 */
    height: 20px;                           /* 高度 */
    display: flex;                          /* 弹性布局 */
    align-items: center;                    /* 垂直居中 */
    justify-content: center;                /* 水平居中 */
    border-radius: 50%;                     /* 圆形 */
    transition: all 0.2s ease;             /* 快速过渡 */
}

/* 关闭按钮悬停效果 */
.notification-close:hover {
    background: var(--bg-tertiary);         /* 三级背景色 */
    color: var(--text-primary);             /* 主要文字颜色 */
}

/* ========================================================================== */
/* 加载组件 (Loading Component)
/* ========================================================================== */

/* 加载遮罩层，全屏覆盖 */
.loading {
    position: fixed;                        /* 固定定位 */
    top: 0;                                 /* 顶部对齐 */
    left: 0;                                /* 左侧对齐 */
    width: 100%;                            /* 全屏宽度 */
    height: 100%;                           /* 全屏高度 */
    background: rgba(0, 0, 0, 0.5);         /* 半透明黑色遮罩 */
    display: flex;                          /* 弹性布局 */
    flex-direction: column;                 /* 垂直排列 */
    align-items: center;                    /* 水平居中 */
    justify-content: center;                /* 垂直居中 */
    z-index: 10000;                         /* 最高层级（比通知更高） */
    
    /* 初始状态：隐藏 */
    opacity: 0;                             /* 透明 */
    visibility: hidden;                     /* 不可见 */
    transition: all 0.3s ease;             /* 平滑过渡 */
}

/* 加载显示状态 */
.loading.show {
    opacity: 1;                             /* 完全不透明 */
    visibility: visible;                    /* 可见 */
}

/* 加载旋转器 */
.loading-spinner {
    width: 40px;                            /* 宽度 */
    height: 40px;                           /* 高度 */
    border: 4px solid rgba(255, 255, 255, 0.3); /* 底色边框 */
    border-top: 4px solid var(--primary-color); /* 主色边框 */
    border-radius: 50%;                     /* 圆形 */
    animation: spin 1s linear infinite;     /* 旋转动画 */
    margin-bottom: var(--spacing-md);       /* 下边距 */
}

/* 加载提示文字 */
.loading p {
    color: white;                           /* 白色文字 */
    font-size: 16px;                        /* 字体大小 */
    margin: 0;                              /* 无外边距 */
    text-align: center;                     /* 文字居中 */
}

/* ========================================================================== */
/* 旋转动画关键帧 (Spin Animation Keyframes)
/* ========================================================================== */

/* 旋转动画：从0度到360度 */
@keyframes spin {
    0% { transform: rotate(0deg); }         /* 起始角度 */
    100% { transform: rotate(360deg); }     /* 结束角度 */
}

/* ========================================================================== */
/* 通知动画关键帧 (Notification Animation Keyframes)
/* ========================================================================== */

/* 从右侧滑入动画 */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 向右侧滑出动画 */
@keyframes slideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}