/* static/css/style.css - 数字学习云平台样式表 */

/* ==================== CSS变量定义 ==================== */
/* 定义全局颜色、边框、阴影等变量，便于统一管理和维护 */
:root {
    --primary-color: #4a8cff;       /* 主色调 - 蓝色，用于主要按钮和链接 */
    --secondary-color: #6cbf6c;     /* 辅助色 - 绿色，用于次要元素 */
    --accent-color: #ff9f43;        /* 强调色 - 橙色，用于注册等强调按钮 */
    --light-primary: #e6f0ff;       /* 浅主色 - 淡蓝色，用于悬停背景 */
    --dark-color: #34495e;          /* 深色 - 深蓝灰色，用于文字和标题 */
    --light-color: #f8f9fa;         /* 浅色 - 浅灰色，用于页面背景 */
    --text-color: #333;             /* 文字颜色 - 深灰色，用于正文 */
    --border-radius: 4px;           /* 边框圆角 - 统一圆角大小 */
    --box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); /* 盒子阴影 - 统一阴影效果 */
    --transition: all 0.2s ease;    /* 过渡动画 - 统一过渡效果 */
}

/* ==================== 通用重置样式 ==================== */
/* 重置所有元素的默认边距和盒模型，确保跨浏览器一致性 */
* {
    margin: 0;                     /* 清除默认外边距 */
    padding: 0;                    /* 清除默认内边距 */
    box-sizing: border-box;        /* 设置盒模型为border-box，便于布局计算 */
}

/* ==================== 页面基础样式 ==================== */
/* 设置整个页面的基础样式，包括字体、颜色、背景等 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; /* 字体栈，支持多系统字体 */
    color: var(--text-color);      /* 文字颜色使用定义的变量 */
    background-color: var(--light-color); /* 背景色使用浅色变量 */
    line-height: 1.4;              /* 行高，改善可读性 */
    width: 100%;                   /* 宽度100%，确保占满视口 */
}

/* ==================== 头部容器样式 ==================== */
/* 页面顶部的头部区域容器样式 */
.header-container {
    width: 100%;                   /* 宽度100%，占满页面宽度 */
    background: #c2e0ff;           /* 纯色背景 - 浅蓝色 */
    border-bottom: 1px solid rgba(74, 140, 255, 0.2); /* 底部边框，半透明蓝色 */
    box-shadow: var(--box-shadow); /* 添加阴影效果 */
}

/* ==================== 头部内容区域样式 ==================== */
/* 头部内部内容区域，用于居中和对齐 */
.header-content {
    width: 95%;                    /* 宽度95%，留出边距 */
    max-width: 1400px;             /* 最大宽度限制，避免在大屏幕上过宽 */
    margin: 0 auto;                /* 水平居中 */
    padding: 8px 15px 0 15px;      /* 内边距：上8px，左右15px，下0px */
}

/* ==================== Logo区域样式 ==================== */
/* 包含Logo和用户状态按钮的区域 */
.logo-section {
    display: flex;                 /* 使用弹性布局 */
    justify-content: space-between; /* 两端对齐：Logo在左，用户状态在右 */
    align-items: center;           /* 垂直居中对齐 */
    margin-bottom: 8px;            /* 底部外边距8px */
}

/* ==================== Logo图片样式 ==================== */
.logo {
    height: 50px;                  /* Logo高度50px */
}

/* ==================== 用户状态区域样式 ==================== */
/* 显示用户登录状态或登录注册按钮的区域 */
.user-status {
    display: flex;                 /* 使用弹性布局 */
    gap: 6px;                      /* 子元素之间间距6px */
}

/* ==================== 导航栏样式 ==================== */
/* 主导航菜单区域 */
.navbar {
    display: flex;                 /* 使用弹性布局 */
    background-color: white;       /* 白色背景 */
    border-radius: var(--border-radius); /* 使用定义的圆角变量 */
    padding: 0;                    /* 无内边距 */
    box-shadow: var(--box-shadow); /* 使用定义的阴影变量 */
    align-items: center;           /* 垂直居中对齐 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 浅色边框 */
}

/* ==================== 导航链接样式 ==================== */
/* 导航栏中的链接样式 */
.navbar a {
    padding: 8px 16px;             /* 内边距：上下8px，左右16px */
    text-decoration: none;         /* 去除下划线 */
    color: var(--dark-color);      /* 使用深色变量 */
    font-weight: 500;              /* 中等字重 */
    transition: var(--transition); /* 使用定义的过渡效果 */
    position: relative;            /* 相对定位，用于伪元素定位 */
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中对齐 */
    font-size: 14px;               /* 字体大小14px */
}

/* ==================== 导航链接悬停效果 ==================== */
/* 鼠标悬停在导航链接上的效果 */
.navbar a:hover {
    color: var(--primary-color);   /* 悬停时变为主色调 */
}

/* ==================== 导航链接底部指示器 ==================== */
/* 鼠标悬停时显示的底部指示线 */
.navbar a:hover::after {
    content: '';                   /* 伪元素内容为空 */
    position: absolute;            /* 绝对定位 */
    bottom: 0;                     /* 底部对齐 */
    left: 12px;                    /* 左边距12px */
    right: 12px;                   /* 右边距12px */
    height: 2px;                   /* 高度2px */
    background-color: var(--primary-color); /* 使用主色调 */
}

/* ==================== 下拉菜单容器样式 ==================== */
/* 导航栏中的下拉菜单容器 */
.dropdown {
    position: relative;            /* 相对定位，为子元素绝对定位提供参考 */
    display: flex;                 /* 使用弹性布局 */
    align-items: center;           /* 垂直居中对齐 */
}

/* ==================== 下拉菜单内容样式 ==================== */
/* 下拉菜单隐藏的内容区域 */
.dropdown-content {
    display: none;                 /* 默认隐藏 */
    position: absolute;            /* 绝对定位，相对于父容器 */
    background-color: white;       /* 白色背景 */
    min-width: 130px;              /* 最小宽度130px */
    box-shadow: var(--box-shadow); /* 使用定义的阴影变量 */
    z-index: 100;                  /* 层级100，确保在最上层 */
    border-radius: var(--border-radius); /* 使用定义的圆角变量 */
    overflow: hidden;              /* 溢出隐藏 */
    top: 100%;                     /* 顶部对齐到父元素底部 */
    left: 0;                       /* 左侧对齐 */
}

/* ==================== 下拉菜单链接样式 ==================== */
/* 下拉菜单中的链接项 */
.dropdown-content a {
    padding: 6px 10px;             /* 内边距：上下6px，左右10px */
    display: block;                /* 块级显示 */
    color: var(--dark-color);      /* 使用深色变量 */
    text-decoration: none;         /* 去除下划线 */
    transition: var(--transition); /* 使用定义的过渡效果 */
    font-size: 13px;               /* 字体大小13px */
}

/* ==================== 下拉菜单链接悬停效果 ==================== */
/* 鼠标悬停在下拉菜单链接上的效果 */
.dropdown-content a:hover {
    background-color: var(--light-primary); /* 悬停背景使用浅主色 */
    color: var(--primary-color);   /* 悬停文字使用主色调 */
}

/* ==================== 下拉菜单显示效果 ==================== */
/* 鼠标悬停在父元素上时显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;                /* 显示下拉菜单 */
}

/* ==================== 按钮基础样式 ==================== */
/* 所有按钮的基础样式 */
.btn {
    display: inline-flex;          /* 内联弹性布局 */
    align-items: center;           /* 垂直居中对齐 */
    padding: 10px 24px;            /* 内边距：上下10px，左右24px */
    background-color: var(--primary-color); /* 背景色使用主色调 */
    color: white;                  /* 文字颜色白色 */
    border: none;                  /* 无边框 */
    border-radius: 5px;            /* 圆角5px */
    cursor: pointer;               /* 鼠标指针变为手型 */
    text-decoration: none;         /* 去除下划线 */
    font-weight: 500;              /* 中等字重 */
    transition: var(--transition); /* 使用定义的过渡效果 */
    text-align: center;            /* 文字居中对齐 */
    font-size: 15px;               /* 字体大小15px */
    box-shadow: 0 2px 5px rgba(74, 140, 255, 0.3); /* 阴影效果 */
    min-height: 40px;              /* 最小高度40px */
    line-height: 1.2;              /* 行高1.2 */
}

/* ==================== 按钮悬停效果 ==================== */
/* 鼠标悬停在按钮上的效果 */
.btn:hover {
    background-color: #3a7cdf;     /* 悬停背景色加深 */
    color: white;                  /* 文字颜色保持白色 */
    transform: translateY(-2px);   /* 向上移动2px */
    box-shadow: 0 4px 8px rgba(74, 140, 255, 0.4); /* 悬停时阴影加深 */
}

/* ==================== 强调按钮样式 ==================== */
/* 特殊的强调按钮，如注册按钮 */
.btn-accent {
    background-color: var(--accent-color); /* 背景色使用强调色 */
    box-shadow: 0 2px 5px rgba(255, 159, 67, 0.3); /* 强调色阴影 */
}

/* ==================== 强调按钮悬停效果 ==================== */
/* 鼠标悬停在强调按钮上的效果 */
.btn-accent:hover {
    background-color: #e68a2e;     /* 悬停背景色加深 */
    box-shadow: 0 4px 8px rgba(255, 159, 67, 0.4); /* 悬停时阴影加深 */
}

/* ==================== 认证按钮区域样式 ==================== */
/* 登录注册按钮容器 */
.auth-buttons {
    display: flex;                 /* 使用弹性布局 */
    gap: 12px;                     /* 子元素之间间距12px */
}

/* ==================== 认证下拉菜单容器样式 ==================== */
/* 登录注册下拉菜单容器 */
.auth-dropdown {
    position: relative;            /* 相对定位，为子元素绝对定位提供参考 */
}

/* ==================== 认证下拉菜单内容样式 ==================== */
/* 认证下拉菜单隐藏的内容区域 */
.auth-dropdown-content {
    display: none;                 /* 默认隐藏 */
    position: absolute;            /* 绝对定位，相对于父容器 */
    right: 0;                      /* 右侧对齐 */
    top: 100%;                     /* 顶部对齐到父元素底部 */
    background-color: white;       /* 白色背景 */
    min-width: 150px;              /* 最小宽度150px */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); /* 阴影效果 */
    z-index: 100;                  /* 层级100，确保在最上层 */
    border-radius: 5px;            /* 圆角5px */
    overflow: hidden;              /* 溢出隐藏 */
    border: 1px solid rgba(0, 0, 0, 0.1); /* 浅色边框 */
    margin-top: 0;                 /* 修改：顶部外边距0，移除与按钮的间距 */
}

/* ==================== 认证下拉菜单显示效果 ==================== */
/* 鼠标悬停在父元素上时显示认证下拉菜单 */
.auth-dropdown:hover .auth-dropdown-content {
    display: block;                /* 显示下拉菜单 */
}

/* ==================== 认证下拉菜单链接样式 ==================== */
/* 认证下拉菜单中的链接项 */
.auth-dropdown-content a {
    display: block;                /* 块级显示 */
    padding: 10px 18px;            /* 内边距：上下10px，左右18px */
    color: var(--dark-color);      /* 使用深色变量 */
    text-decoration: none;         /* 去除下划线 */
    transition: var(--transition); /* 使用定义的过渡效果 */
    font-size: 14px;               /* 字体大小14px */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 底部边框作为分割线 */
    line-height: 1.3;              /* 行高1.3 */
}

/* ==================== 认证下拉菜单最后链接样式 ==================== */
/* 认证下拉菜单中最后一个链接项 */
.auth-dropdown-content a:last-child {
    border-bottom: none;           /* 去除底部边框 */
}

/* ==================== 认证下拉菜单链接悬停效果 ==================== */
/* 鼠标悬停在认证下拉菜单链接上的效果 */
.auth-dropdown-content a:hover {
    background-color: var(--light-primary); /* 悬停背景使用浅主色 */
    color: var(--primary-color);   /* 悬停文字使用主色调 */
    padding-left: 22px;            /* 悬停时左侧内边距增加，产生移动效果 */
}

/* ==================== 按钮图标样式 ==================== */
/* 按钮内的图标样式 */
.btn img {
    margin-right: 6px !important;  /* 图标右边距6px，使用!important确保优先级 */
    width: 16px !important;        /* 图标宽度16px */
    height: 16px !important;       /* 图标高度16px */
    vertical-align: middle;        /* 垂直居中对齐 */
}

/* ==================== 主内容容器样式 ==================== */
/* 页面主要内容区域容器 */
.container {
    width: 95%;                    /* 宽度95%，留出边距 */
    max-width: 1400px;             /* 最大宽度限制 */
    margin: 0 auto;                /* 水平居中 */
    padding: 0 15px;               /* 左右内边距15px */
}

/* ==================== 主内容区域样式 ==================== */
/* 页面主要内容布局区域 */
.main-content {
    display: grid;                 /* 使用网格布局 */
    grid-template-columns: 2fr 1fr; /* 两列布局，左侧2份，右侧1份 */
    gap: 30px;                     /* 列间距30px */
    margin: 30px 0;                /* 上下外边距30px */
}

/* ==================== 板块卡片样式 ==================== */
/* 内容板块的卡片式容器 */
.section-card {
    background-color: white;       /* 白色背景 */
    border-radius: var(--border-radius); /* 使用定义的圆角变量 */
    box-shadow: var(--box-shadow); /* 使用定义的阴影变量 */
    overflow: hidden;              /* 溢出隐藏 */
    margin-bottom: 20px;           /* 底部外边距20px */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 浅色边框 */
}

/* ==================== 板块头部样式 ==================== */
/* 板块卡片的头部区域 */
.section-header {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); /* 渐变背景 */
    color: white;                  /* 文字颜色白色 */
    padding: 15px 20px;            /* 内边距：上下15px，左右20px */
    display: flex;                 /* 使用弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center;           /* 垂直居中对齐 */
}

/* ==================== 板块标题样式 ==================== */
/* 板块头部中的标题 */
.section-header h3 {
    margin: 0;                     /* 清除默认外边距 */
    font-weight: 500;              /* 中等字重 */
}

/* ==================== 板块头部链接样式 ==================== */
/* 板块头部中的"更多"链接 */
.section-header a {
    color: white;                  /* 文字颜色白色 */
    text-decoration: none;         /* 去除下划线 */
    font-size: 0.9rem;             /* 字体大小相对单位 */
}

/* ==================== 板块主体样式 ==================== */
/* 板块卡片的主体内容区域 */
.section-body {
    padding: 20px;                 /* 内边距20px */
}

/* ==================== 书籍章节样式 ==================== */
/* 书籍内容展示区域 */
.book-section {
    display: flex;                 /* 使用弹性布局 */
    margin-bottom: 20px;           /* 底部外边距20px */
    padding-bottom: 20px;          /* 底部内边距20px */
    border-bottom: 1px solid #eee; /* 底部边框，浅灰色 */
}

/* ==================== 最后书籍章节样式 ==================== */
/* 书籍章节中的最后一个 */
.book-section:last-child {
    border-bottom: none;           /* 去除底部边框 */
}

/* ==================== 书籍封面样式 ==================== */
/* 书籍封面图片区域 */
.book-cover {
    flex: 0 0 180px;               /* 固定宽度180px，不伸缩 */
    margin-right: 20px;            /* 右边距20px */
}

/* ==================== 书籍封面图片样式 ==================== */
/* 书籍封面图片 */
.book-cover img {
    width: 100%;                   /* 宽度100%，填充容器 */
    border-radius: var(--border-radius); /* 使用定义的圆角变量 */
    box-shadow: var(--box-shadow); /* 使用定义的阴影变量 */
}

/* ==================== 书籍内容样式 ==================== */
/* 书籍文字内容区域 */
.book-content {
    flex: 1;                       /* 占据剩余空间 */
}

/* ==================== 书籍标题样式 ==================== */
/* 书籍内容的标题 */
.book-title {
    font-weight: 700;              /* 粗体字重 */
    margin-bottom: 10px;           /* 底部外边距10px */
    color: var(--dark-color);      /* 使用深色变量 */
}

/* ==================== 书籍项目样式 ==================== */
/* 书籍中的单个项目 */
.book-item {
    display: flex;                 /* 使用弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    padding: 8px 0;                /* 上下内边距8px */
    border-bottom: 1px dashed #eee; /* 底部虚线边框 */
}

/* ==================== 最后书籍项目样式 ==================== */
/* 书籍项目中的最后一个 */
.book-item:last-child {
    border-bottom: none;           /* 去除底部边框 */
}

/* ==================== 书籍链接样式 ==================== */
/* 书籍项目中的链接 */
.book-item a {
    color: var(--text-color);      /* 使用文字颜色变量 */
    text-decoration: none;         /* 去除下划线 */
    transition: var(--transition); /* 使用定义的过渡效果 */
}

/* ==================== 书籍链接悬停效果 ==================== */
/* 鼠标悬停在书籍链接上的效果 */
.book-item a:hover {
    color: var(--primary-color);   /* 悬停时变为主色调 */
}

/* ==================== 视频网格样式 ==================== */
/* 视频卡片网格布局容器 */
.video-grid {
    display: grid;                 /* 使用网格布局 */
    grid-template-columns: 1fr;    /* 单列布局 */
    gap: 20px;                     /* 行间距20px */
}

/* ==================== 视频卡片样式 ==================== */
/* 单个视频卡片容器 */
.video-card {
    background-color: white;       /* 白色背景 */
    border-radius: var(--border-radius); /* 使用定义的圆角变量 */
    overflow: hidden;              /* 溢出隐藏 */
    box-shadow: var(--box-shadow); /* 使用定义的阴影变量 */
    transition: var(--transition); /* 使用定义的过渡效果 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 浅色边框 */
}

/* ==================== 视频卡片悬停效果 ==================== */
/* 鼠标悬停在视频卡片上的效果 */
.video-card:hover {
    transform: translateY(-5px);   /* 向上移动5px */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); /* 悬停时阴影加深 */
}

/* ==================== 视频缩略图样式 ==================== */
/* 视频卡片中的缩略图区域 */
.video-thumbnail {
    position: relative;            /* 相对定位，为子元素绝对定位提供参考 */
    overflow: hidden;              /* 溢出隐藏 */
}

/* ==================== 视频缩略图图片样式 ==================== */
/* 视频缩略图图片 */
.video-thumbnail img {
    width: 100%;                   /* 宽度100%，填充容器 */
    height: 180px;                 /* 固定高度180px */
    object-fit: cover;             /* 保持比例填充，可能裁剪 */
    transition: var(--transition); /* 使用定义的过渡效果 */
}

/* ==================== 视频缩略图悬停效果 ==================== */
/* 鼠标悬停在视频卡片上时缩略图的放大效果 */
.video-card:hover .video-thumbnail img {
    transform: scale(1.05);        /* 放大到105% */
}

/* ==================== 播放按钮样式 ==================== */
/* 视频缩略图上的播放按钮 */
.play-btn {
    position: absolute;            /* 绝对定位 */
    top: 50%;                      /* 垂直居中 */
    left: 50%;                     /* 水平居中 */
    transform: translate(-50%, -50%); /* 精确居中定位 */
    width: 50px;                   /* 宽度50px */
    height: 50px;                  /* 高度50px */
    background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
    border-radius: 50%;            /* 圆形 */
    display: flex;                 /* 使用弹性布局 */
    align-items: center;           /* 垂直居中对齐 */
    justify-content: center;       /* 水平居中对齐 */
    transition: var(--transition); /* 使用定义的过渡效果 */
}

/* ==================== 播放按钮三角形样式 ==================== */
/* 播放按钮中的三角形图标 */
.play-btn::after {
    content: '';                   /* 伪元素内容为空 */
    width: 0;                      /* 宽度0 */
    height: 0;                     /* 高度0 */
    border-left: 12px solid white; /* 左边框形成三角形 */
    border-top: 8px solid transparent; /* 上边框透明 */
    border-bottom: 8px solid transparent; /* 下边框透明 */
    border-right: 0;               /* 右边框为0 */
    margin-left: 2px;              /* 左边距2px，微调位置 */
}

/* ==================== 播放按钮悬停效果 ==================== */
/* 鼠标悬停在视频卡片上时播放按钮的效果 */
.video-card:hover .play-btn {
    background: rgba(0, 0, 0, 0.9); /* 背景变深 */
}

/* ==================== 视频信息样式 ==================== */
/* 视频卡片中的文字信息区域 */
.video-info {
    padding: 15px;                 /* 内边距15px */
}

/* ==================== 视频标题样式 ==================== */
/* 视频信息的标题 */
.video-title {
    font-weight: 500;              /* 中等字重 */
    margin-bottom: 5px;            /* 底部外边距5px */
    color: var(--dark-color);      /* 使用深色变量 */
}

/* ==================== 视频所属板块样式 ==================== */
/* 视频信息的所属板块 */
.video-section {
    font-size: 0.9rem;             /* 字体大小相对单位 */
    color: var(--primary-color);   /* 使用主色调 */
}

/* ==================== 页脚区域样式 ==================== */
/* 页面底部区域 */
.footer {
    margin-top: 20px;              /* 顶部外边距40px */
    text-align: center;            /* 文字居中对齐 */
    padding: 10px 0;               /* 上下内边距20px */
    border-top: 1px solid #dee2e6; /* 顶部边框，浅灰色 */
}

/* ==================== 响应式设计：大屏幕 ==================== */
/* 屏幕宽度小于等于1200px时的样式 */
@media (max-width: 1200px) {
    .container {
        width: 98%;                /* 容器宽度增加到98% */
    }
}

/* ==================== 响应式设计：中等屏幕 ==================== */
/* 屏幕宽度小于等于992px时的样式 */
@media (max-width: 992px) {
    .main-content {
        grid-template-columns: 1fr; /* 改为单列布局 */
    }

    .navbar {
        flex-wrap: wrap;           /* 允许换行 */
        justify-content: center;   /* 居中对齐 */
    }

    .navbar a {
        padding: 6px 12px;         /* 内边距减小 */
    }
}

/* ==================== 响应式设计：平板和小屏幕 ==================== */
/* 屏幕宽度小于等于768px时的样式 */
@media (max-width: 768px) {
    .book-section {
        flex-direction: column;    /* 改为垂直布局 */
    }

    .book-cover {
        margin-right: 0;           /* 去除右边距 */
        margin-bottom: 15px;       /* 添加底部外边距 */
        flex: 0 0 auto;            /* 自动尺寸 */
    }

    .logo-section {
        flex-direction: column;    /* 改为垂直布局 */
        text-align: center;        /* 文字居中对齐 */
        gap: 8px;                  /* 子元素间距8px */
    }

    .user-status {
        justify-content: center;   /* 居中对齐 */
    }

    .navbar a {
        padding: 5px 10px;         /* 内边距进一步减小 */
        font-size: 13px;           /* 字体大小减小 */
    }

    /* ==================== 移动端按钮调整 ==================== */
    .btn {
        padding: 8px 16px;         /* 内边距减小 */
        font-size: 14px;           /* 字体大小14px */
        min-height: 36px;          /* 最小高度36px */
    }

    .auth-buttons {
        gap: 8px;                  /* 间距减小到8px */
    }

    .auth-dropdown-content {
        min-width: 130px;          /* 最小宽度130px */
    }

    .auth-dropdown-content a {
        padding: 8px 14px;         /* 内边距减小 */
        font-size: 13px;           /* 字体大小13px */
    }

    .logo {
        height: 45px;              /* Logo高度减小 */
    }
}

/* ==================== 响应式设计：超小屏幕（手机） ==================== */
/* 屏幕宽度小于等于480px时的样式 */
@media (max-width: 480px) {
    .auth-buttons {
        flex-direction: column;    /* 改为垂直布局 */
        gap: 6px;                  /* 间距6px */
        width: 100%;               /* 宽度100% */
    }

    .auth-buttons .btn {
        width: 100%;               /* 按钮宽度100% */
        justify-content: center;   /* 内容居中对齐 */
        padding: 7px 14px;         /* 内边距进一步减小 */
        min-height: 34px;          /* 最小高度34px */
    }

    .auth-dropdown {
        width: 100%;               /* 宽度100% */
    }

    .auth-dropdown-content {
        width: 100%;               /* 下拉菜单宽度100% */
        min-width: auto;           /* 最小宽度自动 */
        right: auto;               /* 右侧对齐自动 */
        left: 0;                   /* 左侧对齐0 */
    }

    .btn img {
        margin-right: 5px !important; /* 图标右边距5px */
        width: 14px !important;    /* 图标宽度14px */
        height: 14px !important;   /* 图标高度14px */
    }
}

/* ==================== 移动端横屏布局优化 ==================== */
@media (orientation: landscape) and (max-width: 896px) {
    /* 确保整个页面可以滚动 */
    body {
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh;
    }

    /* 头部固定 */
    .header-container {
        position: sticky !important;
        top: 0;
        z-index: 100;
        background: #c2e0ff;
    }

    /* 导航栏横屏滚动 */
    .navbar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

    .navbar a {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* 主内容区域 */
    .main-content {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        margin: 15px 0 !important;
    }

    .left-content {
        flex: 2 !important;
        min-width: 0 !important;
    }

    .right-content {
        flex: 1 !important;
        min-width: 260px !important;
    }

    /* 视频网格横屏优化 */
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 12px !important;
    }

    .video-thumbnail img {
        height: 120px !important;
    }

    /* 书籍章节横屏优化 */
    .book-section {
        flex-direction: row !important;
    }

    .book-cover {
        flex: 0 0 100px !important;
        margin-right: 15px !important;
        margin-bottom: 0 !important;
    }

    .book-cover img {
        max-height: 80px !important;
        object-fit: cover !important;
    }

    .book-item {
        padding: 5px 0 !important;
    }

    /* 按钮横屏紧凑 */
    .btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
        min-height: 32px !important;
    }
}