/* 基础重置（保留） */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

/* ======================================
   核心：高透毛玻璃 + 蜡笔涂鸦背景 最终版
====================================== */
html body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", sans-serif;
}

/* 1. 蜡笔涂鸦背景（替换成你的本地图路径） */
body {
  background: url("../images/cat-bg.jpeg") repeat fixed center;
  background-size: cover;
  padding: 10px 4%;
  color: #4a5847;
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 12px; /* 全局基础字体统一 */
}


/* 2. 通用毛玻璃样式（统一半透，和所有日志模块一致） */
body #todayDate, 
body .nav, 
body .nav-btn, 
body .stat-card,
body .habit-section, 
body .cat-section, 
body .habit-card, 
body .cat-card,
body .config-box, 
body .diary-table, 
body .week-table, 
body .modal-content,
body .log-detail, 
body .today-note-area {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* 兼容iOS/Safari */
  background: rgba(255, 255, 255, 0.1); /* 图4同款半透毛玻璃 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px; /* 苹果大圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

}

/* ===== 配置框 ===== */
body .config-box {
  display: none;
  padding: 15px;
  margin: 20px;
  border: 2px solid #FFC107;
}
body .config-box h3 { 
  margin-bottom: 10px; 
  font-size: 14px; 
}
body .config-box p { 
  font-size: 12px; 
  margin-bottom: 8px; 
}
body .config-box input {
  width: 100%;
  padding: 8px;
  margin: 4px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
}
body .config-box button {
  width: 100%;
  padding: 10px;
  background: rgba(45, 106, 79, 0.8); /* 按钮半透 */
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 8px;
  font-size: 12px;
}

/* ===== 导航栏 + 顶部日期（字体统一） ===== */
body .nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px; /* 调扁导航栏 */
  margin: 0 8px;
  gap: 10px;
  flex-wrap: nowrap;
  border-radius: 30px;
}

/* 日期显示（和健康生活字体统一） */
body #todayDate {
  font-size: 16px; /* 和分类标题一致 */
  font-weight: 600;
  color: #3d6147;
  padding: 6px 10px; /* 调扁 */
  margin-bottom: 8px;
  white-space: nowrap;
}

/* 按钮容器 ,调导航栏按钮*/
body .nav-btn-group {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: flex-end;
  width: 100%; /* 占满父容器宽度（导航栏） */
  justify-content: space-between; 
}
body .nav-btn {
    /* 核心：让每个按钮占相同宽度 */
  flex: 1; /* 均分按钮组的宽度 */
  min-width: 80px; /* 按钮最小宽度，避免太窄 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  gap: 3px; /* Emoji和文字间距 */
  /* 把Emoji和文字强制分行 */
  white-space: pre-line; 
}
//*调按钮里的字*//
body .nav-btn.active {
  background: rgba(107, 138, 101, 0.2);
  color: #3d6147;
  border-color: rgba(189, 212, 184, 0.4);
  box-shadow: none; /* 去掉原有阴影，保持毛玻璃统一 */
  transform: scale(0.98);
}
body .nav-btn:hover, 
body .nav-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}

body .page { 
  display: none; 
  padding: 15px; 
}
body .page.active { 
  display: block; 
}

/* 分类模块（健康生活/美容养护/心智成长）- 字体统一+调扁 */
body .habit-section, 
body .cat-section {
  padding: 10px; /* 调扁模块 */
  margin-bottom: 10px;
  border: none; /* 去掉原有彩色边框，统一毛玻璃 */
}
body .section-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 8px; 
}
/* 分类标题（和顶部日期/导航字体统一） */
body .section-title { 
  font-size: 13px; 
  font-weight: 600; 
  color: #4a5847; 
}
body .section-progress { 
  font-size: 11px; 
  color: #4a5847; 
  opacity: 0.8; 
}

/* 打卡网格 */
body .habit-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* 调窄卡片 */
  gap: 15px; 
}
body .cat-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* 调窄卡片 */
  gap: 15px; 
}

/* 打卡卡片（调扁+图4同款毛玻璃） */
body .habit-card {
  padding: 6px 4px; /* 大幅调扁 */
  border-radius: 18px;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.3);
  min-height: auto; /* 取消固定高度，更扁 */
}
body .habit-card:hover { 
  border-color: rgba(82, 183, 136, 0.5); 
}
body .habit-card.completed {
  background: rgba(74, 188, 83, 0.2); /* 完成态淡粉高透 */
  border-color: rgba(82, 183, 136, 0.5);
}
body .cat-card {
  padding: 6px px; /* 大幅调扁 */
  border-radius: 18px;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.3);
  min-height: auto; /* 取消固定高度，更扁 */
}
body .cat-card:hover { 
  border-color: rgba(255, 182, 193, 0.5); 
}
body .cat-card.care-card:hover { 
  border-color: rgba(82, 183, 136, 0.5); 
}
body .cat-card.completed {
  background:  rgba(250, 110, 79, 0.249); /* 猫咪完成态淡粉高透 */
  border-color: rgba(255, 182, 193, 0.5);
}
body .cat-card.care-completed {
  background: rgba(74, 188, 83, 0.2); /* 养护完成态淡绿高透 */
  border-color: rgba(82, 183, 136, 0.5);
}

/* 卡片内元素（字体统一调小） */
body .habit-icon, 
body .cat-icon { 
  font-size: 16px; 
  margin-bottom: 10px; 
}
body .habit-name, 
body .cat-name { 
  font-size: 12px; 
  font-weight: 350; 
  color: #62725f; 
  margin-bottom: 5px; 
  line-height: 1; 
}
body .habit-progress { 
  font-size: 9px; 
  color: #4a5847; 
  opacity: 0.8; 
}
body .cat-title { 
  font-size: 13px; /* 和分类标题一致 */
  font-weight: 600; 
  color: #4a5847; 
  margin-bottom: 8px; 
}

/* 今日完成/本周完成率方块（调扁） */
body .stats { 
  display: flex; 
  gap: 8px; 
  margin-bottom: 12px; 
}
body .stat-card {
  padding: 8px 6px; /* 大幅调扁 */
  flex: 1;
  text-align: center;
  min-height: 60px; /* 固定扁高 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body .stat-value { 
  font-size: 18px; /* 调小数值 */
  font-weight: bold; 
  color: #3d6147; 
  margin-bottom: 2px; 
}
body .stat-label { 
  font-size: 11px; 
  color: #4a5847; 
  opacity: 0.8; 
}

/* 同步状态 */
body .sync-status { 
  position: fixed; 
  top: 5px; 
  right: 5px; 
  padding: 5px 10px; 
  border-radius: 12px; 
  font-size: 11px; 
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body .sync-status.online { 
  background: rgba(216, 243, 220, 0.8); 
  color: #2D6A4F; 
}
body .sync-status.offline { 
  background: rgba(255, 228, 230, 0.8); 
  color: #E76F51; 
}

/* 周视图（打卡框与周几列严格对齐） */
body .week-table { 
  margin-bottom: 12px; 
  overflow: hidden; 
}

/* 表头 - 统一布局+样式，和行完全对齐 */
body .week-header { 
  display: grid; /* 强制生效grid布局 */
  grid-template-columns: 2.5fr repeat(7, 1fr); /* 和周行列宽统一为2.5fr */
  padding: 8px 4px; /* 修正语法错误，配合顶格 */
  font-weight: 600; 
  font-size: 1px; /* 周几基础字体 */
  color: #4a5847; /* 统一表头文字色 */
}

/* 表头列容器 - 统一对齐，周几/日期分行 */
body .week-header-col { 
  text-align: center; /* 日期列居中，第一列单独左对齐 */
  font-size: 13px; 
  line-height: 1.5;
  color: #4a5847; 
  display: flex;
  flex-direction: column; /* 周几在上、日期在下分行 */
  justify-content: center;
  align-items: center;
  padding: 4px 2px; /* 和行里的week-col padding匹配 */
}

/* 周几文字 - 统一样式 */
body .week-header-col .week-day-text { 
  font-size: 13px; /* 修正原1px的错误 */
  margin-bottom: 2px; /* 周几和日期间距 */
  font-weight: 500;
  color: #4a5847;
}

/* 日期文字 - 统一样式，稍浅区分层级（修复版） */
/* 精准匹配实际元素 .week-date-header，加!important确保生效 */
body .week-header-col span.week-date-header { 
  font-size: px !important; /* 你想要的字体大小，可自行调整 */
  color: #6B8A65 !important; 
  font-weight: 200 !important;
}

/* 表头第一列（习惯名称标题）- 左对齐+顶格 */
body .week-header-col:first-child { 
  text-align: left; 
  justify-content: center; /* 垂直居中 */
  align-items: flex-start; /* 水平左对齐 */
}

/* 周行 - 和表头完全对齐 */
body .week-row { 
  display: grid; 
  grid-template-columns: 2.5fr repeat(7, 1fr); /* 和表头列宽完全一致 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  align-items: center;
  padding: 6px 4px; /* 新增上下padding，和表头匹配 */
  padding-left: 4px; /* 行整体左移，配合顶格 */
}
body .week-row:last-child { 
  border-bottom: none; 
}
body .week-row:hover { 
  background: rgba(255, 255, 255, 0.15); 
}

/* 习惯名称列 - 顶格左对齐，和表头第一列匹配 */
body .week-col-name { 
  padding: 6px 0 6px 10px; /* 和表头第一列padding-left:10px统一，顶格 */
  font-size: 13px; 
  font-weight: 500; 
  color: #4a5847; 
  line-height: 0.; 
  text-align: left; 
  white-space: nowrap; 
}

/* 打卡框列 - 和表头日期列对齐 */
body .week-col { 
  padding: 4px 2px; /* 和表头week-header-col padding匹配 */
  text-align: center; 
  height: 10px; 
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 打勾方框（适配周视图对齐） */
body .checkbox { 
  width: 24px; /* 调小打卡框 */
  height: 24px; 
  border: 2px solid rgba(221, 232, 214, 0.8); 
  border-radius: 6px; 
  cursor: pointer; 
  display: inline-block; 
  transition: all 0.1s ease; 
  margin: 0 auto;
  backdrop-filter: blur(4px);
}
body .checkbox:hover { 
  border-color: #52B788; 
  transform: scale(1.05); 
}
body .checkbox.checked { 
  background: rgba(82, 183, 136, 0.8); 
  border-color: #52B788; 
  position: relative; 
}
body .checkbox.checked::after { 
  content: '✓'; 
  color: white; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  font-size: 14px; 
}
body .checkbox.flipping { 
  animation: flip360 0.5s ease-in-out; 
}

@keyframes flip360 {
  0% { transform: rotateY(0deg) scale(1); }
  25% { transform: rotateY(90deg) scale(1.2); }
  50% { transform: rotateY(180deg) scale(1.2); }
  75% { transform: rotateY(270deg) scale(1.1); }
  100% { transform: rotateY(360deg) scale(1); }
}

/* 周切换导航 */
body .week-nav { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
  margin-bottom: 12px; 
}
body .week-nav button { 
  padding: 6px 12px; /* 调扁 */
  border: none; 
  background: rgba(45, 106, 79, 0.8); 
  color: white; 
  border-radius: 12px; 
  cursor: pointer; 
  font-size: 11px;
  backdrop-filter: blur(4px);
}
body .week-nav button:hover { 
  background: rgba(82, 183, 136, 0.8); 
}
body .week-nav span { 
  font-size: 12px; 
  font-weight: 600; 
  color: #3d6147; 
}

/* 今天日志输入框 */
body .today-note-area { 
  padding: 8px; /* 调扁 */
  border-radius: 20px; 
  font-size: 12px; /* 和分类标题一致 */
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 248, 250, 0.2);
  border: 1px solid rgba(255, 228, 230, 0.5);
}
body .today-note-title { 
  font-size: 12px; 
  font-weight: 600; 
  color: #4a5847; 
  margin-bottom: 4px; 
}
body .today-note-input { 
  width: 100%; 
  padding: 6px; /* 调扁 */
  border: 1px solid rgba(255, 228, 230, 0.5); 
  border-radius: 12px; 
  font-size: 11px; 
  resize: vertical; 
  min-height: 40px; /* 调扁 */
  font-family: inherit; 
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #4a5847;
}
body .today-note-input:focus { 
  outline: none; 
  border-color: rgba(255, 182, 193, 0.8); 
}
body .today-note-btn { 
  padding: 4px 10px; /* 调扁 */
  background: rgba(255, 182, 193, 0.8); 
  color: white; 
  border: none; 
  border-radius: 12px; 
  cursor: pointer; 
  font-size: 11px;
  backdrop-filter: blur(4px);
}
body .today-note-btn:hover { 
  background: rgba(255, 156, 173, 0.8); 
}

/* 日记表格 + 所有日志（字体统一调小） */
body .diary-table { 
  overflow: hidden; 
}
body .diary-header { 
  display: grid; 
  grid-template-columns: 60px 1fr 2fr 50px; 
  padding: 10px; /* 调扁 */
  font-weight: 600; 
  gap: 6px; 
  font-size: 12px; /* 日志表头字体调小 */
  background: rgba(255, 240, 245, 0.2);
}
body .diary-row { 
  display: grid; 
  grid-template-columns: 60px 1fr 2fr 50px; 
  padding: 6px; /* 调扁 */
  border-bottom: 1px solid rgba(255, 228, 230, 0.2); 
  gap: 6px; 
  align-items: start; 
  font-size: 12px; /* 日志内容字体统一 */
}
body .diary-row:last-child { 
  border-bottom: none; 
}
body .diary-tag { 
  display: inline-block; 
  padding: 1px 4px; /* 调扁标签 */
  border-radius: 8px; 
  font-size: 10px; /* 标签字体调小 */
  margin: px;
  backdrop-filter: blur(4px);
    background: rgba(213, 245, 218, 0.655); 
  color: #566c62; 
}
body .diary-tag.issue { 
  background: rgba(255, 228, 230, 0.8); 
  color: #E76F51; 
}
body .diary-tag.note { 
  background: rgba(255, 249, 196, 0); 
  color: #463e36; 
}
body .diary-tag.normal { 
  background: rgba(216, 243, 220, 0.8); 
  color: #2D6A4F; 
  font-size: 11px; /* 正常日志标签字体调小 */
}
body .diary-note { 
  font-size: 11px; /* 日志备注字体调小 */
  color: #6B8A65; 
  line-height: 1.4; 
  word-break: break-all; 
}
body .edit-note-btn { 
  padding: 2px 4px; /* 调扁按钮 */
  background: rgba(255, 182, 193, 0.8); 
  color: white; 
  border: none; 
  border-radius: 8px; 
  cursor: pointer; 
  font-size: 11px; /* 按钮字体调小 */
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
body .edit-note-btn:hover { 
  background: rgba(255, 156, 173, 0.8); 
}

/* 所有日志模块（图4样式，字体统一） */
body .log-detail { 
  padding: 8px 10px; /* 调扁 */
  border-radius: 20px; 
  margin-bottom: 8px;
  display: flex; 
  gap: 8px; 
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(249, 250, 248, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
body .log-detail-date { 
  font-weight: 600; 
  color: #3d6147; 
  min-width: 50px;
  font-size: 10px; /* 日志日期字体调小 */
}

/* 模态框 */
body .modal { 
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.5); 
  align-items: center; 
  justify-content: center; 
  z-index: 1000; 
}
body .modal.show { 
  display: flex; 
}
body .modal-content { 
  padding: 20px; /* 调扁 */
  border-radius: 20px; 
  width: 350px; 
  max-width: 90vw;
  font-size: 11px; /* 模态框字体统一 */
}
body .modal-content h3.modal-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #4a5847;
}
body .modal-content h3.modal-title.pink { 
  color: rgba(255, 182, 193, 0.9); 
}
body .modal-scroll-area { 
  max-height: 60vh; 
  overflow-y: auto; 
}
body .modal-subtitle {
  margin-bottom: 6px;
  font-size: 10px;
  color: #666;
}
body .modal-input { 
  width: 100%; 
  padding: 8px; /* 调扁 */
  border: 1px solid rgba(221, 232, 214, 0.8); 
  border-radius: 12px; 
  margin-bottom: 10px; 
  font-size: 11px; 
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  color: #4a5847;
}
body .modal-input:focus { 
  outline: none; 
  border-color: #52B788; 
}
body .modal-select { 
  width: 100%; 
  padding: 8px; /* 调扁 */
  border: 1px solid rgba(221, 232, 214, 0.8); 
  border-radius: 12px; 
  margin-bottom: 10px; 
  font-size: 11px; 
  box-sizing: border-box; 
  background: rgba(255, 255, 255, 0.1);
  color: #4a5847;
}
body .modal-buttons { 
  display: flex; 
  gap: 8px; 
  margin-top: 12px; 
}
body .modal-btn { 
  flex: 1; 
  padding: 8px; /* 调扁 */
  border: none; 
  border-radius: 12px; 
  cursor: pointer; 
  font-size: 11px;
  backdrop-filter: blur(4px);
}
body .modal-btn.cancel { 
  background: rgba(244, 247, 242, 0.8); 
  color: #6B8A65; 
}
body .modal-btn.confirm { 
  background: rgba(45, 106, 79, 0.8); 
  color: white; 
}

/* 编辑备注模态框（粉色主题） */
body .edit-note-modal {
  width: 400px;
  border: 3px solid rgba(255, 182, 193, 0.5);
  box-shadow: 0 4px 20px rgba(255, 182, 193, 0.3);
}
body .edit-note-modal textarea {
  border-color: rgba(255, 182, 193, 0.5);
  resize: vertical;
  min-height: 80px; /* 调扁 */
  background: rgba(255, 255, 255, 0.1);
  font-size: 10px;
}
body .edit-note-modal textarea:focus {
  border-color: rgba(255, 156, 173, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 182, 193, 0.1);
}

/* iPhone14适配 */
@media screen and (max-width: 390px) {
  body .modal-content { 
    width: 90vw; 
  }
  body .edit-note-modal { 
    width: 90vw; 
  }
  body .checkbox { 
    width: 22px; 
    height: 22px; 
  }
}

/*添加的编辑按钮*/
/* 习惯编辑模式样式 - 加减按钮 */
.habit-edit-mode {
  position: relative;
  background: #fef2f2;
  border-radius: 4px;
  padding: 4px;
}

/* 加减按钮样式 - 防误触间距 */
.habit-count-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: #4a5847;
  color: white;
  font-size: 16px;
  cursor: pointer;
  margin: 0 6px; /* 关键：间距避免误触 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation; /* 移动端防误触 */
}

.habit-count-btn:hover {
  background: #3a4837;
}

/* 总次数输入框 */
.habit-total-input {
  width: 40px;
  height: 24px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 0 4px;
}

/* 编辑模式提示 */
.edit-mode-tip {
  font-size: 10px;
  color: #6B8A65;
  margin-top: 2px;
}