/* 
 * 全局样式 - Ins风 · 00后情侣主题
 * 配色: 暖粉 #B74768 · 柔紫 #B388FF · 雾蓝 #E8EAF6
 */

/* ========== CSS Variables ========== */
page {
  --pink: #B74768;
  --pink-light: #FFA4B4;
  --pink-pastel: #FFF0F3;
  --purple: #B388FF;
  --purple-light: #E8D5FF;
  --blue: #82B1FF;
  --blue-light: #E3F2FD;
  --yellow: #FFD54F;
  --yellow-pastel: #FFF9C4;
  --mint: #A7FFEB;
  --coral: #B74768;
  --cream: #FFFBF5;
  --white: #FFFFFF;
  --text: #262626;
  --text-light: #8E8E8E;
  --text-muted: #C7C7C7;
  --shadow: rgba(0, 0, 0, 0.04);
  
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 28rpx;
  color: var(--text);
  background: #FFF5F5;
  min-height: 100vh;
}

/* ========== 按钮样式 ========== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  width: 100%;
  padding: 32rpx 48rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  box-sizing: border-box;
  line-height: 1.4;
  font-family: inherit;
}

.btn::after { border: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--coral));
  color: white;
  box-shadow: 0 16rpx 48rpx rgba(255, 107, 157, 0.4);
}

.btn-primary:active {
  transform: translateY(-4rpx);
  box-shadow: 0 24rpx 64rpx rgba(255, 107, 157, 0.5);
}

.btn-secondary {
  background: white;
  color: var(--pink);
  border: 4rpx solid var(--pink);
}

.btn-secondary:active { background: var(--pink-pastel); }

.btn-outline {
  background: transparent;
  color: var(--pink);
  border: 4rpx solid var(--pink);
}

.btn-outline:active { background: var(--pink-pastel); }

.btn-small {
  padding: 16rpx 32rpx;
  font-size: 26rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, var(--pink), var(--coral));
  color: white;
  border: none;
  font-weight: 500;
  width: auto;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-camera {
  position: fixed;
  bottom: 240rpx;
  right: 40rpx;
  z-index: 1001;
  width: 84rpx;
  height: 84rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF9FB4 0%, #FF6B93 100%);
  border: 2rpx solid rgba(255,255,255,0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 20rpx rgba(255,107,147,0.32);
  transition: box-shadow 0.18s ease;
  animation: camera-bounce 2s ease-in-out infinite;
}
.btn-camera:active {
  animation: none;
  transform: scale(0.9);
  box-shadow: 0 3rpx 10rpx rgba(255,107,147,0.28);
}
@keyframes camera-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14rpx); }
}
.camera-icon {
  width: 40rpx;
  height: 40rpx;
}

/* ========== 输入框 ========== */
.input-group { margin-bottom: 32rpx; }

.input-group label {
  display: block;
  font-size: 26rpx;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 16rpx;
}

.input {
  width: 100%;
  padding: 36rpx 40rpx;
  min-height: 100rpx;
  background: white;
  border: 4rpx solid var(--pink-light);
  border-radius: 40rpx;
  font-size: 30rpx;
  line-height: 1.6;
  font-family: inherit;
  color: #000000;
  font-weight: 500;
  transition: all 0.3s;
  box-sizing: border-box;
}

.input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 8rpx rgba(255, 107, 157, 0.1);
}

/* ========== 容器 ========== */
.container {
  max-width: 100%;
  padding: 16rpx 20rpx;
  padding-bottom: 300rpx;
  position: relative;
  z-index: 1;
}

.content {
  padding: 16rpx 20rpx;
  padding-bottom: 160rpx;
  position: relative;
  z-index: 1;
}

.card {
  background: white;
  border-radius: 16rpx;
  padding: 28rpx;
  box-shadow: 0 1rpx 4rpx var(--shadow);
}
.stat-item { text-align: center; }
.stat-item text { font-size: 36rpx; font-weight: 700; color: var(--text); display: block; }
.stat-item small { font-size: 20rpx; color: var(--text-muted); margin-top: 4rpx; display: block; }

.home-header { text-align: center; }
.couple-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}
.heart-icon { width: 64rpx; height: 64rpx; }
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #B74768, #B388FF);
  color: white;
  font-weight: 700;
  box-shadow: 0 4rpx 16rpx var(--shadow);
}
.days-count {
  font-size: 96rpx;
  font-weight: 800;
  background: linear-gradient(135deg, #B74768, #B388FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.stats-bar {
  display: flex;
  justify-content: space-around;
  margin-top: 28rpx;
  padding: 20rpx 0;
  border-top: 1rpx solid rgba(0,0,0,0.06);
}

/* ========== 功能卡片网格 ========== */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32rpx;
  padding: 0 8rpx;
}

.feature-card {
  background: white;
  border-radius: 40rpx;
  padding: 32rpx 24rpx;
  text-align: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
  border: 4rpx solid transparent;
  transition: all 0.3s;
}

.feature-card:active {
  transform: scale(0.95);
  border-color: var(--pink-light);
}

.feature-icon {
  width: 52rpx;
  height: 52rpx;
  margin-bottom: 16rpx;
}

.feature-icon-text {
  display: block;
  width: 52rpx;
  height: 52rpx;
  line-height: 52rpx;
  text-align: center;
  font-size: 36rpx;
  margin: 0 auto 16rpx;
}

.feature-card .feature-title {
  font-size: 26rpx;
  font-weight: 600;
  margin-bottom: 6rpx;
  display: block;
}

.feature-card .feature-desc {
  font-size: 22rpx;
  color: var(--text-light);
  display: block;
}

/* ========== 首页头部 ========== */
.home-header {
  text-align: center;
  padding: 92rpx 40rpx;
  background: linear-gradient(135deg, rgba(255,107,157,0.1), rgba(179,136,255,0.1));
  border-radius: 64rpx;
  margin-bottom: 48rpx;
  position: relative;
  overflow: hidden;
}

.home-header::before {
  content: '✨';
  position: absolute;
  top: 20rpx;
  right: 40rpx;
  font-size: 40rpx;
}

.couple-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32rpx;
  margin-bottom: 40rpx;
}

.heart-icon {
  font-size: 64rpx;
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.days-count {
  font-size: 128rpx;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--coral));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.days-label {
  font-size: 32rpx;
  color: var(--text-light);
  margin-top: 16rpx;
  display: block;
}
.days-name {
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--coral));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.start-date {
  font-size: 28rpx;
  color: var(--text-light);
  margin-top: 12rpx;
  display: block;
}

/* 统计条 */
.stats-bar {
  display: flex;
  justify-content: space-around;
  margin-top: 32rpx;
  padding: 24rpx 16rpx;
  background: rgba(255,255,255,0.8);
  border-radius: 32rpx;
  backdrop-filter: blur(10px);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.stat-item text {
  font-size: 36rpx;
  font-weight: 700;
  color: var(--pink);
}

.stat-item small {
  font-size: 20rpx;
  color: var(--text-light);
}

/* 生日倒计时卡片 */
.countdown-card {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 28rpx 32rpx;
  background: linear-gradient(135deg, #B74768, #943C58);
  border-radius: 32rpx;
  color: white;
  box-shadow: 0 8rpx 32rpx rgba(255, 71, 87, 0.3);
  margin-top: 24rpx;
}

.countdown-icon { font-size: 64rpx; flex-shrink: 0; }

.countdown-info { flex: 1; }

.countdown-title { font-size: 26rpx; opacity: 0.9; margin-bottom: 4rpx; }

.countdown-time { font-size: 36rpx; font-weight: 700; }

/* 设置日期提示 */
.set-date-banner {
  background: linear-gradient(135deg, var(--yellow-pastel), var(--pink-pastel));
  border-radius: 40rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32rpx;
}

.set-date-banner .subtitle {
  font-size: 30rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 8rpx;
}

.set-date-banner text {
  font-size: 26rpx;
  color: var(--text-light);
}

/* ========== 头像 ========== */
.avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  font-weight: 700;
  color: white;
  box-shadow: 0 16rpx 48rpx rgba(255, 107, 157, 0.3);
  border: 6rpx solid white;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-small {
  width: 96rpx;
  height: 96rpx;
  font-size: 36rpx;
  border: 4rpx solid white;
}

.avatar-large {
  width: 160rpx;
  height: 160rpx;
  font-size: 64rpx;
  border: 6rpx solid white;
}

/* ========== 布局 ========== */
.page-bg {
  background: linear-gradient(180deg, #F4E2E3 0%, #FAF5EE 55%, #FAF5EE 100%);
  height: 100vh;
  overflow-y: scroll;
  position: relative;
  padding-top: 196rpx;
  -webkit-overflow-scrolling: touch;
}

/* 浮动装饰 */
.floating-deco {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  font-size: 40rpx;
  opacity: 0.3;
  animation: float 6s ease-in-out infinite;
}

.floating-deco:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.floating-deco:nth-child(2) { top: 20%; right: 8%; animation-delay: 1s; }
.floating-deco:nth-child(3) { bottom: 30%; left: 3%; animation-delay: 2s; }
.floating-deco:nth-child(4) { bottom: 15%; right: 5%; animation-delay: 3s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-40rpx) rotate(10deg); }
}

/* ========== 时间线 ========== */
.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.timeline-header .title {
  font-size: 40rpx;
  font-weight: 700;
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.timeline-item {
  background: white;
  border-radius: 48rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
}

.timeline-date {
  font-size: 24rpx;
  color: var(--pink);
  font-weight: 600;
  margin-bottom: 16rpx;
}

.timeline-content {
  font-size: 30rpx;
  line-height: 1.6;
}

.timeline-mood {
  display: inline-block;
  margin-top: 16rpx;
  padding: 8rpx 24rpx;
  background: var(--yellow-pastel);
  border-radius: 40rpx;
  font-size: 24rpx;
}

/* ========== 相册 ========== */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.photo-item {
  aspect-ratio: 1;
  border-radius: 40rpx;
  background: linear-gradient(135deg, var(--pink-pastel), var(--purple-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96rpx;
  overflow: hidden;
}

.photo-item image {
  width: 100%;
  height: 100%;
}

/* ========== 日记 ========== */
.diary-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.diary-item {
  background: white;
  border-radius: 48rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
}

.diary-date {
  font-size: 24rpx;
  color: var(--purple);
  font-weight: 600;
  margin-bottom: 16rpx;
}

.diary-content {
  font-size: 30rpx;
  line-height: 1.6;
  color: var(--text);
}

/* ========== 打卡 ========== */
.checkin-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.checkin-item {
  background: white;
  border-radius: 40rpx;
  padding: 32rpx 40rpx;
  display: flex;
  align-items: center;
  gap: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
}

.checkin-checkbox {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  border: 6rpx solid var(--pink-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
  color: white;
  font-weight: bold;
}

.checkin-item.checked .checkin-checkbox {
  background: var(--pink);
  border-color: var(--pink);
}

.checkin-text {
  flex: 1;
  font-size: 30rpx;
}

.checkin-item.checked .checkin-text {
  text-decoration: line-through;
  color: var(--text-light);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80rpx 0;
  color: var(--text-light);
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.empty-state text:first-child {
  font-size: 80rpx;
}

/* ========== 个人中心 ========== */
.profile-card {
  background: white;
  border-radius: 48rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  gap: 28rpx;
  box-shadow: 0 8rpx 40rpx rgba(255, 107, 157, 0.1);
  margin-bottom: 32rpx;
}

.profile-info {
  flex: 1;
  min-width: 0;
}

.profile-info .nickname {
  font-size: 36rpx;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8rpx;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-info .status {
  font-size: 26rpx;
  color: var(--text-light);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-meta {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  margin-top: 12rpx;
  font-size: 24rpx;
  color: var(--text-light);
}

.profile-meta .meta-row {
  display: flex;
  gap: 32rpx;
}

.profile-edit-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: var(--pink-pastel);
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ========== 设置卡片 ========== */
.setting-section {
  margin-bottom: 80rpx;
}

.setting-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 40rpx;
  padding-left: 12rpx;
}

.setting-card {
  background: white;
  border-radius: 40rpx;
  padding: 36rpx 40rpx;
  display: flex;
  align-items: center;
  gap: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 24rpx;
}

.setting-icon {
  width: 88rpx;
  height: 88rpx;
  border-radius: 28rpx;
  background: var(--pink-pastel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  flex-shrink: 0;
}

.setting-info { flex: 1; }

.setting-name { font-size: 30rpx; font-weight: 600; margin-bottom: 4rpx; }

.setting-desc { font-size: 26rpx; color: var(--text-light); }

.setting-arrow { font-size: 48rpx; color: var(--pink-light); font-weight: 300; }

/* ========== Tab 导航 ========== */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20rpx);
  display: flex;
  justify-content: space-around;
  padding: 16rpx 0;
  padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid rgba(0,0,0,0.06);
  border-radius: 0;
  box-shadow: none;
  z-index: 999;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
  padding: 12rpx 24rpx;
  border-radius: 32rpx;
  color: var(--text-light);
  font-size: 22rpx;
  font-weight: 500;
}

.tab-icon { width: 44rpx; height: 44rpx; transition: all 0.2s; }
.tab-item.active { color: var(--text); }
.tab-item.active .tab-icon { opacity: 1; filter: none; }
.tab-item .tab-icon { opacity: 0.4; }

/* ========== 模态框 ========== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 32rpx;
  padding: 56rpx 40rpx 48rpx;
  width: 100%;
  max-width: 560rpx;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.modal-heart {
  font-size: 64rpx;
  text-align: center;
  margin-bottom: 20rpx;
  animation: heartbeat 1.5s ease-in-out infinite;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 56rpx;
  height: 56rpx;
  background: linear-gradient(135deg, var(--pink-pastel), rgba(255,107,157,0.2));
  border: none;
  border-radius: 0 24rpx 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.modal-close image {
  width: 26rpx;
  height: 26rpx;
}

.modal .title {
  text-align: center;
  font-size: 34rpx;
  margin-bottom: 12rpx;
  display: block;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.modal-subtitle {
  text-align: center;
  color: var(--text-light);
  font-size: 26rpx;
  margin-bottom: 32rpx;
  display: block;
}

/* ========== 动画 ========== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes slideUp {
  from { transform: translateY(100rpx); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ========== 全页编辑 ========== */
.edit-page {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #FFF5F5;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.edit-page::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 200rpx;
  background: linear-gradient(180deg, rgba(220,180,180,0.35) 0%, rgba(240,220,220,0.15) 40%, transparent 100%);
  pointer-events: none;
  z-index: 10000;
}
.edit-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 120rpx 32rpx 16rpx;
}
.edit-cancel {
  font-size: 30rpx;
  color: #888;
  padding: 8rpx 16rpx;
}
.edit-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #4A4A4A;
}
.edit-body {
  flex: 1;
  padding: 0 48rpx;
}
.edit-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16rpx;
}
.edit-avatar-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 5rpx solid white;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.08);
}
.edit-avatar-placeholder {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 5rpx solid white;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44rpx;
}
.edit-avatar-hint {
  font-size: 22rpx;
  color: #bbb;
  margin-top: 10rpx;
}
.edit-id {
  text-align: center;
  font-size: 24rpx;
  color: #B388FF;
  font-weight: 500;
  margin-bottom: 20rpx;
}
.edit-footer {
  padding: 20rpx 48rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

/* ========== 固定顶部导航卡片（独立卡片，不会被内容覆盖）========== */
.top-nav-card {
  position: fixed;
  top: 100rpx;
  left: 0;
  right: 0;
  z-index: 999;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #F4E2E3 0%, #FAF5EE 55%, #FAF5EE 100%);
}
.top-nav-card .nav-back {
  position: absolute;
  left: 24rpx;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  border: 2rpx solid rgba(255,190,210,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-nav-card .nav-back-icon {
  width: 30rpx;
  height: 30rpx;
}
.top-nav-card .nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #C96A85;
  letter-spacing: 2rpx;
}

/* ========== 返回按钮（兼容旧引用，逐步迁移） ========== */
.back-btn {
  position: fixed;
  top: 120rpx;
  left: 24rpx;
  z-index: 999;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.back-btn .back-icon {
  width: 28rpx;
  height: 28rpx;
}

/* ========== 其他 ========== */
.hidden { display: none !important; }