/**
 * ====================================================================================
 * Athena 图书管理系统 - 首页样式文件 (index.css)
 * ====================================================================================
 * 
 * 功能描述：
 * - 图书管理系统首页的完整视觉样式定义
 * - 基于 Glassmorphism（玻璃拟态）设计风格
 * - 响应式布局，完美适配移动端和桌面端
 * 
 * 页面结构：
 * - 顶部导航栏：Logo、搜索框、用户菜单
 * - 主内容区域：分类标签、书籍网格
 * - 书籍详情模态框：封面展示、信息详情、借阅/购买操作
 * - 分页组件
 * - 底部页脚
 * 
 * 设计特色：
 * - 动态背景光球效果
 * - 毛玻璃效果卡片和模态框
 * - 书籍卡片悬停3D翻转效果
 * - 流畅的过渡动画
 * - 金色主题配色方案
 * 
 * 技术要点：
 * - CSS 自定义属性（变量）统一主题
 * - backdrop-filter 实现毛玻璃效果
 * - CSS Grid 布局实现响应式书籍网格
 * - CSS 动画和过渡增强交互体验
 * - 媒体查询实现移动端适配
 * 
 * 作者：Athena Library 开发团队
 * ====================================================================================
 */

/* ==================== CSS 变量定义 ==================== */
/* 全局设计系统变量，统一颜色、圆角、阴影等视觉属性 */
:root {
    /* 主色调 - 金色系 */
    --primary-gold: #D4AF37;         /* 主金色 - 用于重要元素 */
    --primary-gold-hover: #F2C94C;   /* 金色悬停态 - 更亮的金色 */
    
    /* 玻璃拟态效果 - Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.05);       /* 玻璃背景色 - 微透明白 */
    --glass-border: rgba(255, 255, 255, 0.1);    /* 玻璃边框色 */
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);  /* 玻璃阴影 */
    
    /* 文字颜色 */
    --text-main: #ffffff;                          /* 主文字 - 纯白 */
    --text-secondary: rgba(255, 255, 255, 0.7);   /* 次要文字 - 70%白 */
    --text-dark: #1a1a2e;                          /* 深色文字 - 用于金色背景 */
    
    /* 圆角大小 */
    --radius-sm: 8px;      /* 小圆角 - 按钮、输入框 */
    --radius-md: 12px;     /* 中圆角 - 卡片 */
    --radius-lg: 20px;     /* 大圆角 - 模态框 */
    --radius-xl: 24px;     /* 超大圆角 - 特殊容器 */
}

/* ==================== 全局样式重置 ==================== */
/* 统一所有元素的盒模型和边距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* 使用 border-box 盒模型 */
}

/* HTML 根元素设置 */
html {
    overflow-x: hidden;      /* 防止横向滚动 */
    width: 100%;
}

/* 页面主体样式 */
body {
    /* 字体栈：优先使用 Poppins，回退到系统字体 */
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    /* 深蓝紫色渐变背景 */
    background: #0f0c29;
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
    min-height: 100vh;
    color: var(--text-main);
    overflow-x: hidden;
    position: relative;
    width: 100%;
    max-width: 100vw;        /* 限制最大宽度为视口宽度 */
}

/* ==================== 自定义滚动条样式 ==================== */
/* WebKit 浏览器滚动条 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;             /* 垂直滚动条宽度 */
    height: 10px;            /* 水平滚动条高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: var(--primary-gold);  /* 金色滑块 */
    border-radius: 5px;
}

/* 滑块悬停态 */
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-gold-hover);
}

/* ==================== 文本选中样式 ==================== */
/* 选中文本时的颜色反转 */
::selection {
    background: var(--primary-gold);
    color: var(--text-dark);
}

/* Firefox 兼容 */
::-moz-selection {
    background: var(--primary-gold);
    color: var(--text-dark);
}

/* ==================== 动态背景光球效果 ==================== */
/* 固定定位的光球容器，覆盖整个视口 */
.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;             /* 置于所有内容之下 */
    overflow: hidden;
    pointer-events: none;    /* 不响应鼠标事件 */
}

/* 光球基础样式 */
.blob {
    position: absolute;
    border-radius: 50%;      /* 圆形 */
    filter: blur(80px);      /* 模糊产生光晕效果 */
    opacity: 0.6;
    animation: float 10s infinite ease-in-out;
}

/* 第一个光球 - 紫色，位于左上角 */
.blob:nth-child(1) {
    top: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: #7b4397;     /* 紫色 */
}

/* 第二个光球 - 红色，位于右下角 */
.blob:nth-child(2) {
    bottom: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: #dc2430;     /* 红色 */
    animation-delay: -2s;    /* 错开动画起始时间 */
}

/* 第三个光球 - 金色，位于右侧中部 */
.blob:nth-child(3) {
    top: 40%;
    right: 20%;
    width: 300px;
    height: 300px;
    background: var(--primary-gold);
    opacity: 0.3;            /* 更淡，避免喧宾夺主 */
    animation-delay: -5s;
}

/* 光球浮动动画 */
@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, 50px); }
}

/* ==================== 顶部导航栏 ==================== */
/* 导航栏容器 - 玻璃拟态效果 */
.header {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);   /* Safari 兼容 */
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: sticky;        /* 粘性定位，滚动时固定在顶部 */
    top: 0;
    z-index: 100;
}

/* 导航栏内容容器 */
.header .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 导航栏布局 */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    gap: 20px;
}

/* Logo 样式 */
.logo {
    font-family: 'Playfair Display', serif;  /* 衬线字体，优雅感 */
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-gold);
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);  /* 金色发光 */
    flex-shrink: 0;          /* 防止被压缩 */
}

.logo i {
    font-size: 32px;
}

/* ==================== 搜索框样式 ==================== */
/* Windows 11 风格搜索框 - 圆角胶囊形状 */
.header-search {
    flex: 1;
    max-width: 250px;
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;     /* 胶囊形圆角 */
    padding: 8px 16px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

/* 搜索框悬停效果 */
.header-search:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
}

/* 搜索框聚焦效果 */
.header-search:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);  /* 金色光晕 */
}

/* 搜索图标 */
.header-search i.fa-search {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin-right: 10px;
    flex-shrink: 0;
}

/* 搜索输入框 */
.header-search input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 14px;
    outline: none;
    padding: 0;
    min-width: 0;            /* 允许收缩 */
}

/* 搜索框占位符 */
.header-search input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
}

/* 清除按钮 - 默认隐藏 */
.header-search .btn-clear {
    display: none;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s;
    margin-left: 8px;
    flex-shrink: 0;
}

.header-search .btn-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

/* 有输入内容时显示清除按钮 */
.header-search input:not(:placeholder-shown) ~ .btn-clear {
    display: block;
}

/* ==================== 搜索建议下拉框 ==================== */
.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);   /* 搜索框下方 8px */
    left: 0;
    right: 0;
    background: rgba(26, 26, 46, 0.98);
    backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: none;           /* 默认隐藏 */
}

/* 搜索建议显示状态 */
.search-suggestions.show {
    display: block;
    animation: fadeInDown 0.2s ease;
}

/* 下拉淡入动画 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 搜索建议项 */
.search-suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

/* 建议项悬停效果 */
.search-suggestion-item:hover {
    background: rgba(212, 175, 55, 0.15);
}

/* 建议项图标 */
.search-suggestion-item i {
    color: var(--primary-gold);
    font-size: 14px;
    flex-shrink: 0;
}

/* 建议项文字 */
.suggestion-text {
    flex: 1;
    min-width: 0;
}

.suggestion-title {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-author {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 2px;
}

/* 搜索建议 - 空状态提示 */
.search-suggestions-empty {
    padding: 20px;                          /* 内边距 */
    text-align: center;                     /* 文字居中 */
    color: var(--text-secondary);           /* 次要文字颜色 */
    font-size: 14px;                        /* 字体大小 */
}


/* ====================================================================================
   导航菜单
   ====================================================================================
   桌面端水平导航链接区域，包含首页、借阅记录、个人中心等入口
==================================================================================== */

/* 导航菜单容器 - Flexbox水平布局 */
.nav-menu {
    display: flex;                          /* Flex布局 */
    gap: 15px;                              /* 菜单项间距 */
    align-items: center;                    /* 垂直居中 */
}

/* 导航链接样式 - 带图标的按钮式链接 */
.nav-menu a {
    text-decoration: none;                  /* 移除下划线 */
    color: var(--text-secondary);           /* 默认次要颜色 */
    padding: 10px 20px;                     /* 内边距 */
    border-radius: var(--radius-md);        /* 圆角 */
    border: 1px solid transparent;          /* 透明边框(为悬停预留) */
    transition: all 0.3s ease;              /* 平滑过渡动画 */
    display: flex;                          /* Flex布局(图标+文字) */
    align-items: center;                    /* 垂直居中 */
    gap: 8px;                               /* 图标与文字间距 */
}

/* 导航链接悬停效果 - 金色高亮 */
.nav-menu a:hover {
    background: rgba(212, 175, 55, 0.2);    /* 金色半透明背景 */
    color: var(--primary-gold);             /* 金色文字 */
    border-color: rgba(212, 175, 55, 0.3);  /* 金色边框 */
}

/* 导航链接激活状态 - 金色渐变填充 */
.nav-menu a.active {
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-hover)); /* 金色渐变背景 */
    color: var(--text-dark);                /* 深色文字(与金色背景对比) */
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3); /* 金色光晕阴影 */
}

/* 移动端菜单切换按钮 - 汉堡菜单图标 */
.menu-toggle {
    display: none;                          /* 桌面端隐藏 */
    background: none;                       /* 无背景 */
    border: none;                           /* 无边框 */
    font-size: 24px;                        /* 图标大小 */
    color: var(--text-main);                /* 主文字颜色 */
    cursor: pointer;                        /* 手型光标 */
}


/* ====================================================================================
   欢迎区域 (Welcome Section)
   ====================================================================================
   首页主视觉区域，展示系统标题和欢迎语
   - 玻璃拟态设计风格
   - 标题文字渐变闪烁动画
   - 淡入上升入场动画
==================================================================================== */

/* 欢迎区域容器 - 玻璃拟态卡片 */
.welcome-section {
    max-width: 1200px;                      /* 最大宽度 */
    margin: 50px auto;                      /* 上下间距+水平居中 */
    padding: 60px 40px;                     /* 大内边距营造宽敞感 */
    text-align: center;                     /* 内容居中 */
    background: var(--glass-bg);            /* 玻璃背景 */
    backdrop-filter: blur(20px);            /* 磨砂模糊效果 */
    border: 1px solid var(--glass-border);  /* 玻璃边框 */
    border-radius: var(--radius-xl);        /* 超大圆角 */
    box-shadow: var(--glass-shadow);        /* 玻璃阴影 */
    animation: fadeInUp 0.6s ease-out;      /* 淡入上升动画 */
}

/* 
 * 欢迎标题 - 渐变闪烁效果
 * 使用background-clip: text实现渐变文字
 * shimmer动画让渐变流动产生闪烁效果
 */
.welcome-title {
    font-family: 'Playfair Display', serif;  /* 衬线字体，优雅感 */
    font-size: 56px;                         /* 超大字号 */
    margin-bottom: 20px;                     /* 下间距 */
    /* 渐变背景 - 金色到白色再到金色 */
    background: linear-gradient(135deg, var(--primary-gold), #fff, var(--primary-gold-hover));
    background-size: 200% 200%;              /* 背景2倍大小(用于动画位移) */
    -webkit-background-clip: text;           /* 背景裁剪到文字 (Webkit) */
    -webkit-text-fill-color: transparent;    /* 文字填充透明 (Webkit) */
    background-clip: text;                   /* 背景裁剪到文字 (标准) */
    animation: shimmer 3s infinite;          /* 闪烁动画,3秒循环 */
}

/* 闪烁动画 - 通过移动背景位置产生流光效果 */
@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }    /* 起始/结束位置 */
    50% { background-position: 100% 50%; }       /* 中间位置 */
}

/* 欢迎副标题 - 简介文字 */
.welcome-subtitle {
    font-size: 18px;                        /* 适中字号 */
    color: var(--text-secondary);           /* 次要文字颜色 */
    line-height: 1.8;                       /* 宽松行高 */
}


/* ====================================================================================
   特色功能卡片区域 (Features Section)
   ====================================================================================
   展示系统四大核心功能：海量藏书、智能借阅、快速购买、个人中心
   - 4列网格布局，响应式适配
   - 卡片悬停效果：上移+边框发光+顶部装饰条
==================================================================================== */

/* 特色区域容器 */
.features-section {
    max-width: 1200px;                      /* 最大宽度 */
    margin: 0 auto 50px;                    /* 居中+下间距 */
    padding: 0 20px;                        /* 左右内边距 */
}

/* 特色功能网格 - 4列布局 */
.features-grid {
    display: grid;                          /* CSS Grid布局 */
    grid-template-columns: repeat(4, 1fr);  /* 4等分列 */
    gap: 25px;                              /* 网格间距 */
}

/* 响应式 - 平板端2列布局 */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 响应式 - 移动端单列布局 */
@media (max-width: 640px) {
    .features-grid {
        grid-template-columns: 1fr;          /* 单列 */
    }
}

/* 
 * 特色功能卡片
 * 玻璃拟态卡片设计，包含丰富的交互效果：
 * - ::before 顶部装饰条动画
 * - ::after 悬停光晕效果
 * - 上移+阴影变化
 */
.feature-card {
    background: var(--glass-bg);            /* 玻璃背景 */
    backdrop-filter: blur(12px);            /* 磨砂效果 */
    border: 1px solid var(--glass-border);  /* 玻璃边框 */
    border-radius: var(--radius-lg);        /* 大圆角 */
    padding: 35px 25px;                     /* 内边距 */
    text-align: center;                     /* 内容居中 */
    transition: all 0.3s ease;              /* 过渡动画 */
    position: relative;                     /* 定位上下文 */
    overflow: hidden;                       /* 隐藏溢出(动画元素) */
    animation: fadeInUp 0.6s ease-out;      /* 入场动画 */
    cursor: pointer;                        /* 手型光标 */
    min-height: 200px;                      /* 最小高度 */
    display: flex;                          /* Flex布局 */
    flex-direction: column;                 /* 垂直排列 */
    justify-content: center;                /* 垂直居中 */
    align-items: center;                    /* 水平居中 */
}

/* 卡片交错动画延迟 - 产生依次入场效果 */
.feature-card:nth-child(1) { animation-delay: 0.1s; }  /* 第1个卡片 */
.feature-card:nth-child(2) { animation-delay: 0.2s; }  /* 第2个卡片 */
.feature-card:nth-child(3) { animation-delay: 0.3s; }  /* 第3个卡片 */
.feature-card:nth-child(4) { animation-delay: 0.4s; }  /* 第4个卡片 */

/* 卡片顶部装饰条 - 悬停时从左滑入 */
.feature-card::before {
    content: '';                            /* 伪元素内容 */
    position: absolute;                     /* 绝对定位 */
    top: 0;                                 /* 顶部 */
    left: 0;
    right: 0;
    height: 4px;                            /* 装饰条高度 */
    background: linear-gradient(90deg, var(--primary-gold), var(--primary-gold-hover)); /* 金色渐变 */
    transform: scaleX(0);                   /* 初始宽度为0 */
    transition: transform 0.3s ease;        /* 缩放动画 */
}

/* 卡片背景光晕 - 悬停时扩散效果 */
.feature-card::after {
    content: '';                            /* 伪元素内容 */
    position: absolute;                     /* 绝对定位 */
    top: 50%;                               /* 垂直居中 */
    left: 50%;                              /* 水平居中 */
    transform: translate(-50%, -50%) scale(0); /* 居中+初始缩放为0 */
    width: 100%;
    height: 100%;
    /* 径向渐变光晕效果 */
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    transition: transform 0.5s ease;        /* 缩放动画 */
    pointer-events: none;                   /* 不响应鼠标事件 */
}

/* 卡片悬停效果 - 上移+加深阴影+边框高亮 */
.feature-card:hover {
    transform: translateY(-8px);            /* 上移8px */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* 加深阴影 */
    border-color: var(--primary-gold);      /* 金色边框 */
    background: rgba(255, 255, 255, 0.08);  /* 背景变亮 */
}

/* 悬停时顶部装饰条展开 */
.feature-card:hover::before {
    transform: scaleX(1);                   /* 展开到100%宽度 */
}

/* 悬停时背景光晕扩散 */
.feature-card:hover::after {
    transform: translate(-50%, -50%) scale(1); /* 扩散到100% */
}

/* 特色卡片图标 - 大号金色Font Awesome图标 */
.feature-icon {
    font-size: 52px;                        /* 大图标 */
    color: var(--primary-gold);             /* 金色 */
    margin-bottom: 20px;                    /* 下间距 */
    display: inline-block;                  /* 行内块 */
    transition: all 0.4s ease;              /* 过渡动画 */
    position: relative;                     /* 相对定位 */
    z-index: 1;                             /* 层级(在光晕之上) */
}

/* 图标悬停效果 - 放大+旋转+发光 */
.feature-card:hover .feature-icon {
    transform: scale(1.15) rotate(5deg);    /* 放大115%+顺时针旋转5度 */
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6)); /* 金色发光阴影 */
}

/* 卡片标题 */
.feature-card h3 {
    font-size: 22px;                        /* 字号 */
    margin-bottom: 12px;                    /* 下间距 */
    color: var(--text-main);                /* 主文字颜色 */
    font-weight: 600;                       /* 半粗体 */
    position: relative;                     /* 相对定位 */
    z-index: 1;                             /* 层级 */
    transition: color 0.3s ease;            /* 颜色过渡 */
}

/* 标题悬停变金色 */
.feature-card:hover h3 {
    color: var(--primary-gold);             /* 金色 */
}

/* 卡片描述文字 */
.feature-card p {
    font-size: 15px;                        /* 字号 */
    color: var(--text-secondary);           /* 次要颜色 */
    line-height: 1.7;                       /* 行高 */
    position: relative;                     /* 相对定位 */
    z-index: 1;                             /* 层级 */
    transition: color 0.3s ease;            /* 颜色过渡 */
}

/* 描述文字悬停变亮 */
.feature-card:hover p {
    color: rgba(255, 255, 255, 0.85);       /* 亮白色 */
}


/* ====================================================================================
   筛选区域 (Filter Section)
   ====================================================================================
   图书筛选功能区域，包含分类、价格范围等筛选条件
   采用玻璃拟态卡片设计
==================================================================================== */

/* 筛选区域容器 - 玻璃卡片 */
.filter-section {
    max-width: 1200px;                      /* 最大宽度 */
    margin: 0 auto 50px;                    /* 居中+下间距 */
    padding: 20px 30px;                     /* 内边距 */
    background: var(--glass-bg);            /* 玻璃背景 */
    backdrop-filter: blur(12px);            /* 磨砂效果 */
    border: 1px solid var(--glass-border);  /* 玻璃边框 */
    border-radius: var(--radius-xl);        /* 超大圆角 */
    box-shadow: var(--glass-shadow);        /* 玻璃阴影 */
}


/* ====================================================================================
   通用按钮样式 (Button Styles)
   ====================================================================================
   系统全局按钮样式，包含主要按钮、次要按钮等变体
==================================================================================== */

/* 基础按钮样式 */
.btn {
    padding: 12px 24px;                     /* 内边距 */
    border: none;                           /* 无边框 */
    border-radius: var(--radius-md);        /* 中等圆角 */
    font-size: 14px;                        /* 字号 */
    font-weight: 500;                       /* 中等字重 */
    cursor: pointer;                        /* 手型光标 */
    transition: all 0.3s ease;              /* 过渡动画 */
    display: inline-flex;                   /* 行内Flex布局 */
    align-items: center;                    /* 垂直居中 */
    gap: 8px;                               /* 图标与文字间距 */
    text-decoration: none;                  /* 移除下划线(用于a标签) */
}

/* 主要按钮 - 金色渐变 */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-hover)); /* 金色渐变 */
    color: var(--text-dark);                /* 深色文字 */
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3); /* 金色阴影 */
}

/* 主要按钮悬停效果 */
.btn-primary:hover {
    transform: translateY(-2px);            /* 上移2px */
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); /* 加深阴影 */
}

/* 次要按钮 - 半透明背景 */
.btn-secondary {
    background: rgba(255, 255, 255, 0.1);   /* 白色半透明 */
    color: var(--text-main);                /* 主文字颜色 */
    border: 1px solid var(--glass-border);  /* 玻璃边框 */
}

/* 次要按钮悬停效果 */
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);  /* 背景变亮 */
    border-color: var(--primary-gold);      /* 金色边框 */
}


/* ====================================================================================
   筛选表单区域
   ====================================================================================
   筛选条件表单，包含分类选择、价格范围等控件
==================================================================================== */

/* 筛选表单容器 - Flexbox自适应布局 */
.filter-box {
    margin-top: 25px;                       /* 上间距 */
    padding-top: 25px;                      /* 上内边距 */
    border-top: 1px solid var(--glass-border); /* 顶部分隔线 */
    display: flex;                          /* Flex布局 */
    gap: 15px;                              /* 项目间距 */
    flex-wrap: wrap;                        /* 允许换行 */
    align-items: flex-end;                  /* 底部对齐 */
}

/* 筛选项容器 - 标签+控件的垂直布局 */
.filter-item {
    display: flex;                          /* Flex布局 */
    flex-direction: column;                 /* 垂直排列 */
    gap: 8px;                               /* 标签与控件间距 */
    flex: 1;                                /* 弹性伸缩 */
    min-width: 200px;                       /* 最小宽度 */
}

/* 筛选项标签 */
.filter-item label {
    font-weight: 600;                       /* 半粗体 */
    color: var(--text-main);                /* 主文字颜色 */
    display: flex;                          /* Flex布局(图标+文字) */
    align-items: center;                    /* 垂直居中 */
    gap: 8px;                               /* 图标与文字间距 */
    font-size: 14px;                        /* 字号 */
}

/* 标签图标 - 金色 */
.filter-item label i {
    color: var(--primary-gold);             /* 金色 */
}

/* 筛选下拉选择框 */
.filter-item select {
    padding: 10px 15px;                     /* 内边距 */
    border: 1px solid var(--glass-border);  /* 玻璃边框 */
    border-radius: var(--radius-md);        /* 中等圆角 */
    background: rgba(0, 0, 0, 0.2);         /* 深色半透明背景 */
    color: var(--text-main);                /* 主文字颜色 */
    font-size: 14px;                        /* 字号 */
    cursor: pointer;                        /* 手型光标 */
    transition: all 0.3s;                   /* 过渡动画 */
}

/* 下拉选项样式 - 深色背景 */
.filter-item select option {
    background: #24243e;                    /* 深紫色背景 */
    color: white;                           /* 白色文字 */
}

/* 下拉框聚焦状态 */
.filter-item select:focus {
    outline: none;                          /* 移除默认轮廓 */
    border-color: var(--primary-gold);      /* 金色边框 */
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1); /* 金色光晕 */
}


/* ====================================================================================
   主内容区域 (Main Content)
   ====================================================================================
   图书列表展示区域，包含统计栏、图书网格、分页组件
==================================================================================== */

/* 主内容区容器 */
.main-content {
    padding: 40px 0 80px;                   /* 上下内边距 */
}

/* 内容区内部容器 */
.main-content > .container {
    max-width: 1200px;                      /* 最大宽度 */
    margin: 0 auto;                         /* 水平居中 */
    padding: 0 20px;                        /* 左右内边距 */
}


/* ====================================================================================
   统计栏 (Stats Bar)
   ====================================================================================
   显示当前图书总数、筛选结果数量等统计信息
==================================================================================== */

/* 统计栏容器 - 玻璃卡片 */
.stats-bar {
    display: flex;                          /* Flex布局 */
    justify-content: space-between;         /* 两端对齐 */
    align-items: center;                    /* 垂直居中 */
    background: var(--glass-bg);            /* 玻璃背景 */
    backdrop-filter: blur(12px);            /* 磨砂效果 */
    border: 1px solid var(--glass-border);  /* 玻璃边框 */
    padding: 20px 30px;                     /* 内边距 */
    border-radius: var(--radius-lg);        /* 大圆角 */
    margin-bottom: 30px;                    /* 下间距 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); /* 阴影 */
}

/* 统计项 - 图标+数值的水平布局 */
.stat-item {
    display: flex;                          /* Flex布局 */
    align-items: center;                    /* 垂直居中 */
    gap: 12px;                              /* 图标与文字间距 */
    color: var(--text-secondary);           /* 次要颜色 */
}

/* 统计项图标 - 金色 */
.stat-item i {
    color: var(--primary-gold);             /* 金色 */
    font-size: 20px;                        /* 图标大小 */
}

/* 统计数值 */
.stat-item strong {
    color: var(--text-main);                /* 主文字颜色 */
    font-size: 18px;                        /* 字号 */
}


/* ====================================================================================
   加载状态 (Loading State)
   ====================================================================================
   数据加载时显示的旋转动画和提示文字
==================================================================================== */

/* 加载容器 - 默认隐藏 */
.loading {
    display: none;                          /* 默认不显示 */
    text-align: center;                     /* 内容居中 */
    padding: 80px 20px;                     /* 大内边距 */
}

/* 加载中显示状态 */
.loading.show {
    display: block;                         /* 显示 */
}

/* 
 * 旋转加载器 (Spinner)
 * 使用border技巧创建圆形加载动画
 * 顶部边框为金色，形成旋转效果
 */
.spinner {
    width: 60px;                            /* 宽度 */
    height: 60px;                           /* 高度 */
    border: 5px solid rgba(255, 255, 255, 0.1); /* 灰色边框圆环 */
    border-top-color: var(--primary-gold);  /* 顶部金色(旋转指示器) */
    border-radius: 50%;                     /* 圆形 */
    animation: spin 0.8s linear infinite;   /* 旋转动画,0.8秒一圈 */
    margin: 0 auto 20px;                    /* 居中+下间距 */
}

/* 旋转动画关键帧 */
@keyframes spin {
    to { transform: rotate(360deg); }       /* 旋转360度 */
}

/* 加载提示文字 */
.loading p {
    font-size: 16px;                        /* 字号 */
    color: var(--text-secondary);           /* 次要颜色 */
}


/* ====================================================================================
   空状态 (Empty State)
   ====================================================================================
   无数据时显示的占位内容，包含大图标和提示信息
==================================================================================== */

/* 空状态容器 */
.empty-state {
    text-align: center;                     /* 内容居中 */
    padding: 100px 20px;                    /* 大内边距 */
    color: var(--text-secondary);           /* 次要颜色 */
}

/* 空状态图标 - 大尺寸淡色图标 */
.empty-state i {
    font-size: 80px;                        /* 超大图标 */
    margin-bottom: 30px;                    /* 下间距 */
    color: rgba(255, 255, 255, 0.2);        /* 淡白色 */
}

/* 空状态标题 */
.empty-state h3 {
    font-size: 24px;                        /* 字号 */
    margin-bottom: 15px;                    /* 下间距 */
    color: var(--text-main);                /* 主文字颜色 */
}

/* 空状态描述 */
.empty-state p {
    font-size: 16px;                        /* 字号 */
}


/* ====================================================================================
   图书卡片网格 (Books Grid)
   ====================================================================================
   图书列表的响应式网格布局，使用CSS Grid实现自适应排列
==================================================================================== */

/* 图书网格容器 - 自适应列数 */
.books-grid {
    display: grid;                          /* CSS Grid布局 */
    /* auto-fill + minmax实现响应式列数 */
    /* 每列最小240px，最大1fr(等分剩余空间) */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;                              /* 网格间距 */
    margin-bottom: 40px;                    /* 下间距 */
}


/* ====================================================================================
   图书卡片 (Book Card)
   ====================================================================================
   单本图书的展示卡片，包含封面、书名、作者、价格等信息
   - 玻璃拟态设计
   - 悬停上移效果
   - 边框发光效果
==================================================================================== */

/* 图书卡片容器 */
.book-card {
    background: var(--glass-bg);            /* 玻璃背景 */
    backdrop-filter: blur(12px);            /* 磨砂效果 */
    border: 1px solid var(--glass-border);  /* 玻璃边框 */
    border-radius: var(--radius-lg);        /* 大圆角 */
    overflow: hidden;                       /* 隐藏溢出(封面图) */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); /* 卡片阴影 */
    transition: all 0.3s ease;              /* 过渡动画 */
    cursor: pointer;                        /* 手型光标 */
    position: relative;                     /* 定位上下文 */
    animation: scaleIn 0.3s ease-out;       /* 缩放入场动画 */
}

/* 卡片入场动画 - 从90%缩放淡入到100% */
@keyframes scaleIn {
    from {
        opacity: 0;                         /* 起始透明 */
        transform: scale(0.9);              /* 起始缩放90% */
    }
    to {
        opacity: 1;                         /* 结束不透明 */
        transform: scale(1);                /* 结束100% */
    }
}

/* 
 * 卡片发光边框效果
 * 使用::before伪元素在卡片外围创建渐变发光层
 * 悬停时通过opacity显示
 */
.book-card::before {
    content: '';                            /* 伪元素内容 */
    position: absolute;                     /* 绝对定位 */
    top: -2px;                              /* 向外扩展2px */
    left: -2px;
    right: -2px;
    bottom: -2px;
    /* 对角渐变：金色-透明-金色 */
    background: linear-gradient(135deg, var(--primary-gold), transparent, var(--primary-gold));
    border-radius: var(--radius-lg);        /* 匹配卡片圆角 */
    opacity: 0;                             /* 默认隐藏 */
    transition: opacity 0.3s;               /* 透明度过渡 */
    z-index: -1;                            /* 置于卡片下层 */
}

/* 卡片悬停效果 - 上移+加深阴影+金色边框 */
.book-card:hover {
    transform: translateY(-8px);            /* 上移8px */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); /* 加深阴影 */
    border-color: var(--primary-gold);      /* 金色边框 */
}

/* 悬停时显示发光边框 */
.book-card:hover::before {
    opacity: 0.5;                           /* 半透明显示 */
}


/* ====================================================================================
   图书封面区域
   ====================================================================================
   展示图书封面图片或占位符，带有底部渐变遮罩和状态徽章
==================================================================================== */

/* 封面容器 */
.book-cover {
    width: 100%;                            /* 全宽 */
    height: 240px;                          /* 固定高度 */
    /* 默认渐变背景(当无封面时显示) */
    background: linear-gradient(135deg, var(--primary-gold), #7b4397);
    display: flex;                          /* Flex布局 */
    align-items: center;                    /* 垂直居中 */
    justify-content: center;                /* 水平居中 */
    position: relative;                     /* 定位上下文 */
    overflow: hidden;                       /* 隐藏溢出 */
}

/* 封面图片 - 填充整个容器 */
.book-cover img {
    width: 100%;                            /* 全宽 */
    height: 100%;                           /* 全高 */
    object-fit: cover;                      /* 裁剪填充 */
}

/* 封面占位符图标(无封面时显示) */
.book-cover-placeholder {
    font-size: 64px;                        /* 大图标 */
    color: rgba(255, 255, 255, 0.3);        /* 半透明白色 */
}

/* 封面底部渐变遮罩 - 增强文字可读性 */
.book-cover::after {
    content: '';                            /* 伪元素内容 */
    position: absolute;                     /* 绝对定位覆盖封面 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 底部渐变：60%透明 -> 70%黑色 */
    background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7));
}


/* ====================================================================================
   图书状态徽章
   ====================================================================================
   显示在封面右上角的状态标签：可借阅/不可借阅/已下架
==================================================================================== */

/* 可用状态徽章 - 绿色 */
.book-status-badge {
    position: absolute;                     /* 绝对定位 */
    top: 12px;                              /* 距顶部12px */
    right: 12px;                            /* 距右侧12px */
    padding: 6px 14px;                      /* 内边距 */
    border-radius: 20px;                    /* 圆角药丸形状 */
    font-size: 12px;                        /* 字号 */
    font-weight: 600;                       /* 半粗体 */
    background: rgba(46, 213, 115, 0.9);    /* 绿色背景(可用) */
    color: white;                           /* 白色文字 */
    backdrop-filter: blur(10px);            /* 磨砂效果 */
    z-index: 1;                             /* 在渐变遮罩之上 */
}

/* 不可用状态徽章 - 红色 */
.book-status-badge.unavailable {
    background: rgba(231, 76, 60, 0.9);     /* 红色背景 */
}

/* 
 * 已下架角标 - 斜角丝带样式
 * 通过rotate(45deg)旋转实现右上角45度斜角效果
 */
.book-offline-badge {
    position: absolute;                     /* 绝对定位 */
    top: 20px;                              /* 距顶部 */
    right: -35px;                           /* 向右偏移(配合旋转) */
    padding: 6px 40px;                      /* 左右大内边距(拉长丝带) */
    background: rgba(149, 165, 166, 0.95);  /* 灰色背景 */
    color: white;                           /* 白色文字 */
    font-size: 12px;                        /* 字号 */
    font-weight: 600;                       /* 半粗体 */
    transform: rotate(45deg);               /* 顺时针旋转45度 */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); /* 阴影 */
    z-index: 2;                             /* 最高层级 */
    text-align: center;                     /* 文字居中 */
}

/* 下架图书卡片整体样式 - 降低饱和度和透明度 */
.book-card.book-offline {
    opacity: 0.7;                           /* 70%透明度 */
    filter: grayscale(50%);                 /* 50%灰度滤镜 */
}

/* 下架图书封面图片 - 更高灰度 */
.book-card.book-offline .book-cover img {
    filter: grayscale(80%);                 /* 80%灰度滤镜 */
}


/* ====================================================================================
   图书信息区域
   ====================================================================================
   封面下方的文字信息区域，包含书名、作者、分类、价格、库存
==================================================================================== */

/* 信息区容器 */
.book-info {
    padding: 15px;                          /* 内边距 */
}

/* 
 * 图书标题 - 两行截断
 * 使用-webkit-line-clamp实现多行文字截断省略
 */
.book-title {
    font-size: 16px;                        /* 字号 */
    font-weight: 600;                       /* 半粗体 */
    margin-bottom: 8px;                     /* 下间距 */
    color: var(--text-main);                /* 主文字颜色 */
    display: -webkit-box;                   /* Webkit盒模型 */
    -webkit-line-clamp: 2;                  /* 最多显示2行 */
    -webkit-box-orient: vertical;           /* 垂直方向 */
    overflow: hidden;                       /* 隐藏溢出 */
    min-height: 48px;                       /* 最小高度(2行) */
    line-height: 1.5;                       /* 行高 */
}

/* 图书作者 */
.book-author {
    font-size: 14px;                        /* 字号 */
    color: var(--text-secondary);           /* 次要颜色 */
    margin-bottom: 12px;                    /* 下间距 */
}

/* 图书分类标签 - 金色药丸形状 */
.book-category {
    display: inline-block;                  /* 行内块 */
    padding: 6px 14px;                      /* 内边距 */
    background: rgba(212, 175, 55, 0.15);   /* 淡金色背景 */
    color: var(--primary-gold);             /* 金色文字 */
    border: 1px solid rgba(212, 175, 55, 0.3); /* 金色边框 */
    border-radius: 20px;                    /* 药丸圆角 */
    font-size: 11px;                        /* 小字号 */
    font-weight: 600;                       /* 半粗体 */
    text-transform: uppercase;              /* 大写字母 */
    letter-spacing: 0.5px;                  /* 字间距 */
    margin-bottom: 15px;                    /* 下间距 */
}

/* 图书元信息行 - 价格和库存 */
.book-meta {
    display: flex;                          /* Flex布局 */
    justify-content: space-between;         /* 两端对齐 */
    align-items: center;                    /* 垂直居中 */
    padding-top: 15px;                      /* 上内边距 */
    margin-top: 15px;                       /* 上外边距 */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 顶部分隔线 */
}

/* 图书价格 - 大号金色 */
.book-price {
    font-size: 24px;                        /* 大字号 */
    font-weight: 700;                       /* 粗体 */
    color: var(--primary-gold);             /* 金色 */
    text-shadow: 0 2px 8px rgba(212, 175, 55, 0.3); /* 金色文字阴影 */
}

/* 库存徽章 - 绿色(库存充足) */
.book-stock {
    font-size: 12px;                        /* 字号 */
    padding: 4px 10px;                      /* 内边距 */
    border-radius: 12px;                    /* 圆角 */
    background: rgba(46, 213, 115, 0.2);    /* 淡绿色背景 */
    color: #2ed573;                         /* 绿色文字 */
    border: 1px solid rgba(46, 213, 115, 0.3); /* 绿色边框 */
}

/* 库存徽章 - 黄色(库存较低) */
.book-stock.low-stock {
    background: rgba(241, 196, 15, 0.2);    /* 淡黄色背景 */
    color: #f1c40f;                         /* 黄色文字 */
    border-color: rgba(241, 196, 15, 0.3);  /* 黄色边框 */
}

/* 库存徽章 - 红色(缺货) */
.book-stock.out-of-stock {
    background: rgba(231, 76, 60, 0.2);     /* 淡红色背景 */
    color: #ff6b6b;                         /* 红色文字 */
    border-color: rgba(231, 76, 60, 0.3);   /* 红色边框 */
}


/* ====================================================================================
   分页组件 (Pagination)
   ====================================================================================
   图书列表底部的分页导航，包含页码按钮和上一页/下一页按钮
==================================================================================== */

/* 分页容器 - 居中的Flex布局 */
.pagination {
    display: flex;                          /* Flex布局 */
    justify-content: center;                /* 水平居中 */
    gap: 10px;                              /* 按钮间距 */
    flex-wrap: wrap;                        /* 允许换行 */
    margin-top: 50px;                       /* 上间距 */
}

/* 分页按钮基础样式 */
.pagination button {
    min-width: 40px;                        /* 最小宽度 */
    height: 40px;                           /* 高度 */
    padding: 10px 15px;                     /* 内边距 */
    border: 1px solid var(--glass-border);  /* 玻璃边框 */
    background: rgba(0, 0, 0, 0.2);         /* 深色半透明背景 */
    color: var(--text-main);                /* 主文字颜色 */
    border-radius: 10px;                    /* 圆角 */
    cursor: pointer;                        /* 手型光标 */
    transition: all 0.3s;                   /* 过渡动画 */
    font-weight: 600;                       /* 半粗体 */
}

/* 分页按钮悬停效果(非禁用状态) */
.pagination button:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.2);    /* 金色半透明背景 */
    border-color: var(--primary-gold);      /* 金色边框 */
    color: var(--primary-gold);             /* 金色文字 */
}

/* 分页按钮禁用状态 */
.pagination button:disabled {
    opacity: 0.3;                           /* 降低透明度 */
    cursor: not-allowed;                    /* 禁用光标 */
}

/* 当前页按钮 - 金色填充 */
.pagination button.active {
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-hover)); /* 金色渐变 */
    color: var(--text-dark);                /* 深色文字 */
    border-color: var(--primary-gold);      /* 金色边框 */
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); /* 金色阴影 */
}


/* ====================================================================================
   模态框 (Modal)
   ====================================================================================
   全屏覆盖的弹出层组件，用于显示图书详情、确认对话框等
   - 深色半透明背景
   - 磨砂玻璃效果
   - 淡入/上滑动画
==================================================================================== */

/* 模态框遮罩层 - 默认隐藏 */
.modal {
    display: none;                          /* 默认不显示 */
    position: fixed;                        /* 固定定位 */
    top: 0;                                 /* 覆盖全屏 */
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);        /* 深色半透明背景 */
    backdrop-filter: blur(10px);            /* 背景磨砂效果 */
    z-index: 1000;                          /* 最高层级 */
    padding: 20px;                          /* 内边距 */
    overflow-y: auto;                       /* 垂直滚动 */
}

/* 模态框显示状态 - Flex居中 */
.modal.show {
    display: flex;                          /* Flex布局 */
    align-items: center;                    /* 垂直居中 */
    justify-content: center;                /* 水平居中 */
    animation: fadeIn 0.3s ease;            /* 淡入动画 */
}

/* 淡入动画关键帧 */
@keyframes fadeIn {
    from { opacity: 0; }                    /* 起始透明 */
    to { opacity: 1; }                      /* 结束不透明 */
}

/* 模态框内容区 - 玻璃拟态卡片 */
.modal-content {
    background: var(--glass-bg);            /* 玻璃背景 */
    backdrop-filter: blur(20px);            /* 深度磨砂效果 */
    border: 1px solid var(--glass-border);  /* 玻璃边框 */
    border-radius: var(--radius-xl);        /* 超大圆角 */
    max-width: 1000px;                      /* 最大宽度 */
    width: 100%;                            /* 全宽 */
    max-height: 90vh;                       /* 最大高度90%视口 */
    overflow-y: auto;                       /* 内容溢出滚动 */
    padding: 30px;                          /* 内边距 */
    position: relative;                     /* 定位上下文(关闭按钮) */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); /* 深度阴影 */
    animation: slideUp 0.3s ease;           /* 上滑动画 */
}

/* 上滑入场动画关键帧 */
@keyframes slideUp {
    from {
        opacity: 0;                         /* 起始透明 */
        transform: translateY(50px);        /* 起始位置偏下50px */
    }
    to {
        opacity: 1;                         /* 结束不透明 */
        transform: translateY(0);           /* 结束位置正常 */
    }
}

/* 
 * 模态框关闭按钮
 * 使用!important确保样式优先级，防止被覆盖
 * 悬停时红色高亮+旋转90度动画
 */
.modal-close {
    position: absolute !important;          /* 绝对定位 */
    top: 20px !important;                   /* 距顶部20px */
    right: 20px !important;                 /* 距右侧20px */
    width: 40px !important;                 /* 按钮宽度 */
    height: 40px !important;                /* 按钮高度 */
    border-radius: 50% !important;          /* 圆形 */
    background: rgba(255, 255, 255, 0.2) !important; /* 半透明白色背景 */
    border: 2px solid rgba(255, 255, 255, 0.3) !important; /* 半透明边框 */
    color: #ffffff !important;              /* 白色图标 */
    font-size: 20px !important;             /* 图标大小 */
    cursor: pointer !important;             /* 手型光标 */
    transition: all 0.3s !important;        /* 过渡动画 */
    display: flex !important;               /* Flex居中 */
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;               /* 最高层级 */
    opacity: 1 !important;                  /* 不透明 */
    visibility: visible !important;         /* 可见 */
}

/* 关闭按钮图标 */
.modal-close i {
    font-size: 20px !important;             /* 图标大小 */
    color: inherit !important;              /* 继承颜色 */
    display: block !important;              /* 块级显示 */
    line-height: 1 !important;              /* 行高为1 */
}

/* 关闭按钮悬停效果 - 红色+旋转 */
.modal-close:hover {
    background: rgba(231, 76, 60, 0.3);     /* 红色半透明背景 */
    border-color: #ff6b6b;                  /* 红色边框 */
    color: #ff6b6b;                         /* 红色图标 */
    transform: rotate(90deg);               /* 顺时针旋转90度 */
}


/* ====================================================================================
   图书详情布局 (Book Detail)
   ====================================================================================
   模态框内的图书详细信息展示，左侧封面+右侧信息的双栏布局
==================================================================================== */

/* 详情容器 - Flex水平布局 */
.book-detail {
    display: flex;                          /* Flex布局 */
    gap: 30px;                              /* 封面与信息间距 */
    align-items: flex-start;                /* 顶部对齐 */
}

/* 详情封面容器 */
.book-detail-cover {
    flex-shrink: 0;                         /* 禁止收缩 */
    width: 200px;                           /* 固定宽度 */
    border-radius: var(--radius-lg);        /* 大圆角 */
    overflow: hidden;                       /* 隐藏溢出 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); /* 深度阴影 */
}

/* 详情封面图片 */
.book-detail-cover img {
    width: 100%;                            /* 全宽 */
    height: auto;                           /* 自适应高度 */
    display: block;                         /* 块级显示(消除底部空隙) */
}

/* 详情信息区容器 */
.book-detail-info {
    flex: 1;                                /* 占据剩余空间 */
    min-width: 0;                           /* 允许收缩(防止溢出) */
}

/* 详情书名标题 */
.book-detail-info h2 {
    font-family: 'Playfair Display', serif;  /* 衬线字体 */
    font-size: 28px;                         /* 大字号 */
    margin-bottom: 20px;                     /* 下间距 */
    color: var(--text-main);                 /* 主文字颜色 */
    line-height: 1.3;                        /* 行高 */
}

/* 详情元信息区 */
.book-detail-meta {
    margin-bottom: 20px;                     /* 下间距 */
}

/* 详情元信息条目 - 单行截断 */
.book-detail-meta p {
    margin-bottom: 10px;                     /* 下间距 */
    font-size: 15px;                         /* 字号 */
    color: var(--text-secondary);            /* 次要颜色 */
    line-height: 1.6;                        /* 行高 */
    white-space: nowrap;                     /* 不换行 */
    overflow: hidden;                        /* 隐藏溢出 */
    text-overflow: ellipsis;                 /* 省略号 */
}

/* 详情元信息标签 */
.book-detail-meta p strong {
    color: var(--text-main);                 /* 主文字颜色 */
    margin-right: 8px;                       /* 右间距 */
}

/* 图书简介区 - 左边金色装饰条 */
.book-detail-description {
    padding: 15px;                           /* 内边距 */
    background: rgba(255, 255, 255, 0.03);   /* 淡白色背景 */
    border-left: 3px solid var(--primary-gold); /* 左侧金色装饰条 */
    border-radius: 8px;                      /* 圆角 */
    margin-bottom: 20px;                     /* 下间距 */
}

/* 简介标题 */
.book-detail-description strong {
    color: var(--primary-gold);              /* 金色 */
    display: block;                          /* 块级显示 */
    margin-bottom: 8px;                      /* 下间距 */
}

/* 简介内容 */
.book-detail-description p {
    line-height: 1.8;                        /* 宽松行高 */
    color: var(--text-secondary);            /* 次要颜色 */
}

/* 详情操作按钮区 - 借阅/购买按钮 */
.book-detail-actions {
    display: flex;                           /* Flex布局 */
    flex-direction: row;                     /* 水平排列 */
    flex-wrap: nowrap;                       /* 不换行 */
    gap: 10px;                               /* 按钮间距 */
    padding-top: 20px;                       /* 上内边距 */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 顶部分隔线 */
}

/* 操作按钮样式 */
.book-detail-actions .btn {
    white-space: nowrap;                     /* 文字不换行 */
    padding: 12px 20px;                      /* 内边距 */
}

/* 成功按钮 - 绿色渐变(借阅/购买) */
.btn-success {
    background: linear-gradient(135deg, #27ae60, #2ecc71); /* 绿色渐变 */
    color: white;                            /* 白色文字 */
    border: none;                            /* 无边框 */
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3); /* 绿色阴影 */
}

/* 成功按钮悬停效果 */
.btn-success:hover {
    background: linear-gradient(135deg, #229954, #27ae60); /* 深绿渐变 */
    transform: translateY(-2px);             /* 上移2px */
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4); /* 加深阴影 */
}

/* 禁用按钮样式 */
.btn-disabled {
    background: rgba(255, 255, 255, 0.1);    /* 淡色背景 */
    color: rgba(255, 255, 255, 0.4);         /* 淡色文字 */
    cursor: not-allowed;                     /* 禁用光标 */
}


/* ====================================================================================
   页脚 (Footer)
   ====================================================================================
   网站底部信息区域，包含版权信息和相关链接
==================================================================================== */

/* 页脚容器 - 玻璃拟态 */
.footer {
    background: var(--glass-bg);             /* 玻璃背景 */
    backdrop-filter: blur(12px);             /* 磨砂效果 */
    border-top: 1px solid var(--glass-border); /* 顶部分隔线 */
    padding: 30px 0;                         /* 上下内边距 */
    text-align: center;                      /* 文字居中 */
}

/* 页脚内容容器 */
.footer .container {
    max-width: 1200px;                       /* 最大宽度 */
    margin: 0 auto;                          /* 水平居中 */
    padding: 0 20px;                         /* 左右内边距 */
}

/* 页脚文字 */
.footer p {
    color: var(--text-secondary);            /* 次要颜色 */
    margin-bottom: 10px;                     /* 下间距 */
    font-size: 14px;                         /* 字号 */
}

/* 页脚链接 - 金色悬停效果 */
.footer a {
    color: var(--primary-gold);              /* 金色 */
    text-decoration: none;                   /* 移除下划线 */
    margin: 0 10px;                          /* 左右间距 */
    transition: color 0.3s;                  /* 颜色过渡 */
}

/* 页脚链接悬停状态 */
.footer a:hover {
    color: var(--primary-gold-hover);        /* 深金色 */
}


/* ====================================================================================
   全局动画关键帧
   ====================================================================================
==================================================================================== */

/* 淡入上移动画 - 通用入场效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;                          /* 起始透明 */
        transform: translateY(30px);         /* 起始下移30px */
    }
    to {
        opacity: 1;                          /* 结束不透明 */
        transform: translateY(0);            /* 结束正常位置 */
    }
}


/* ====================================================================================
   响应式设计 (Responsive Design)
   ====================================================================================
   根据不同屏幕尺寸调整布局和样式
   断点说明：
   - 992px: 平板端
   - 768px: 移动端
   - 480px: 小屏手机
==================================================================================== */

/* ---------- 平板端适配 (max-width: 992px) ---------- */
@media (max-width: 992px) {
    /* 搜索框缩小 */
    .header-search {
        max-width: 200px;                    /* 限制最大宽度 */
    }
}


/* ---------- 移动端适配 (max-width: 768px) ---------- */
@media (max-width: 768px) {
    /* 移除body默认间距 */
    body {
        padding: 0;
        margin: 0;
    }

    /* 容器全宽 */
    .container {
        max-width: 100%;                     /* 全宽 */
        padding: 0 15px;                     /* 小内边距 */
    }

    /* 欢迎标题缩小 */
    .welcome-title {
        font-size: 36px;                     /* 缩小字号 */
    }

    /* 欢迎区域调整 */
    .welcome-section {
        padding: 40px 15px;                  /* 小内边距 */
        margin: 30px 15px;                   /* 小外边距 */
        max-width: calc(100vw - 30px);       /* 全宽减去边距 */
    }

    /* 特色区域隐藏(移动端不显示) */
    .features-section {
        display: none;                       /* 隐藏 */
    }

    /* 筛选区域调整 */
    .filter-section {
        margin: 0 15px 30px;                 /* 调整边距 */
        padding: 20px 15px;                  /* 小内边距 */
        max-width: calc(100vw - 30px);       /* 全宽减去边距 */
    }

    /* 筛选表单垂直排列 */
    .filter-box {
        flex-direction: column;              /* 垂直排列 */
    }

    /* 筛选项全宽 */
    .filter-item {
        min-width: 100%;                     /* 全宽 */
    }

    /* 头部相对定位(导航菜单下拉) */
    .header {
        position: relative;                  /* 下拉菜单定位上下文 */
    }

    /* 导航栏布局调整 */
    .nav {
        flex-wrap: nowrap;                   /* 不换行 */
        gap: 10px;
        align-items: center;
    }

    /* Logo缩小 */
    .logo {
        font-size: 22px;                     /* 缩小字号 */
        flex-shrink: 0;                      /* 禁止收缩 */
        order: 1;                            /* 排序第1 */
    }

    .logo i {
        font-size: 26px;                     /* 图标大小 */
    }

    /* 搜索框弹性扩展 */
    .header-search {
        flex: 1;                             /* 占据剩余空间 */
        max-width: none;                     /* 取消最大宽度限制 */
        order: 2;                            /* 排序第2 */
        min-width: 0;                        /* 允许收缩 */
    }
    
    /* 菜单切换按钮排序 */
    .menu-toggle {
        order: 3;                            /* 排序第3 */
        flex-shrink: 0;                      /* 禁止收缩 */
        margin-left: auto;                   /* 推到右侧 */
    }

    /* 
     * 移动端导航菜单 - 下拉面板样式
     * 点击汉堡按钮后从顶部下拉显示
     */
    .nav-menu {
        display: none;                       /* 默认隐藏 */
        position: absolute;                  /* 绝对定位 */
        top: 100%;                           /* 在头部下方 */
        left: 0;
        right: 0;
        background: rgba(26, 26, 46, 0.98);  /* 深色半透明背景 */
        backdrop-filter: blur(25px);         /* 深度磨砂 */
        border: 1px solid var(--glass-border); /* 玻璃边框 */
        border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* 底部圆角 */
        padding: 20px;                       /* 内边距 */
        flex-direction: column;              /* 垂直排列 */
        gap: 10px;                           /* 项目间距 */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* 下方阴影 */
        z-index: 1000;                       /* 高层级 */
        max-height: 80vh;                    /* 最大高度80%视口 */
        overflow-y: auto;                    /* 垂直滚动 */
    }

    /* 导航菜单展开状态 */
    .nav-menu.show {
        display: flex;                       /* 显示 */
        animation: slideDown 0.3s ease-out;  /* 下滑动画 */
    }
    
    /* 下滑动画关键帧 */
    @keyframes slideDown {
        from {
            opacity: 0;                      /* 起始透明 */
            transform: translateY(-10px);    /* 起始上移10px */
        }
        to {
            opacity: 1;                      /* 结束不透明 */
            transform: translateY(0);        /* 结束正常位置 */
        }
    }

    /* 导航链接全宽 */
    .nav-menu a {
        width: 100%;                         /* 全宽 */
        justify-content: flex-start;         /* 左对齐 */
    }
    /* 移动端菜单切换按钮 - 显示 */
    .menu-toggle {
        display: block !important;           /* 强制显示 */
        background: none;                    /* 无背景 */
        border: none;                        /* 无边框 */
        font-size: 24px;                     /* 图标大小 */
        color: var(--text-main);             /* 主文字颜色 */
        cursor: pointer;                     /* 手型光标 */
        padding: 10px;                       /* 内边距 */
        z-index: 1001;                       /* 层级 */
    }

    /* 页脚容器小内边距 */
    .footer .container {
        padding: 0 15px;
    }

    /* 主内容小内边距 */
    .main-content > .container {
        padding: 0 15px;
    }

    /* 图书网格 - 更小的卡片 */
    .books-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; /* 最小140px */
        gap: 12px !important;                /* 更小间距 */
        padding: 0 !important;
    }

    /* 封面高度缩小 */
    .book-cover {
        height: 180px !important;            /* 缩小高度 */
    }

    /* 图书信息小内边距 */
    .book-info {
        padding: 12px !important;
    }

    /* 元信息水平排列 */
    .book-meta {
        flex-direction: row !important;      /* 水平 */
        flex-wrap: nowrap !important;        /* 不换行 */
        gap: 8px !important;                 /* 间距 */
        align-items: center !important;
        padding-top: 10px !important;
        margin-top: 10px !important;
    }

    /* 价格字号缩小 */
    .book-price {
        font-size: 16px !important;          /* 缩小字号 */
        white-space: nowrap !important;      /* 不换行 */
    }

    /* 库存徽章缩小 */
    .book-stock {
        font-size: 10px !important;          /* 更小字号 */
        padding: 2px 6px !important;         /* 更小内边距 */
        white-space: nowrap !important;      /* 不换行 */
    }

    /* 统计栏垂直排列 */
    .stats-bar {
        flex-direction: column;              /* 垂直排列 */
        gap: 15px;
        padding: 15px;
        margin: 0 15px 30px;
        max-width: calc(100vw - 30px);
    }

    /* 模态框移动端适配 */
    .modal {
        padding: 20px 15px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
    }

    /* 模态框显示居中 */
    .modal.show {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 模态框内容缩小 */
    .modal-content {
        box-sizing: border-box;              /* 包含内边距计算 */
        padding: 20px 15px;
        margin: 0 auto;
        max-height: 85vh;                    /* 最大高度85%视口 */
        width: auto;
        min-width: 0;
        max-width: calc(100vw - 40px);       /* 留20px边距 */
        flex-shrink: 1;
    }

    /* 详情布局改为垂直 */
    .book-detail {
        flex-direction: column;              /* 垂直排列 */
        gap: 20px;
    }

    /* 详情封面缩小居中 */
    .book-detail-cover {
        width: 150px;                        /* 缩小宽度 */
        margin: 0 auto;                      /* 居中 */
    }

    /* 详情标题缩小居中 */
    .book-detail-info h2 {
        font-size: 20px;                     /* 缩小字号 */
        text-align: center;                  /* 居中 */
    }

    /* 元信息允许换行 */
    .book-detail-meta p {
        font-size: 14px;
        white-space: normal;                 /* 允许换行 */
    }

    /* 简介区小内边距 */
    .book-detail-description {
        padding: 12px;
    }

    /* 操作按钮换行 */
    .book-detail-actions {
        flex-wrap: wrap;                     /* 允许换行 */
        gap: 8px;
    }

    /* 按钮等分宽度 */
    .book-detail-actions .btn {
        flex: 1 1 auto;                      /* 弹性伸缩 */
        min-width: calc(50% - 8px);          /* 最小宽度50% */
        padding: 10px 12px;
        font-size: 13px;
        justify-content: center;
    }
}


/* ---------- 小屏手机适配 (max-width: 480px) ---------- */
@media (max-width: 480px) {
    /* Logo缩小 */
    .logo {
        font-size: 20px;
    }
    .logo i {
        font-size: 24px;
    }

    /* 欢迎标题进一步缩小 */
    .welcome-title {
        font-size: 28px;
    }

    /* 图书网格保持 */
    .books-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 12px !important;
    }
    .book-cover {
        height: 180px !important;
    }
    .book-info {
        padding: 12px !important;
    }

    /* 元信息更紧凑 */
    .book-meta {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;                 /* 更小间距 */
        align-items: center !important;
        padding-top: 8px !important;
        margin-top: 8px !important;
    }

    /* 价格更小 */
    .book-price {
        font-size: 14px !important;          /* 更小字号 */
        white-space: nowrap !important;
    }

    /* 库存徽章更小 */
    .book-stock {
        font-size: 9px !important;           /* 最小字号 */
        padding: 2px 5px !important;
        white-space: nowrap !important;
    }
}


/* ====================================================================================
   登录/注册模态框样式 (Auth Modal)
   ====================================================================================
   首页弹出的登录/注册表单模态框
   - 独立的玻璃拟态表单设计
   - 包含Logo、标题、表单控件、测试账号提示
==================================================================================== */

/* 认证模态框 - 窄宽度 */
.auth-modal {
    max-width: 500px;                        /* 最大宽度500px */
    padding: 40px;                           /* 内边距 */
}

/* 认证头部 - Logo和标题 */
.auth-header {
    text-align: center;                      /* 居中 */
    margin-bottom: 30px;                     /* 下间距 */
}

/* 认证Logo - 圆形图标 */
.auth-logo {
    width: 80px;                             /* 宽度 */
    height: 80px;                            /* 高度 */
    margin: 0 auto 20px;                     /* 居中+下间距 */
    background: var(--glass-bg);             /* 玻璃背景 */
    border: 2px solid var(--primary-gold);   /* 金色边框 */
    border-radius: 50%;                      /* 圆形 */
    display: flex;                           /* Flex居中 */
    align-items: center;
    justify-content: center;
    font-size: 36px;                         /* 图标大小 */
    color: var(--primary-gold);              /* 金色图标 */
}

/* 认证标题 */
.auth-header h2 {
    font-family: 'Playfair Display', serif;  /* 衬线字体 */
    font-size: 28px;                         /* 字号 */
    margin-bottom: 8px;                      /* 下间距 */
    color: var(--text-main);                 /* 主文字颜色 */
}

/* 认证副标题 */
.auth-header p {
    font-size: 14px;                         /* 字号 */
    color: var(--text-secondary);            /* 次要颜色 */
}

/* 表单组 */
.auth-modal .form-group {
    margin-bottom: 20px;                     /* 下间距 */
}

/* 表单标签 */
.auth-modal .form-group label {
    display: block;                          /* 块级显示 */
    margin-bottom: 8px;                      /* 下间距 */
    color: var(--text-main);                 /* 主文字颜色 */
    font-size: 14px;                         /* 字号 */
    font-weight: 500;                        /* 中等字重 */
}

/* 输入框组 - 带图标的输入框 */
.auth-modal .input-group {
    position: relative;                      /* 定位上下文 */
}

/* 输入框前置图标 */
.auth-modal .input-group i {
    position: absolute;                      /* 绝对定位 */
    left: 15px;                              /* 距左侧15px */
    top: 50%;                                /* 垂直居中 */
    transform: translateY(-50%);             /* 精确垂直居中 */
    color: var(--text-secondary);            /* 次要颜色 */
    font-size: 16px;                         /* 图标大小 */
}

/* 输入框样式 - 左侧预留图标空间 */
.auth-modal .input-group input {
    width: 100%;                             /* 全宽 */
    padding: 12px 15px 12px 45px;            /* 左侧大内边距(图标位置) */
    background: rgba(255, 255, 255, 0.05);   /* 淡色背景 */
    border: 1px solid var(--glass-border);   /* 玻璃边框 */
    border-radius: var(--radius-sm);         /* 小圆角 */
    color: var(--text-main);                 /* 主文字颜色 */
    font-size: 14px;                         /* 字号 */
    transition: all 0.3s;                    /* 过渡动画 */
}

/* 输入框聚焦状态 */
.auth-modal .input-group input:focus {
    outline: none;                           /* 移除默认轮廓 */
    border-color: var(--primary-gold);       /* 金色边框 */
    background: rgba(255, 255, 255, 0.08);   /* 背景变亮 */
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1); /* 金色光晕 */
}

/* 输入框占位符 */
.auth-modal .input-group input::placeholder {
    color: var(--text-secondary);            /* 次要颜色 */
}

/* 表单选项行 - 记住我/忘记密码 */
.form-options {
    display: flex;                           /* Flex布局 */
    justify-content: space-between;          /* 两端对齐 */
    align-items: center;                     /* 垂直居中 */
    margin-bottom: 20px;                     /* 下间距 */
}

/* 复选框组 */
.checkbox-group {
    display: flex;                           /* Flex布局 */
    align-items: center;                     /* 垂直居中 */
    gap: 8px;                                /* 间距 */
}

/* 复选框样式 */
.checkbox-group input[type="checkbox"] {
    width: 16px;                             /* 宽度 */
    height: 16px;                            /* 高度 */
    cursor: pointer;                         /* 手型光标 */
}

/* 复选框标签 */
.checkbox-group label {
    font-size: 14px;                         /* 字号 */
    color: var(--text-secondary);            /* 次要颜色 */
    cursor: pointer;                         /* 手型光标 */
}

/* 认证按钮 - 金色渐变全宽按钮 */
.btn-auth {
    width: 100%;                             /* 全宽 */
    padding: 14px;                           /* 内边距 */
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-hover)); /* 金色渐变 */
    border: none;                            /* 无边框 */
    border-radius: var(--radius-sm);         /* 小圆角 */
    color: var(--text-dark);                 /* 深色文字 */
    font-size: 16px;                         /* 字号 */
    font-weight: 600;                        /* 半粗体 */
    cursor: pointer;                         /* 手型光标 */
    transition: all 0.3s;                    /* 过渡动画 */
    display: flex;                           /* Flex居中 */
    align-items: center;
    justify-content: center;
    gap: 8px;                                /* 图标与文字间距 */
}

/* 认证按钮悬停效果 */
.btn-auth:hover {
    transform: translateY(-2px);             /* 上移2px */
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4); /* 金色阴影 */
}

/* 认证按钮禁用状态 */
.btn-auth:disabled {
    opacity: 0.5;                            /* 降低透明度 */
    cursor: not-allowed;                     /* 禁用光标 */
    transform: none;                         /* 禁用变换 */
}

/* 分隔线 - "或"文字分隔 */
.auth-divider {
    margin: 24px 0;                          /* 上下间距 */
    text-align: center;                      /* 居中 */
    position: relative;                      /* 定位上下文 */
}

/* 分隔线装饰线 */
.auth-divider::before {
    content: '';                             /* 伪元素内容 */
    position: absolute;                      /* 绝对定位 */
    top: 50%;                                /* 垂直居中 */
    left: 0;
    right: 0;
    height: 1px;                             /* 线高1px */
    background: var(--glass-border);         /* 玻璃边框色 */
}

/* 分隔线文字 */
.auth-divider span {
    position: relative;                      /* 相对定位(在线之上) */
    padding: 0 15px;                         /* 左右内边距(遮挡线) */
    background: rgba(15, 12, 41, 0.8);       /* 背景色(与模态框匹配) */
    color: var(--text-secondary);            /* 次要颜色 */
    font-size: 14px;                         /* 字号 */
}

/* 认证链接区 - "还没有账号？立即注册" */
.auth-link {
    text-align: center;                      /* 居中 */
    font-size: 14px;                         /* 字号 */
    color: var(--text-secondary);            /* 次要颜色 */
    margin-top: 20px;                        /* 上间距 */
}

/* 认证链接 */
.auth-link a {
    color: var(--primary-gold);              /* 金色 */
    text-decoration: none;                   /* 移除下划线 */
    font-weight: 600;                        /* 半粗体 */
    transition: color 0.3s;                  /* 颜色过渡 */
}

/* 认证链接悬停效果 */
.auth-link a:hover {
    color: var(--primary-gold-hover);        /* 深金色 */
    text-decoration: underline;              /* 添加下划线 */
}

/* 测试账号提示区 - 蓝色信息卡片 */
.test-accounts {
    margin-top: 24px;                        /* 上间距 */
    padding: 16px;                           /* 内边距 */
    background: rgba(52, 152, 219, 0.1);     /* 淡蓝色背景 */
    border: 1px solid rgba(52, 152, 219, 0.3); /* 蓝色边框 */
    border-radius: var(--radius-sm);         /* 小圆角 */
}

/* 测试账号标题 */
.test-accounts h4 {
    font-size: 14px;                         /* 字号 */
    color: #3498db;                          /* 蓝色 */
    margin-bottom: 8px;                      /* 下间距 */
    display: flex;                           /* Flex布局 */
    align-items: center;                     /* 垂直居中 */
    gap: 6px;                                /* 图标与文字间距 */
}

/* 测试账号信息文字 */
.test-accounts p {
    font-size: 13px;                         /* 字号 */
    color: var(--text-secondary);            /* 次要颜色 */
    margin: 4px 0;                           /* 上下间距 */
}

/* 测试账号代码标签 - 用于显示用户名/密码 */
.test-accounts code {
    padding: 2px 6px;                        /* 内边距 */
    background: rgba(255, 255, 255, 0.1);    /* 淡色背景 */
    border-radius: 4px;                      /* 小圆角 */
    color: var(--primary-gold);              /* 金色文字 */
    font-family: 'Courier New', monospace;   /* 等宽字体 */
}

/* 表单行 - 两列布局(用于注册表单) */
.form-row {
    display: grid;                           /* Grid布局 */
    grid-template-columns: 1fr 1fr;          /* 两等分列 */
    gap: 15px;                               /* 间距 */
}

/* 协议勾选区 */
.agreement {
    margin: 15px 0;                          /* 上下间距 */
    display: flex;                           /* Flex布局 */
    align-items: flex-start;                 /* 顶部对齐 */
    gap: 8px;                                /* 复选框与文字间距 */
}

/* 协议复选框 */
.agreement input[type="checkbox"] {
    margin-top: 4px;                         /* 与文字首行对齐 */
    flex-shrink: 0;                          /* 禁止收缩 */
}

/* 协议文字 */
.agreement label {
    font-size: 13px;                         /* 字号 */
    color: var(--text-secondary);            /* 次要颜色 */
    line-height: 1.5;                        /* 行高 */
}

/* 协议链接 */
.agreement a {
    color: var(--primary-gold);              /* 金色 */
    text-decoration: none;                   /* 移除下划线 */
}

/* 协议链接悬停效果 */
.agreement a:hover {
    text-decoration: underline;              /* 添加下划线 */
}


/* ---------- 认证模态框响应式 ---------- */
@media (max-width: 768px) {
    /* 模态框小内边距 */
    .auth-modal {
        padding: 30px 20px;
    }
    
    /* 表单行改为单列 */
    .form-row {
        grid-template-columns: 1fr;          /* 单列 */
        gap: 10px;                           /* 更小间距 */
    }
}