@font-face {
    font-family: 'Source Han Sans SC';
    src: url('/fonts/SourceHanSansSC-Regular-2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* =========================================
   1. 基础重置与通用变量
   ========================================= */
:root {
    --primary-color: #4a90e2;    /* 遇见学习 主题蓝 */
    --accent-color: #f5a623;     /* 强调橙色 */
    --text-dark: #333;
    --text-light: #666;
    --bg-gray: #f8f9fa;
    --white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 保证 padding 不撑开盒子 */
}

body {
    font-family: "Source Han Sans SC", sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-gray);
}
nav ul {
    list-style: none;      /* 移除列表圆点 */
    margin: 0;
    padding: 0;
    display: flex;         /* 关键：让列表项横向排列 */
    align-items: center;   /* 垂直居中 */
    gap: 15px;             /* 按钮之间的间距，代替 margin 更方便 */
}


nav ul li a {
    text-decoration: none; /* 移除下划线 */
    color: #333;           /* 文字颜色 */
    background-color: #f0f2f5; /* 浅灰色背景，类似你图中的样式 */
    padding: 8px 16px;     /* 内边距：控制按钮的大小 */
    border-radius: 4px;    /* 圆角 */
    display: inline-block; /* 关键：让 padding 和宽高生效 */
    white-space: nowrap;   /* 关键：强制文字不换行，防止变成长条状 */
    transition: background-color 0.3s; /* 增加鼠标悬停过渡动画 */
}

/* 鼠标悬停效果 */
nav ul li a:hover {
    background-color: #e2e8f0;
    color: #007bff;
}
img { max-width: 100%; border-radius: 8px; }
hr { border: 0; height: 1px; background: #eee; margin: 20px 0; }

/* =========================================
   2. 头部导航 (Header)
   ========================================= */
header {
    background: var(--white);
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo h1 {
    font-size: 1.4rem;
    color: var(--primary-color);
}
.logo p {
    font-size: 0.8rem;
    color: var(--text-light);
}

nav ul {
    display: flex;
    gap: 20px;
}

nav ul li a:hover {
    color: var(--primary-color);
}

/* =========================================
   导航栏右侧登录注册按钮
   ========================================= */
.user-auth {
    display: flex;
    align-items: center;
    gap: 12px; /* 两个按钮之间的间距 */
}

/* 共有基础样式 */
.auth-link {
    text-decoration: none;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 6px; /* 圆角 */
    transition: all 0.3s ease; /* 平滑过渡动画 */
    display: inline-block;
}

/* 登录按钮：幽灵按钮风格 (Ghost Button) */
.login-btn {
    color: #4a90e2;
    border: 1px solid #4a90e2;
    background-color: transparent;
}

.login-btn:hover {
    background-color: rgba(74, 144, 226, 0.05); /* 淡淡的蓝色背景反馈 */
    transform: translateY(-1px); /* 向上微动 */
}

/* 注册按钮：实色按钮风格 (Solid Button) */
.register-btn {
    background-color: #4a90e2;
    color: white;
    border: 1px solid #4a90e2;
    /* 增加一个柔和的阴影 */
    box-shadow: 0 4px 6px rgba(74, 144, 226, 0.15);
}

.register-btn:hover {
    background-color: #357abd; /* 悬停颜色深一点 */
    border-color: #357abd;
    box-shadow: 0 6px 12px rgba(74, 144, 226, 0.25);
    transform: translateY(-2px); /* 悬停时浮起感 */
}

/* 点击时的按下效果 */
.auth-link:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 手机端适配：如果导航栏太挤，可以稍微缩小按钮 */
@media (max-width: 768px) {
    .auth-link {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    .auth-btn {
        width: 100%; /* 按钮占满宽度 */
        padding: 12px;
    }
}


/* =========================================
   3. 巨幕区域 (Hero Section)
   ========================================= */
.hero {
    padding: 60px 5%;
    text-align: center;
    background: linear-gradient(rgba(74, 144, 226, 0.1), rgba(255, 255, 255, 0));
}

.hero h2 { font-size: 2rem; margin-bottom: 15px; color: #222; }

.hero form {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.hero input {
    width: 350px;
    padding: 12px 20px;
    border: 2px solid #ddd;
    border-radius: 30px;
    outline: none;
}

.hero input:focus { border-color: var(--primary-color); }

.hero button {
    padding: 12px 25px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
}

/* =========================================
   4. 分类与笔记网格
   ========================================= */
.categories, .featured-notes, .features {
    padding: 20px 5%;
}

.categories h3, .featured-notes h3, .features h3 {
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-color);
    padding-left: 10px;
}

.categories ul {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.categories a {
    background: #eef5ff;
    padding: 8px 20px;
    border-radius: 20px;
    color: var(--primary-color);
    font-size: 0.9rem;
}

/* 笔记列表布局：电脑端一行三个 */
.featured-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.featured-notes h3 { width: 100%; }

.note-card {
    background: var(--white);
    flex: 1 1 calc(33.333% - 20px); /* 电脑端 3 列 */
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.note-card:hover { transform: translateY(-5px); }

.note-card h4 { margin: 12px 0 5px; font-size: 1.1rem; }
.note-card p { color: var(--text-light); font-size: 0.9rem; }

.note-card button {
    width: 100%;
    margin-top: 15px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
}


/* =========================================
   6.微信二维码
   ========================================= */
/* 弹窗遮罩 */
.pay-mask {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); /* 半透明背景 */
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
}

/* 弹窗主体 */
.pay-popup {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    width: 300px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* 关闭按钮 */
.close-btn {
    position: absolute;
    top: 10px; right: 10px;
    border: none; background: none;
    font-size: 24px; cursor: pointer; color: #999;
}

/* 二维码容器 */
#qrcode-canvas {
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #eee;
    width: 200px; height: 200px;
}

.price-display { font-size: 18px; font-weight: bold; color: #e91e63; margin: 10px 0; }
.pay-tip { font-size: 14px; color: #666; }

/* 等待动画 */
.loading-dots:after {
    content: ' .';
    animation: dots 1.5s steps(5, end) infinite;
}
@keyframes dots { 0%, 20% { content: ' .'; } 40% { content: ' ..'; } 60% { content: ' ...'; } }

/* =========================================
   支付方式选择弹窗
   ========================================= */
.pay-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.pay-modal-overlay.active { display: flex; }

.pay-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 360px;
    max-width: 92vw;
    padding: 28px 24px;
    position: relative;
    text-align: center;
}
.pay-modal h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
    color: #333;
}
.pay-modal .pay-modal-price {
    font-size: 1.4rem;
    font-weight: bold;
    color: #e74c3c;
    margin-bottom: 20px;
}
.pay-modal .pay-modal-close {
    position: absolute;
    top: 12px; right: 14px;
    border: none; background: none;
    font-size: 22px; cursor: pointer; color: #999;
    line-height: 1;
}
.pay-modal .pay-modal-close:hover { color: #333; }

.pay-method-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 8px;
}
.pay-method-btn {
    flex: 1;
    padding: 14px 0;
    border: 2px solid #eee;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    background: #fafafa;
    color: #333;
}
.pay-method-btn:hover { border-color: #ccc; background: #f5f5f5; }
.pay-method-btn.alipay-btn { color: #1677ff; }
.pay-method-btn.alipay-btn:hover,
.pay-method-btn.alipay-btn:active { border-color: #1677ff; background: #f0f5ff; }
.pay-method-btn.wechat-btn { color: #07c160; }
.pay-method-btn.wechat-btn:hover,
.pay-method-btn.wechat-btn:active { border-color: #07c160; background: #f0fff4; }

.pay-modal .qr-section {
    display: none;
    flex-direction: column;
    align-items: center;
}
.pay-modal .qr-section.active { display: flex; }
.pay-modal .qr-section .qr-container {
    width: 240px; height: 240px;
    margin: 0 auto 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pay-modal .qr-section .qr-tip {
    font-size: 0.9rem;
    color: #07c160;
    font-weight: 600;
    margin-bottom: 4px;
}
.pay-modal .qr-section .qr-status {
    font-size: 0.82rem;
    color: #999;
    min-height: 1.2em;
}


/* =========================================
   7. 页脚 (Footer)
   ========================================= */
footer {
    background: #333;
    color: #d83b3b;
    padding: 12px 5%;
    text-align: center;
    margin-top: 50px;
}
@media (max-width: 768px) {
    footer {
        padding: 10px 5%;
        margin-top: 20px;
    }
}


footer ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    font-size: 0.9rem;
}
footer ul li a {
    color: #9b82f6;

}

footer a:hover { color: var(--white); }



footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #2f2f2f;
    color: #ffffff;
    text-align: center;
    padding: 14px 0;
    z-index: 999;
}

/* 底部链接样式 */
footer a {
    color: #aaaaaa;
    text-decoration: none;
    margin: 0 6px;
}

footer a:hover {
    color: #ffffff;
}
/* 防止页面内容被 footer 遮挡 */
body {
    padding-bottom: 120px; /* 稍大于 footer 实际高度 */
}

/* 为了让付费资料“混”在里面时一眼就能看出来，建议添加以下样式 */
/* 付费块的特殊样式 */
.data-block.premium {
    border: 2px solid #ffca28; /* 金色边框 */
    background-color: #fffdf5;
    position: relative;
    overflow: hidden;
}

/* 价格标签 */
.price-tag {
    position: absolute;
    top: 0;
    right: 0;
    background: #ff5252;
    color: white;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 0 0 0 10px;
    font-weight: bold;
}

/* 搜索框美化建议 */
.search-section {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

/* 小猫图片 */
/* 1. 调整中间资料容器的内边距 */
/* 增加左右 padding（从 250px 增加到 320px），为猫咪往里挪腾出空间 */
.container {
    max-width: 1400px; 
    margin: 0 auto;
    padding: 40px 320px; 
    position: relative;
}

/* 2. 固定定位容器：让猫咪显著向中间移动 */
.fixed-cat-container {
    position: fixed;
    top: 150px;      /* 距离顶部的距离 */
    width: 150px;    /* 维持较大的比例 */
    display: flex;
    flex-direction: column;
    gap: 40px;       /* 猫咪之间的上下距离 */
    z-index: 100;
    pointer-events: none;
}

/* 通过增加数值，让容器整体向中心靠拢 */
.cat-left-side {
    left: 200px;     /* 从 60px 增加到 120px */
}

.cat-right-side {
    right: 200px;    /* 从 60px 增加到 120px */
}

/* 3. 小猫图片及其旋转位移（保持错落感） */
.cat-img {
    width: 100%;
    height: auto;
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.1));
}

/* 具体的错落微调 */
.c1 { transform: translateX(-10px) rotate(-8deg); }
.c2 { transform: translateX(15px) rotate(5deg); }
.c3 { transform: translateX(-5px) rotate(-3deg); }
.c4 { transform: translateX(20px) rotate(10deg); }

.c5 { transform: translateX(10px) rotate(8deg); }
.c6 { transform: translateX(-15px) rotate(-5deg); }
.c7 { transform: translateX(5px) rotate(3deg); }
.c8 { transform: translateX(-20px) rotate(-10deg); }

/* 悬停效果 */
.cat-img:hover {
    transform: scale(1.3) rotate(0deg) !important;
    z-index: 101;
}

/* 4. 响应式适配：确保窄屏幕下体验良好 */
@media (max-width: 1300px) {
    .cat-left-side { left: 40px; }
    .cat-right-side { right: 40px; }
    .container { padding: 40px 200px; }
}

@media (max-width: 1000px) {
    .fixed-cat-container { display: none; }
    .container { padding: 40px 20px; }
}

/* 校门背景 */
body {
    /* ... 其他代码保持不变 ... */

    /* 调浅颜色：保持 0.7 左右的透明度 */
    background-image:  
        url('../images/school_gate2.jpg'); 

    /* 核心修改：通过百分比控制纵向位置 */
    /* 第一个值 center 是左右居中 */
    /* 第二个值 20% 是距离顶部的位置，你可以根据效果微调这个数 */
    background-position: center 20%; 
    
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* 为了保证内容可读性，建议给主要容器添加一个半透明背景或阴影 */
.container {
    background-color: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
    border-radius: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 如果 header 也需要透明感，可以微调 */
header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
}

/* 1. 移除资料卡片的白色背景、边框和阴影 */
.material-grid .data-block {
    background: rgba(255, 255, 255, 0.1) !important; /* 极高透明度，仅保留微弱质感 */
    border: none !important;                         /* 彻底移除边框 */
    box-shadow: none !important;                     /* 移除阴影 */
    backdrop-filter: blur(5px);                      /* 增加毛玻璃效果，保证文字可读性 */
}

/* 2. 移除主容器的背景 */
.container {
    background: transparent !important;              /* 确保容器完全透明 */
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* 小猫对话框 */
/* 对话框的基础样式 */
.cat-bubble {
    position: fixed;
    background: white;
    border: 2px solid #ffb800; /* 使用你原本的主题橙色 */
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    z-index: 200;
    pointer-events: none; /* 防止遮挡鼠标点击 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 小尖角效果 */
.cat-bubble::after {
    content: '';
    position: absolute;
    width: 0; height: 0;
    border: 10px solid transparent;
}

/* 弹出动画 */
@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}


/* =========================================
   5. 响应式适配 (核心部分)
   ========================================= */

/*  */

/* 手机端适配 (宽度小于 768px) */
/* ====== Mobile Header + Layout Fix (merge) ====== */
@media (max-width: 768px) {

  /* 1) 顶部 header：铺满、居中、变矮 */
  header{
    width: 100%;
    padding: 6px 10px;          /* 更矮 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;         /* 整体居中 */
    gap: 6px;                    /* 更紧凑 */
    text-align: center;
  }

  .logo h1{ font-size: 1.2rem; line-height: 1.2; }
  /* 只留大标题，隐藏副标题 */
  .logo p{
    display: none;
  }
  .logo p{  font-size: 0.75rem; margin-top: 2px; }

  /* 2) nav：修复 list.css 的 space-between，强制居中 */
  nav{
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    justify-content: center;
  }

  nav ul{
    width: 100%;
    display: flex;
    justify-content: center;     /* 关键：导航项居中 */
    flex-wrap: wrap;             /* 小屏自动换行 */
    gap: 6px;                    /* 更紧凑 */
    padding: 0;
    margin: 0;
  }

  nav ul li a{
    display: inline-block;
    padding: 5px 8px;            /* 按钮更小 */
    font-size: 0.82rem;
    border-radius: 6px;
  }

  /* 3) 登录区：居中 + 更紧凑（注意你 HTML 用的是 btn-link） */
  .user-auth{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .user-status{ font-size: 0.85rem; }

  .btn-link{
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.82rem;
  }

  /* 4) 两条 hr 太占空间，手机端隐藏 */
  hr{ display: none; }

  /* 5) footer 变矮 + body 预留变小（避免挡住内容） */
  footer{
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.3;
  }
  body{
    padding-bottom: 70px;        /* 原来 120px 太大 */
  }
}