/* 0. 变量 & 重置 */
:root{
  --primary:#0066ff;
  --secondary:#ffcc00;
  --text:#222;
  --radius:12px;
  --maxWidth:1100px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;color:var(--text);line-height:1.6;overflow-x:hidden;}

/* 1. 背景图 + 遮罩 */
.bg-overlay{
  position:fixed;
  inset:0;
  background:url("beijin.jpg") center/cover no-repeat;
  z-index:-2;
}
.bg-overlay::after{  /* 暗色蒙版，让文字更清楚 */
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.20);
}

/* 2. 置顶导航（保持通透） */
.top-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 20px rgba(0,0,0,.15);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--maxWidth);margin:auto;padding:0 20px;height:60px;}
.logo{font-size:20px;font-weight:bold;color:#fff;text-decoration:none;}
.nav-list{display:flex;gap:24px;list-style:none;}
.nav-list a{text-decoration:none;color:#fff;font-weight:500;transition:.2s;}
.nav-list a:hover{color:var(--secondary);}
.nav-toggle{display:none;font-size:24px;background:none;border:none;color:#fff;cursor:pointer;}

/* 3. 模块通用 + 毛玻璃卡片 */
.module{padding:80px 20px;position:relative;}
.glass{  /* 毛玻璃核心 */
  max-width:var(--maxWidth);margin:40px auto;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  color:#fff;
}
.container{padding:0 20px;}

/* 4. 首页居中 */
.home-module{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 60px);}
.home-content{text-align:center;}
.avatar{width:140px;height:140px;border-radius:50%;object-fit:cover;margin-bottom:20px;border:4px solid rgba(255,255,255,.5);}
.home-title{font-size:32px;margin-bottom:10px;}
.home-bio{font-size:18px;margin-bottom:30px;opacity:.9;}
.home-actions{display:flex;gap:16px;justify-content:center;}
.btn{display:inline-block;padding:10px 24px;border-radius:var(--radius);text-decoration:none;font-weight:600;transition:.2s;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:#0053d9;}
.btn-secondary{background:var(--secondary);color:#000;}
.btn-secondary:hover{background:#e6b800;}

/* 5. 项目网格 */
.project-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.project-card{background:rgba(255,255,255,.12);padding:24px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.2);}
.project-card h3{margin-bottom:8px;}
.project-card p{margin-bottom:16px;opacity:.85;}

/* 6. 响应式 */
@media (max-width:768px){
  .nav-list{position:fixed;left:0;top:60px;width:100%;height:0;overflow:hidden;background:rgba(0,0,0,.6);flex-direction:column;align-items:center;gap:16px;transition:.3s;}
  .nav-list.open{height:calc(100vh - 60px);padding-top:40px;}
  .nav-toggle{display:block;}
  .home-title{font-size:26px;}
  .home-actions{flex-direction:column;align-items:center;}
}
/* 项目卡片图片 */
.card-img{width:100%;height:160px;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;}
/* 卡片下半部分 */
.card-body{padding:16px 20px 20px;}
/* 1. 保留实心按钮 */
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:#0053d9;}

/* 2. 新增透明描边按钮 */
.btn-outline{
  background:transparent;
  color:var(--primary);
  border:2px solid var(--primary);
  padding:8px 22px;          /* 让描边按钮视觉上与实心按钮同宽 */
  transition:.2s;
}
.btn-outline:hover{
  background:var(--primary);
  color:#fff;
}

/* 只在“关于我”模块右侧中间插图片 */
#about{
  position: relative;
}
#about::after{
  content: "";
  position: absolute;
  right: 20px;                 /* 离右边 20 px */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  width: 240px;                /* 大小随意调 */
  height: 240px;
  background: url("side.png") center/contain no-repeat;
  pointer-events: none;        /* 不挡鼠标 */
}
/* 横向三列网格 */
.contact-grid{
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;        /* 小屏自动换行 */
  margin-top: 20px;
}

/* 单个小卡片 */
.contact-card{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  padding: 24px 20px;
  width: 260px;           /* 固定宽度，可再调 */
  text-align: center;
}
.contact-card h3{margin-bottom: 10px;}
.contact-card p{margin-bottom: 16px; opacity: .85;}

/* 网易云播放器壳子 */
#music-box{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  padding: 8px;
}
/* 伸缩容器 */
#music-box{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
/*  toggle 按钮 */
#music-toggle{
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* 面板 */
#music-panel{
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  padding: 8px;
  overflow: hidden;
  transition: .3s;
}
/* 收起状态 */
#music-panel.collapsed{
  width: 0;
  height: 0;
  padding: 0;
  border: none;
}
/* 手机端把右侧图片移到文字下方 */
@media (max-width: 768px) {
  #about::after {
    position: static;        /* 取消绝对定位 */
    display: block;
    margin: 20px auto 0;     /* 居中，上方留 20px */
    width: 120px;
    height: 120px;
  }
}