.garden-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 20px 40px;
}
.garden-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.garden-tab {
  padding: 10px 22px;
  border-radius: 25px;
  border: 2px solid #e0e4f0;
  background: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: #555;
  transition: all 0.2s;
}
.garden-tab:hover { border-color: #667eea; color: #667eea; }
.garden-tab.active { background: #667eea; color: white; border-color: #667eea; }
.garden-section h2 {
  font-size: 20px;
  color: #333;
  margin: 24px 0 12px;
  padding-left: 12px;
  border-left: 4px solid #667eea;
}
.garden-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.garden-card {
  background: white;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-left: 4px solid #e0e4f0;
  transition: transform 0.15s;
}
.garden-card:hover { transform: translateY(-2px); }
.garden-card__title {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}
.garden-card__text {
  font-size: 14px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 8px;
}
.garden-card__tip {
  font-size: 12px;
  color: #999;
  border-top: 1px dashed #eee;
  padding-top: 8px;
}
.garden-card--write { border-left-color: #e67e22; }
.garden-card--poem { border-left-color: #8e44ad; background: #fdf8ff; }
.garden-card--note {
  border-left-color: #95a5a6;
  background: #fafbfc;
  box-shadow: none;
}
.garden-card--note .garden-card__title { font-size: 14px; color: #888; }
.garden-card--note .garden-card__text { font-size: 13px; color: #999; margin-bottom: 0; }

.word-grid, .char-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.word-item, .char-item {
  background: #f8f9fc;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  color: #444;
  border: 1px solid #eef0f6;
  cursor: pointer;
  transition: all 0.15s;
}
.word-item:hover, .char-item:hover {
  background: #eef1ff;
  border-color: #667eea;
  color: #4a5cd4;
}
/* 卡片标题里的朗读按钮 */
.garden-speak {
  border: 1px solid #c9d2f5;
  background: #f2f5ff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
  vertical-align: middle;
  transition: all 0.2s;
}
.garden-speak:hover {
  background: #dfe6ff;
  border-color: #667eea;
  transform: scale(1.1);
}
.char-grid--write .char-item {
  background: #fff8e1;
  border-color: #ffe082;
}
.btn-back-home {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255,255,255,0.2);
  padding: 6px 14px;
  border-radius: 12px;
  z-index: 20;
}
.btn-back-home:hover { opacity: 1; }
.header p { font-size: 13px; opacity: 0.85; margin-top: 2px; }

@media (max-width: 500px) {
  .garden-cards { grid-template-columns: 1fr; }
}