/* 全局基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "微软雅黑",sans-serif;
    background-color: #FFF8F8;
    color: #666;
    line-height: 1.7;
}
a {
    text-decoration: none;
    color: inherit;
}
ul,li{list-style: none;}

/* 页面通用标题 */
.page-title{
    text-align: center;
    padding: 25px 15px;
}
.page-title h2{
    font-size: 24px;
    color: #E88B9B;
    margin-bottom: 6px;
}
.page-title p{
    font-size: 15px;
    color: #999;
}

/* 顶部添加按钮区域 */
.add-btn-box{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 20px;
    text-align: right;
}
.add-btn-box a{
    display: inline-block;
    padding: 9px 22px;
    background: #E88B9B;
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
}
.add-btn-box a:hover{
    opacity: 0.92;
}

/* 通用双列卡片布局 */
.common-list-wrap{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
}
/* 通用白色卡片 */
.common-card{
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px #f1e2e5;
}

/* 情话页面样式 */
.words-card p{
    font-size: 16px;
    line-height: 1.8;
}
.words-op{
    margin-top: 15px;
    text-align: right;
}
.words-op a{
    color: #999;
    font-size: 14px;
    margin-left: 15px;
    cursor: pointer;
}
.words-op a:hover{
    color: #E88B9B;
}

/* 情侣空间专用样式 */
.space-container{
    width:90%;
    max-width:1000px;
    margin:0 auto 60px;
}
.love-info-card{
    background:#fff;
    padding:30px;
    border-radius:12px;
    box-shadow:0 2px 8px #f1e2e5;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
}
.avatar-group{
    display:flex;
    align-items:center;
    gap:20px;
}
.avatar-item{
    text-align:center;
}
.avatar-img{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#f1e2e5;
    object-fit:cover;
    margin-bottom:10px;
    border:3px solid #E88B9B;
}
.avatar-name{
    color:#E88B9B;
    font-size:18px;
    font-weight:bold;
}
.love-days{
    text-align:center;
    padding:0 20px;
}
.love-days h3{
    color:#666;
    font-size:16px;
    margin-bottom:5px;
}
.love-days .days-num{
    color:#E88B9B;
    font-size:36px;
    font-weight:bold;
    line-height:1;
}
.love-days p{
    color:#999;
    font-size:14px;
    margin-top:5px;
}
.motto-card{
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 2px 8px #f1e2e5;
    margin-bottom:20px;
    text-align:center;
}
.motto-card h3{
    color:#E88B9B;
    font-size:20px;
    margin-bottom:15px;
}
.motto-card p{
    color:#666;
    font-size:16px;
    line-height:1.8;
    max-width:800px;
    margin:0 auto;
}
.motto-op{
    margin-top:15px;
}
.motto-op a{
    color:#E88B9B;
    text-decoration:none;
    font-size:14px;
}
.motto-op a:hover{
    text-decoration:underline;
}
.space-btn-wrap{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom:20px;
}
.space-btn-card{
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 2px 8px #f1e2e5;
    text-align:center;
}
.space-btn-card h3{
    color:#E88B9B;
    font-size:18px;
    margin-bottom:10px;
}
.space-btn-card p{
    color:#999;
    font-size:14px;
    margin-bottom:15px;
}
.space-btn{
    display:inline-block;
    padding:8px 20px;
    background:#E88B9B;
    color:#fff;
    border-radius:6px;
    text-decoration:none;
    font-size:14px;
}
.space-btn:hover{
    opacity:0.9;
}
.memory-card{
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 2px 8px #f1e2e5;
}
.memory-card h3{
    color:#E88B9B;
    font-size:20px;
    margin-bottom:20px;
    padding-bottom:10px;
    border-bottom:1px solid #f1e2e5;
}
.memory-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}
.memory-item{
    padding:15px;
    border-radius:8px;
    background:#faf6f7;
    display:flex;
    align-items:center;
    gap:15px;
}
.memory-type{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#E88B9B;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    flex-shrink:0;
}
.memory-info{
    flex:1;
}
.memory-title{
    color:#666;
    font-size:15px;
    margin-bottom:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.memory-time{
    color:#999;
    font-size:12px;
}
.memory-img{
    width:40px;
    height:40px;
    border-radius:8px;
    object-fit:cover;
    flex-shrink:0;
}

/* 表单页面通用样式 */
.form-main{
    width:90%;
    max-width:600px;
    margin:0 auto 60px;
    background:#fff;
    padding:30px;
    border-radius:12px;
    box-shadow:0 2px 8px #f1e2e5;
}
.form-item{
    margin-bottom:20px;
}
.form-item label{
    display:block;
    margin-bottom:8px;
    font-size:15px;
}
.form-item input,
.form-item textarea,
.form-item select{
    width:100%;
    padding:12px;
    border:1px solid #eee;
    border-radius:6px;
    font-size:15px;
    background:#fdf6f7;
}
.form-item textarea{
    min-height:120px;
}
.btn-group{
    display:flex;
    gap:15px;
}
.sub-btn{
    padding:10px 25px;
    background:#E88B9B;
    color:#fff;
    border:none;
    border-radius:6px;
    cursor:pointer;
}
.back-btn{
    padding:10px 25px;
    background:#eee;
    color:#666;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

/* 响应式手机适配 */
@media (max-width:768px){
    .common-list-wrap,
    .space-btn-wrap,
    .memory-list{
        grid-template-columns:1fr;
    }
    .love-info-card{
        flex-direction:column;
        gap:20px;
    }
    .avatar-img{
        width:80px;
        height:80px;
    }
    .love-days .days-num{
        font-size:28px;
    }
}
/* =================================== */
/* 头部导航样式（全站统一） */
/* =================================== */
.header {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 0 20px;
  position: relative;
  z-index: 99;
}
.header .logo {
  display: inline-block;
  font-size: 20px;
  color: #E88B9B;
  font-weight: bold;
  padding: 18px 0;
  text-decoration: none;
}
.header .logo span {
  font-size: 13px;
  color: #999;
  font-weight: normal;
  margin-left: 8px;
}

/* PC导航 */
.nav-pc {
  float: right;
}
.nav-pc a {
  display: inline-block;
  padding: 22px 16px;
  color: #666;
  text-decoration: none;
  font-size: 15px;
  transition: 0.3s;
}
.nav-pc a:hover {
  color: #E88B9B;
}

/* 移动端按钮 */
.menu-btn {
  display: none;
  font-size: 22px;
  padding: 18px 0;
  cursor: pointer;
  color: #666;
  float: right;
}

/* 移动端导航 */
.nav-mobile {
  display: none;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 10px 0;
}
.nav-mobile a {
  display: block;
  padding: 12px 20px;
  color: #666;
  text-decoration: none;
  font-size: 15px;
}
.nav-mobile a:hover {
  color: #E88B9B;
  background: #fdf6f7;
}

/* 响应式 */
@media (max-width: 768px) {
  .nav-pc {
    display: none;
  }
  .menu-btn {
    display: block;
  }
}
/* 相册页面样式 */
.album-list-wrap{
  width:90%;
  max-width:1000px;
  margin:0 auto 60px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.album-card{
  background:#fff;
  padding:25px;
  border-radius:12px;
  box-shadow:0 2px 8px #f1e2e5;
  text-align: center;
}
.album-img{
  width:100%;
  height:180px;
  background:#f1e2e5;
  border-radius:8px;
  margin-bottom:15px;
  object-fit:cover;
}
.album-name{
  color:#E88B9B;
  font-size:20px;
  margin-bottom:8px;
}
.album-op a{
  color:#999;
  text-decoration:none;
  margin:0 8px;
  font-size:14px;
}
.album-op a:hover{
  color:#E88B9B;
}
@media (max-width:768px){
  .album-list-wrap{
    grid-template-columns:1fr;
  }
}
/* 首页样式 */
.banner{
    width:100%;
    height:320px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 20px;
}
.banner-title{
    font-size:36px;
    color:#E88B9B;
    font-weight:bold;
    margin-bottom:15px;
}
.banner-desc{
    font-size:18px;
    color:#666;
    line-height:1.8;
}
.func-wrap {
  width: 90%;
  max-width: 1200px;
  margin: 60px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.func-card {
  background: #fff;
  padding: 35px 20px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 2px 8px #f1e2e5;
  transition: 0.3s;
}
.func-card:hover {
  transform: translateY(-5px);
}
.func-card h3 {
  font-size: 20px;
  color: #E88B9B;
  margin-bottom:15px;
}
.func-card p {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
}
.func-card a{text-decoration:none;}

@media (max-width: 768px) {
  .banner{height:240px;}
  .banner-title{font-size:26px;}
  .banner-desc{font-size:15px;}
  .func-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 40px auto;
  }
}
/* 登录注册页面 */
.login-tab {
    text-align: center;
    margin: 30px 0;
}
.login-tab a {
    padding: 10px 20px;
    text-decoration: none;
    color: #666;
    border-bottom: 3px solid transparent;
    display: inline-block;
}
.login-tab a.active {
    border-color: #E88B9B;
    color: #E88B9B;
    font-weight: bold;
}
.form-box {
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 0 15px #eee;
}
.form-item {
    margin-bottom: 20px;
}
.form-item input {
    width: 100%;
    height: 45px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
}
.btn {
    width: 100%;
    height: 48px;
    background: #E88B9B;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}
.tip {
    color: red;
    text-align: center;
    margin: 15px 0;
}
.user-info {
    text-align: center;
    padding: 20px;
}
.user-info h2 {
    color: #E88B9B;
    margin-bottom: 20px;
}
.user-info p {
    font-size: 16px;
    color: #666;
    margin: 10px 0;
}
/* 恋爱日记样式 */
.diary-list-wrap{
  width:90%;
  max-width:1000px;
  margin:0 auto 60px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.diary-card{
  background:#fff;
  padding:25px;
  border-radius:12px;
  box-shadow:0 2px 8px #f1e2e5;
}
.diary-card h3{
  color:#E88B9B;
  font-size:20px;
  margin-bottom:8px;
}
.diary-time{
  color:#999;
  font-size:14px;
  margin-bottom:10px;
}
.diary-content{
  color:#666;
  font-size:15px;
  line-height:1.6;
  margin-bottom:15px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}
.diary-op a{
  color:#999;
  text-decoration:none;
  margin-right:15px;
  font-size:14px;
}
.diary-op a:hover{
  color:#E88B9B;
}
@media (max-width:768px){
  .diary-list-wrap{
    grid-template-columns:1fr;
  }
}
/* 页脚 */
.footer {
  background: #fff;
  padding: 25px 20px;
  text-align: center;
  border-top: 1px solid #f1e2e5;
  margin-top: 40px;
}
.footer-copyright {
  color: #999;
  font-size: 14px;
}
/* 纪念日样式 */
.day-list-wrap{
  width:90%;
  max-width:1000px;
  margin:0 auto 60px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.day-card{
  background:#fff;
  padding:25px;
  border-radius:12px;
  box-shadow:0 2px 8px #f1e2e5;
}
.day-card h3{
  color:#E88B9B;
  font-size:20px;
  margin-bottom:8px;
}
.day-time{
  color:#999;
  font-size:14px;
  margin-bottom:10px;
}
.day-count{
  color:#E88B9B;
  font-size:16px;
  font-weight:bold;
  margin-bottom:10px;
}
.day-desc{
  color:#666;
  font-size:15px;
  line-height:1.6;
  margin-bottom:15px;
}
.day-op a{
  color:#999;
  text-decoration:none;
  margin-right:15px;
  font-size:14px;
}
.day-op a:hover{
  color:#E88B9B;
}
@media (max-width:768px){
  .day-list-wrap{
    grid-template-columns:1fr;
  }
}
.my-section {
  margin-bottom: 40px;
}
.my-section h3 {
  font-size: 20px;
  color: #E88B9B;
  margin-bottom: 15px;
}
/* ========== 手机适配（768px以下） ========== */
@media (max-width: 768px) {
  /* 全局：宽度100%，去掉边距 */
  body {
    font-size: 14px;
  }
  .container,
  .wrap,
  .page-body {
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
  }

  /* 导航：PC菜单隐藏，汉堡显示 */
  .nav-pc {
    display: none !important;
  }
  .menu-btn {
    display: block !important;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
  }

  /* 手机导航全屏、垂直 */
  .nav-mobile {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 999;
  }
  .nav-mobile a {
    display: block;
    width: 100%;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    color: #333;
    text-decoration: none;
  }
  .nav-mobile a:hover {
    background: #f9f9f9;
  }

  /* 卡片：手机单列 */
  .day-list-wrap,
  .diary-list-wrap,
  .album-wrap {
    width: 100% !important;
  }
  .day-card,
  .diary-card,
  .album-card {
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 15px !important;
    box-sizing: border-box;
  }

  /* 按钮：手机变大、好点击 */
  .btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important;
    margin: 5px 0 !important;
  }

  /* 表单：输入框全屏 */
  input,
  textarea,
  select {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;
  }

  /* 页面标题：居中、缩小 */
  .page-title {
    text-align: center;
    padding: 15px 0;
  }
  .page-title h2 {
    font-size: 20px;
  }

  /* 文字：避免太窄 */
  p,
  div {
    word-wrap: break-word;
  }
}