/* =================================================================
 * 亲情守护树 · 页面专属样式 (v2 优化版)
 *
 * 设计原则：
 *   - 温暖、治愈，浅米色 + 浅绿色调，柔和阴影
 *   - 移动端优先；桌面端在已有 .main / .sidebar 布局下不贴边
 *   - 大字号、大按钮，老人用户友好
 *   - 动效极克制，叶层几乎不晃；prefers-reduced-motion 完全降级
 *
 * 命名约定：.ft-* 全前缀，与 .park-* / .main 等不冲突
 *
 * 树图层 CSS 变量校准：每个 .ft-tree-layer 用以下变量做位移/缩放
 *   --ft-layer-x      水平偏移   默认 0
 *   --ft-layer-y      垂直偏移   默认 0
 *   --ft-layer-scale  缩放比例   默认 1
 * 各层可以单独覆盖，让分层素材对齐成一棵完整的树
 * ================================================================= */

:root {
  --ft-bg:        #FAF6EE;
  --ft-bg-soft:   #FFFDF8;
  --ft-card:      #ffffff;
  --ft-green:     #6BAA73;
  --ft-green-deep:#3F7A4A;
  --ft-green-soft:#E7F2E8;
  --ft-water:     #5BA7E0;
  --ft-water-soft:#E1F0FA;
  --ft-gold:      #C9A24D;
  --ft-gold-soft: #FBF4DF;
  --ft-text:      #2E3A2F;
  --ft-text-2:    #6E7A6F;
  --ft-text-3:    #99A39A;
  --ft-border:    rgba(63, 122, 74, 0.12);
  --ft-shadow:    0 14px 36px rgba(63, 122, 74, 0.12);
  --ft-shadow-soft: 0 4px 14px rgba(63, 122, 74, 0.06);
  --ft-radius:    20px;
  --ft-radius-sm: 14px;
}

/* =============================================================
 * 顶层容器：不覆盖 .main 的 padding/max-width/margin，
 * 让 app.js 的 sidebar/topbar/tabbar 布局正常工作
 * ============================================================= */
.ft-main {
  background: linear-gradient(180deg, var(--ft-bg) 0%, #F2EDDF 100%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ft-text);
}

/* =============================================================
 * Hero 头部
 * ============================================================= */
.ft-hero {
  position: relative;
  padding: 28px 22px 22px;
  background: linear-gradient(135deg, #E7F2E8 0%, #F2EDDF 100%);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 4px;
}
.ft-hero-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ft-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
}
.ft-orb-1 {
  width: 180px; height: 180px;
  top: -40px; right: -30px;
  background: var(--ft-green);
}
.ft-orb-2 {
  width: 140px; height: 140px;
  bottom: -20px; left: -20px;
  background: var(--ft-gold);
  opacity: 0.25;
}
.ft-hero-content { position: relative; z-index: 1; }
.ft-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ft-green-deep);
  text-decoration: none;
  padding: 8px 14px 8px 10px;
  background: #fff;
  border-radius: 999px;
  margin-bottom: 14px;
  border: 1.5px solid var(--ft-border);
  box-shadow: 0 3px 10px rgba(63,122,74,0.08);
  transition: all 0.18s;
}
.ft-back:hover {
  background: var(--ft-green-soft);
  border-color: var(--ft-green);
  transform: translateX(-2px);
}
/* 返回箭头由 HTML 中 data-icon="chevron-left" 渲染，去掉伪元素避免重复 */
.ft-back [data-icon] { color: var(--ft-green); }
.ft-title {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--ft-green-deep);
  letter-spacing: 0.5px;
}
.ft-subtitle {
  margin: 0;
  font-size: 14.5px;
  color: var(--ft-text-2);
  line-height: 1.6;
}

/* =============================================================
 * 亲友切换 chips（sticky 顶部）
 * ============================================================= */
.ft-friends {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 12px 0 0;                   /* 不再贯穿到屏边，跟上下卡片同宽 */
  background: rgba(255, 253, 248, 0.95);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-sm); /* 跟 .ft-stage / .ft-section 联动 */
  box-shadow: var(--ft-shadow-soft);
  position: sticky;
  top: 8px;                            /* sticky 时与顶部预留间距 */
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ft-friends-scroll {
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  gap: 10px;
}
.ft-friends-scroll::-webkit-scrollbar { display: none; }
.ft-friends-loading {
  font-size: 13px;
  color: var(--ft-text-3);
  padding: 8px 4px;
}
.ft-friend-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid var(--ft-border);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ft-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s;
  font-family: inherit;
}
.ft-friend-chip-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ft-green-soft);
  color: var(--ft-green-deep);
  font-weight: 700;
  font-size: 13px;
}
.ft-friend-chip:hover {
  border-color: var(--ft-green);
  background: var(--ft-green-soft);
}
.ft-friend-chip.is-active {
  background: linear-gradient(135deg, var(--ft-green), var(--ft-green-deep));
  border-color: var(--ft-green-deep);
  color: #fff;
  box-shadow: 0 4px 12px rgba(63,122,74,0.25);
}
.ft-friend-chip.is-active .ft-friend-chip-ava {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.ft-friend-chip-add {
  background: var(--ft-bg-soft);
  border-style: dashed;
  color: var(--ft-green-deep);
}
.ft-manage-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1.5px solid var(--ft-border);
  background: #fff;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ft-text-2);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.ft-manage-btn:hover {
  border-color: var(--ft-green);
  color: var(--ft-green-deep);
}

/* =============================================================
 * 空状态（没有任何亲友档案）
 * ============================================================= */
.ft-empty {
  margin: 40px 0;
  padding: 56px 28px 48px;
  background: #fff;
  border-radius: var(--ft-radius);
  text-align: center;
  box-shadow: var(--ft-shadow-soft);
}
.ft-empty-illu {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 18px;
  animation: ftBreath 4s ease-in-out infinite;
}
.ft-empty h2 {
  font-size: 20px;
  margin: 0 0 6px;
  color: var(--ft-text);
}
.ft-empty p {
  font-size: 14.5px;
  color: var(--ft-text-2);
  margin: 0 0 24px;
  line-height: 1.7;
}
.ft-empty-note {
  font-size: 12.5px;
  color: var(--ft-text-3);
  margin-top: 16px;
  line-height: 1.6;
}

/* =============================================================
 * 大树主卡片 - 整个页面的视觉中心
 *   - 顶部「X 的健康树」标题 + 守护天数 badge
 *   - 中间大树场景（含光晕 + 草地）
 *   - 底部阶段信息 + 浇水 / 施肥按钮
 * ============================================================= */
.ft-stage {
  position: relative;
  margin: 18px 0 0;
  padding: 22px 18px 22px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(255, 246, 200, 0.55), transparent 70%),
    linear-gradient(180deg, #FFFDF8 0%, #F4EFE0 100%);
  border: 1px solid rgba(107, 170, 115, 0.14);
  border-radius: 26px;
  box-shadow: var(--ft-shadow);
  overflow: hidden;
}

/* 顶部标题行：「爸爸的健康树」+ 连续守护 N 天 */
.ft-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 4px 8px;
  flex-wrap: wrap;
}
.ft-stage-head-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ft-text);
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ft-stage-head-title .ft-stage-head-emoji {
  font-size: 18px;
}
.ft-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFEDC7, #FBF4DF);
  border: 1px solid rgba(201, 162, 77, 0.3);
  font-size: 12.5px;
  font-weight: 700;
  color: #876520;
}
.ft-streak-ico { font-size: 13px; }
.ft-streak.is-zero {
  background: #F5F2EA;
  border-color: var(--ft-border);
  color: var(--ft-text-3);
}

/* 树场景容器：固定高度 + 内部用 grid 让树和地面分层叠加
   背景用柔和米黄渐变，与树 PNG 画布尽量过渡，不出现方形色块 */
.ft-tree-scene {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  height: auto;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 247, 210, 0.95), transparent 55%),
    linear-gradient(180deg, #fff8df 0%, #f5e9cb 100%);
  border-radius: 20px;
  overflow: hidden;                    /* 动画被限定在图片范围内 */
  margin: 0 auto;
  display: block;
  z-index: 0;
}

/* 草地投影：树场景底部一个柔和椭圆暗影，让树看起来"种"在地上 */
.ft-tree-ground {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 70%;
  height: 28px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(63, 122, 74, 0.18), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* 树图层基础：所有层 absolute 撑满容器，transform 用 CSS 变量校准
 *   注意：所有树相关 keyframes 都必须在 transform 里引用同样的变量
 *   否则动画一开始变量就被覆盖，校准失效
 */
.ft-tree-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: center bottom;
  user-select: none;
  pointer-events: none;
  display: none;                       /* 默认隐藏，JS 加 is-active 才显示 */
  transform:
    translateX(var(--ft-layer-x, 0))
    translateY(var(--ft-layer-y, 0))
    scale(var(--ft-layer-scale, 1));
  will-change: transform;
}
.ft-tree-layer.is-active { display: block; }

/* 各层叠加顺序 + 单独校准（如未来要细分层叠加，调这里）
 *   实际策略（见 family-tree.js renderTree）：
 *     stage 0~7 默认都用 single 层（整图）作为主视觉
 *     overlay 层（leaves-front, flowers, fruits, herbs）仅做装饰动效，可选
 */
.ft-layer-grass        { z-index: 1; }
.ft-layer-single       { z-index: 3; --ft-layer-y: 0; --ft-layer-scale: 1; }
.ft-layer-trunk        { z-index: 3; --ft-layer-y: 8px;  --ft-layer-scale: 0.92; }
.ft-layer-leaves-back  { z-index: 4; --ft-layer-y: -6px; --ft-layer-scale: 0.95; }
.ft-layer-leaves-front { z-index: 5; --ft-layer-y: -8px; --ft-layer-scale: 0.94; }
.ft-layer-flowers      { z-index: 6; --ft-layer-y: -10px; --ft-layer-scale: 0.92; }
.ft-layer-fruits       { z-index: 7; --ft-layer-y: -8px;  --ft-layer-scale: 0.90; }
.ft-layer-herbs        { z-index: 8; --ft-layer-y: 30px;  --ft-layer-scale: 0.80; }

/* 效果叠加层：水滴 / 粒子 / 升级光圈用，绝对定位 */
.ft-effect-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 9;
}

/* 整树呼吸（轻微 scale + 上下），作用在 scene 上 */
.ft-tree-scene { animation: ftSceneBreath 7s ease-in-out infinite; }

/* 叶层轻微摇摆（极克制）—— 必须引用 CSS 变量保持校准
 *   关键：keyframes 里仍要带 translateX/Y/scale 变量，否则动画一启用，
 *   校准就被覆盖（树会瞬间复位然后开始抖）
 *
 *   single 整图：不再做摇摆动画，整张树图旋转 0.2deg 看起来都很怪
 *   生命感由 .ft-tree-scene 的 ftSceneBreath（scale + translateY）承担
 */
.ft-layer-single       { animation: none; }
.ft-layer-leaves-back  { animation: ftLayerSway 9s ease-in-out infinite; }
.ft-layer-leaves-front { animation: ftLayerSwayFront 6.5s ease-in-out infinite; }
.ft-layer-flowers      { animation: ftLayerPulse 3.5s ease-in-out infinite; }
.ft-layer-fruits       { animation: ftLayerBob 4.5s ease-in-out infinite; }
.ft-layer-herbs        { animation: ftLayerPulse 4s ease-in-out infinite; }

/* 升级时的 pop（scale + 光圈） */
.ft-tree-scene.is-upgrade { animation: ftTreeUpgrade 1.5s cubic-bezier(.34,1.56,.64,1); }
.ft-tree-scene.is-watering { animation: ftTreeBounce 0.6s cubic-bezier(.36,.07,.19,.97); }
.ft-tree-scene.is-fertilizing { animation: ftTreeGlow 1.2s ease-in-out; }

/* 阶段信息 */
.ft-stage-info {
  text-align: center;
  margin-top: 4px;
  position: relative;
  z-index: 2;
}
.ft-stage-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--ft-green-deep);
}
.ft-stage-tip {
  font-size: 13.5px;
  color: var(--ft-text-2);
  margin-top: 4px;
  line-height: 1.6;
  padding: 0 8px;
}

/* 浇水 / 施肥 按钮行 */
.ft-action-row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  padding: 0 4px;
  position: relative;
  z-index: 2;
}
.ft-action {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 12px;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  position: relative;
  transition: transform 0.12s, box-shadow 0.15s, opacity 0.15s;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}
.ft-action:active { transform: translateY(1px); }
.ft-action[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.ft-action-water     { background: linear-gradient(135deg, #74B8E5, #4A8FC4); }
.ft-action-fertilize { background: linear-gradient(135deg, #E5C46E, #C99634); }
.ft-action-ico   { font-size: 26px; line-height: 1; }
.ft-action-label { font-size: 15.5px; letter-spacing: 1px; }
.ft-action-chip {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  min-width: 28px;
}

/* =============================================================
 * 通用 section 卡片
 * ============================================================= */
.ft-section {
  margin: 18px 0 0;
  padding: 18px;
  background: var(--ft-card);
  border-radius: var(--ft-radius);
  box-shadow: var(--ft-shadow-soft);
  border: 1px solid var(--ft-border);
}
.ft-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--ft-green-deep);
}

/* =============================================================
 * 任务卡
 * ============================================================= */
.ft-tasks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ft-task {
  padding: 14px 14px;
  border-radius: var(--ft-radius-sm);
  background: linear-gradient(180deg, #FCFAF1, #F5F1DF);
  border: 1px solid var(--ft-border);
  transition: all 0.15s;
}
.ft-task:hover { border-color: var(--ft-green); }
.ft-task-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ft-task-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.ft-task-icon.is-water     { background: var(--ft-water-soft); }
.ft-task-icon.is-fertilize { background: var(--ft-gold-soft); }
.ft-task-icon svg { display: block; }
.ft-task-body { flex: 1; min-width: 0; }
.ft-task-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ft-text);
  margin-bottom: 2px;
}
.ft-task-desc {
  font-size: 12.5px;
  color: var(--ft-text-2);
  line-height: 1.5;
}
.ft-task-reward {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
}
.ft-task-reward.is-water     { background: var(--ft-water-soft); color: #2A6FAE; }
.ft-task-reward.is-fertilize { background: var(--ft-gold-soft); color: #876520; }
.ft-task-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: 999px;
  border: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--ft-green), var(--ft-green-deep));
  white-space: nowrap;
  transition: transform 0.12s, opacity 0.15s;
}
.ft-task-btn:active { transform: scale(0.96); }

/* 已完成状态：清晰的"已完成 ✓"标识 + 浅绿背景 */
.ft-task.is-done {
  background: linear-gradient(180deg, #EAF5EB, #DCEEDE);
  border-color: rgba(107,170,115,0.35);
}
.ft-task.is-done .ft-task-title { color: var(--ft-green-deep); }
.ft-task.is-done .ft-task-btn {
  background: rgba(63,122,74,0.18);
  color: var(--ft-green-deep);
  cursor: default;
  pointer-events: none;
  padding: 9px 12px;
}

/* 上传截图区 ----------------------------------------------------- */
.ft-task-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(63,122,74,0.18);
}
.ft-task-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px dashed var(--ft-border);
  background: rgba(255,255,255,0.6);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ft-text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.ft-task-upload-btn:hover {
  border-color: var(--ft-green);
  color: var(--ft-green-deep);
  background: #fff;
}
.ft-task-upload-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.ft-task-upload-input { display: none; }
.ft-task-upload-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ft-border);
  flex-shrink: 0;
}
.ft-task-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ft-task-upload-hint {
  flex: 1;
  font-size: 11.5px;
  color: var(--ft-text-3);
  line-height: 1.4;
}
.ft-task-upload-status {
  font-size: 11px;
  color: var(--ft-green-deep);
  font-weight: 600;
}
.ft-task.is-done .ft-task-upload { display: none; }

/* =============================================================
 * 今日关怀
 * ============================================================= */
.ft-care-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.ft-care-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ft-bg-soft);
  border: 1px solid var(--ft-border);
  font-size: 13.5px;
  color: var(--ft-text-2);
}
.ft-care-pill.is-on {
  background: var(--ft-green-soft);
  border-color: var(--ft-green);
  color: var(--ft-green-deep);
  font-weight: 600;
}
.ft-care-pill-ico {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}
.ft-care-pill-ico svg { display: block; }
.ft-care-tip {
  font-size: 12.5px;
  color: var(--ft-text-3);
  margin: 0 0 12px;
  line-height: 1.6;
}
.ft-care-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, opacity 0.15s, background 0.15s;
}
.ft-btn:active { transform: scale(0.97); }
.ft-btn-primary {
  background: linear-gradient(135deg, var(--ft-green), var(--ft-green-deep));
  color: #fff;
  box-shadow: 0 4px 12px rgba(63,122,74,0.25);
}
.ft-btn-ghost {
  background: #fff;
  color: var(--ft-text);
  border: 1.5px solid var(--ft-border);
}
.ft-btn-soft {
  background: var(--ft-green-soft);
  color: var(--ft-green-deep);
}
.ft-btn-soft:hover { background: #D7E6D9; }
.ft-btn-large {
  padding: 14px 24px;
  font-size: 16px;
  border-radius: 16px;
}

/* =============================================================
 * 草药 / 茶包
 * ============================================================= */
.ft-harvest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.ft-harvest-col-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ft-text-2);
  margin-bottom: 8px;
}
.ft-herbs, .ft-teabags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ft-herb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--ft-green-soft);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ft-green-deep);
  font-weight: 600;
}
.ft-herb-count {
  background: rgba(63,122,74,0.18);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11.5px;
}
.ft-teabag {
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--ft-gold-soft), #F8E9C4);
  border-radius: var(--ft-radius-sm);
  font-size: 13.5px;
  color: #6B4F12;
  font-weight: 600;
  border: 1px solid rgba(201,162,77,0.3);
}
.ft-empty-mini {
  font-size: 13px;
  color: var(--ft-text-3);
  padding: 6px 4px;
  line-height: 1.6;
}

/* =============================================================
 * 最近动态
 * ============================================================= */
.ft-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ft-event {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ft-radius-sm);
  background: var(--ft-bg-soft);
}
.ft-event-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ft-green);
  margin-top: 8px;
}
.ft-event-body { flex: 1; min-width: 0; }
.ft-event-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  margin: 0 4px;
}
.ft-event-ico svg { display: block; }
.ft-event-title {
  font-size: 14px;
  color: var(--ft-text);
  line-height: 1.5;
}
.ft-event-time {
  font-size: 12px;
  color: var(--ft-text-3);
  margin-top: 2px;
}
.ft-event[data-type="water"]         .ft-event-dot { background: var(--ft-water); }
.ft-event[data-type="fertilize"]     .ft-event-dot { background: var(--ft-gold); }
.ft-event[data-type="upgrade"]       .ft-event-dot { background: #E76B4B; }
.ft-event[data-type="herb_drop"]     .ft-event-dot { background: var(--ft-green-deep); }
.ft-event[data-type="teabag_unlock"] .ft-event-dot { background: var(--ft-gold); }

/* 2026-05-18 v3 返工 Phase 4a：时间线右侧任务截图缩略图 */
.ft-event-thumb {
  flex-shrink: 0;
  width: 56px; height: 42px; border-radius: 8px;
  overflow: hidden; align-self: center;
  box-shadow: 0 1px 4px rgba(46, 58, 47, .12);
  text-decoration: none; background: #fff;
}
.ft-event-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-event-thumb:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(46, 58, 47, .18); }

/* =============================================================
 * 模态层（绑定 / 管理）
 * ============================================================= */
.ft-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ft-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46,58,47,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: ftFadeIn 0.2s ease-out;
}
.ft-modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 20px;
  padding: 22px 22px 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  animation: ftModalIn 0.25s cubic-bezier(.34,1.56,.64,1);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
/* 2026-05-22：管理亲友档案弹窗用更大的宽度 + 更舒展的内边距，
   原 380px 在多档案 + 长称呼时显得拥挤（用户反馈：内容挤在一起） */
.ft-modal-card.is-wide {
  max-width: 540px;
  padding: 26px 26px 22px;
}
.ft-modal-card.is-wide .ft-modal-manage-list {
  margin-top: 6px;
}
.ft-modal-card.is-wide .ft-modal-manage-row {
  padding: 14px 14px;
  gap: 14px;
}
.ft-modal-card.is-wide .ft-modal-manage-actions {
  gap: 8px;
}
.ft-modal-card.is-wide .ft-modal-manage-actions button {
  padding: 8px 14px;
  font-size: 13.5px;
}
@media (max-width: 600px) {
  /* 手机宽度：保持 wide 也能 fit，但保留 16px 边距 */
  .ft-modal-card.is-wide {
    max-width: calc(100vw - 32px);
    padding: 20px 18px 18px;
  }
}
.ft-modal-close {
  position: absolute;
  top: 10px; right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 22px;
  color: var(--ft-text-3);
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
}
.ft-modal-close:hover {
  background: var(--ft-bg);
  color: var(--ft-text);
}
.ft-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ft-text);
}
.ft-modal-desc {
  font-size: 13.5px;
  color: var(--ft-text-2);
  margin: 0 0 18px;
  line-height: 1.6;
}
.ft-modal-note {
  font-size: 12px;
  color: var(--ft-text-3);
  line-height: 1.6;
  background: var(--ft-bg-soft);
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.ft-modal-rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.ft-modal-rel-btn {
  padding: 10px 8px;
  border: 1.5px solid var(--ft-border);
  background: #fff;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ft-modal-rel-btn:hover {
  border-color: var(--ft-green);
  color: var(--ft-green-deep);
}
.ft-modal-rel-btn.is-active {
  background: var(--ft-green-soft);
  border-color: var(--ft-green);
  color: var(--ft-green-deep);
  font-weight: 700;
}

/* 提醒类型网格（2026-05-17 通用提醒）*/
.ft-remind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0 6px;
}
@media (max-width: 480px) {
  .ft-remind-grid { grid-template-columns: repeat(2, 1fr); }
}
.ft-remind-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 6px;
  border: 1.5px solid var(--ft-border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  color: var(--ft-text-2);
  transition: all 0.16s;
  min-height: 86px;
}
.ft-remind-chip:hover {
  border-color: var(--ft-green);
  background: var(--ft-green-soft);
  color: var(--ft-green-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(63,122,74,0.14);
}
.ft-remind-chip:active { transform: translateY(0); }
.ft-remind-chip.is-loading { opacity: 0.7; pointer-events: none; }
.ft-remind-chip [data-icon] { color: var(--ft-green); }
.ft-remind-chip-label {
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}
html.senior-mode .ft-remind-chip { min-height: 96px; padding: 16px 8px; }
html.senior-mode .ft-remind-chip-label { font-size: 15px; }
.ft-modal-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ft-border);
  border-radius: 12px;
  font-size: 15px;
  background: var(--ft-bg-soft);
  margin-bottom: 16px;
  box-sizing: border-box;
  font-family: inherit;
}
.ft-modal-input:focus {
  outline: 0;
  border-color: var(--ft-green);
  background: #fff;
}
.ft-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.ft-modal-manage-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
}
.ft-modal-manage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ft-bg-soft);
  border-radius: 12px;
  flex-wrap: wrap;
}
.ft-mng-name-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ft-modal-manage-name {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ft-mng-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ft-mng-badges > * {
  white-space: nowrap;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ft-green-soft);
  color: var(--ft-green-deep);
  font-weight: 600;
}
.ft-mng-badges .is-solo { background: #F0EDE5; color: var(--ft-text-3); }
.ft-mng-badges .is-partner { background: var(--ft-green-soft); color: var(--ft-green-deep); }
.ft-mng-badges .is-role-partner { background: var(--ft-gold-soft); color: #876520; }
.ft-modal-manage-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.ft-modal-manage-actions button {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  background: #fff;
  border: 1px solid var(--ft-border);
  cursor: pointer;
  color: var(--ft-text-2);
  font-family: inherit;
}
.ft-modal-manage-actions button.is-danger {
  color: #C44A4A;
  border-color: rgba(196,74,74,0.3);
}

/* =============================================================
 * Toast 提示
 *   - 普通 toast（浇水成功 / 截图上传等）：底部，不挡树主体
 *   - 升级 / 草药 toast：仪式感居中（带 .is-upgrade / .is-herb）
 *   - 调用方控制：升级 toast 触发前要先清空底部 toast，避免叠加
 * ============================================================= */
.ft-toast-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 200;
  /* 普通 toast 距离底部约 96px，避开 tabbar，也不挡大树主体 */
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  padding-top: 12vh;
}
.ft-toast {
  background: rgba(46,58,47,0.92);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  text-align: center;
  animation: ftToastIn 0.4s cubic-bezier(.34,1.56,.64,1), ftToastOut 0.5s ease-in 1.6s forwards;
  pointer-events: none;
  max-width: 80vw;
  margin-top: 8px;
}
.ft-toast .ft-toast-icon {
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  vertical-align: middle;
  line-height: 1;
  flex: 0 0 auto;
}
.ft-toast .ft-toast-icon svg { display: block; }
.ft-toast .ft-toast-sub {
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 4px;
}

/* 升级 / 草药 toast：仪式感居中、字号更大 */
.ft-toast.is-upgrade,
.ft-toast.is-herb {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  padding: 18px 28px;
  animation: ftToastInCenter 0.4s cubic-bezier(.34,1.56,.64,1), ftToastOutCenter 0.5s ease-in 1.8s forwards;
}
.ft-toast.is-upgrade .ft-toast-icon,
.ft-toast.is-herb .ft-toast-icon {
  font-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
  vertical-align: middle;
  line-height: 1;
}
.ft-toast.is-upgrade {
  background: linear-gradient(135deg, #6BAA73, #3F7A4A);
}
.ft-toast.is-herb {
  background: linear-gradient(135deg, var(--ft-gold), #876520);
}

@keyframes ftToastInCenter {
  from { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes ftToastOutCenter {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}

/* =============================================================
 * 浇水 / 施肥 / 升级动效
 *
 *  - 关键设计：所有作用在 .ft-tree-layer 的 keyframes 必须保留
 *    translateX/Y/scale 的 CSS 变量调用，否则一启动校准就失效
 *  - 叶层动画极克制：只 1~2 px 偏移 + 0.5° 以内旋转
 *  - prefers-reduced-motion 在文件末尾全部降级
 * ============================================================= */

@keyframes ftSceneBreath {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.008) translateY(-2px); }
}
@keyframes ftBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* 后叶层 / 整图：几乎不动 */
@keyframes ftLayerSway {
  0%, 100% {
    transform:
      translateX(var(--ft-layer-x, 0))
      translateY(var(--ft-layer-y, 0))
      scale(var(--ft-layer-scale, 1))
      rotate(0deg);
  }
  50% {
    transform:
      translateX(var(--ft-layer-x, 0))
      translateY(calc(var(--ft-layer-y, 0px) - 1px))
      scale(var(--ft-layer-scale, 1))
      rotate(0.25deg);
  }
}
/* 前叶层：略大一点的摇摆，但仍很克制 */
@keyframes ftLayerSwayFront {
  0%, 100% {
    transform:
      translateX(var(--ft-layer-x, 0))
      translateY(var(--ft-layer-y, 0))
      scale(var(--ft-layer-scale, 1))
      rotate(-0.3deg);
  }
  50% {
    transform:
      translateX(var(--ft-layer-x, 0))
      translateY(calc(var(--ft-layer-y, 0px) - 2px))
      scale(var(--ft-layer-scale, 1))
      rotate(0.55deg);
  }
}
@keyframes ftLayerPulse {
  0%, 100% {
    transform:
      translateX(var(--ft-layer-x, 0))
      translateY(var(--ft-layer-y, 0))
      scale(var(--ft-layer-scale, 1));
    opacity: 0.96;
  }
  50% {
    transform:
      translateX(var(--ft-layer-x, 0))
      translateY(var(--ft-layer-y, 0))
      scale(calc(var(--ft-layer-scale, 1) * 1.02));
    opacity: 1;
  }
}
@keyframes ftLayerBob {
  0%, 100% {
    transform:
      translateX(var(--ft-layer-x, 0))
      translateY(var(--ft-layer-y, 0))
      scale(var(--ft-layer-scale, 1));
  }
  50% {
    transform:
      translateX(var(--ft-layer-x, 0))
      translateY(calc(var(--ft-layer-y, 0px) - 3px))
      scale(var(--ft-layer-scale, 1));
  }
}

/* 升级：scale pop + 光圈 + 亮度
 *   光圈用 drop-shadow（更柔，比 box-shadow 贴树形更紧） */
@keyframes ftTreeUpgrade {
  0%   { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(199,221,138,0)); }
  30%  { transform: scale(1.06); filter: brightness(1.18) drop-shadow(0 0 24px rgba(199,221,138,0.65)); }
  60%  { transform: scale(0.99); filter: brightness(1.06) drop-shadow(0 0 12px rgba(199,221,138,0.4)); }
  100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(199,221,138,0)); }
}

/* 浇水：树轻轻往下弹 0.3s */
@keyframes ftTreeBounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(3px) scale(0.995); }
  60%  { transform: translateY(-2px) scale(1.005); }
  100% { transform: translateY(0); }
}

/* 施肥：树冠短暂变亮 */
@keyframes ftTreeGlow {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.12) saturate(1.15); }
}

/* 水滴：从树冠顶部 10% 轻轻落到树根 78%
 *   关键：用 top 属性做下落（百分比是相对树容器），不要用 transform: translateY(%)
 *   因为 translateY 的百分比是相对自身高度，水滴 16px 的 64% 才约 10px，几乎没动
 */
@keyframes ftWaterDrop {
  0%   { top: 10%; transform: scale(0.55); opacity: 0; }
  12%  { opacity: 1; }
  82%  { top: 74%; transform: scale(0.9);  opacity: 0.95; }
  100% { top: 78%; transform: scale(0.45); opacity: 0; }
}

/* 水花：根部一圈淡蓝色涟漪（必须保留 translateX(-50%) 以维持水平居中） */
@keyframes ftWaterSplash {
  0%   { transform: translateX(-50%) scale(0.35); opacity: 0.9; }
  100% { transform: translateX(-50%) scale(1.8);  opacity: 0; }
}

/* 肥料颗粒：从树根上方 46% 自由落到土壤 77%
 *   同样用 top 直接动画，避免 translateY(%) 误区
 *   带 rotate 让颗粒看起来在翻滚
 */
@keyframes ftGrainFall {
  0%   { top: 46%; opacity: 0; transform: scale(0.65) rotate(0deg); }
  15%  { opacity: 1; }
  88%  { top: 75%; opacity: 0.95; transform: scale(0.9) rotate(16deg); }
  100% { top: 77%; opacity: 0;    transform: scale(0.75) rotate(22deg); }
}

/* 营养光点：从树根附近向上飘散（用 transform translateY，因为想让所有 spark
 *   起点对齐 top:76%，结尾各自飞到不同的 dx 偏移；用 px 长度更可控）
 */
@keyframes ftNutrientRise {
  0%   { transform: translate(0, 0) scale(0.45); opacity: 0; }
  15%  { opacity: 1; }
  100% {
    transform: translate(var(--ft-spark-dx, 0), -120px) scale(0.9);
    opacity: 0;
  }
}

/* 升级光圈：场景底部往上扩散的一个 ring */
@keyframes ftUpgradeRing {
  0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(-50%, 0) scale(2.4); opacity: 0; }
}

@keyframes ftFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ftModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ftToastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ftToastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-20px); }
}

/* =============================================================
 * 效果粒子的 DOM 默认样式
 *   JS 动态生成 .ft-water-drop / .ft-water-splash / .ft-fertilizer-grain
 *   / .ft-nutrient-spark / .ft-upgrade-ring 元素，统一插入 .ft-effect-layer
 * ============================================================= */
/* 水滴：起点 top:10% 由 keyframes 控制，元素初始 top 不能再写死另一个值 */
.ft-water-drop {
  position: absolute;
  left: var(--ft-drop-x, 50%);
  top: 10%;
  width: 12px;
  height: 16px;
  margin-left: -6px;
  background: radial-gradient(circle at 30% 30%, #BFE4F7, #4A8FC4 80%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 2px 6px rgba(74,143,196,0.35);
  animation: ftWaterDrop 1.25s cubic-bezier(.35,0,.55,1) forwards;
  pointer-events: none;
}
.ft-water-splash {
  position: absolute;
  left: 50%;
  top: 76%;
  width: 64px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(91, 167, 224, 0.68);
  background: rgba(91, 167, 224, 0.18);
  transform: translateX(-50%);
  animation: ftWaterSplash 0.9s ease-out forwards;
  pointer-events: none;
}
.ft-fertilizer-grain {
  position: absolute;
  left: var(--ft-grain-x, 50%);
  top: 46%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 2px;
  background: linear-gradient(135deg, #C99634 0%, #8c5e1c 100%);
  box-shadow: 0 1px 2px rgba(76,46,8,0.35);
  animation: ftGrainFall 0.85s cubic-bezier(.35,0,.55,1) forwards;
  pointer-events: none;
}
.ft-nutrient-spark {
  position: absolute;
  left: var(--ft-spark-x, 50%);
  top: 76%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFE6A6, #E2A93C);
  box-shadow: 0 0 10px rgba(226,169,60,0.65);
  animation: ftNutrientRise 1.5s ease-out forwards;
  pointer-events: none;
}
.ft-upgrade-ring {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 120px;
  height: 20px;
  border-radius: 50%;
  margin-left: -60px;
  border: 3px solid rgba(199, 221, 138, 0.8);
  background: rgba(199, 221, 138, 0.18);
  animation: ftUpgradeRing 1.4s ease-out;
}

/* =============================================================
 * 响应式断点
 * ============================================================= */
@media (max-width: 480px) {
  .ft-title { font-size: 22px; }
  .ft-stage { padding: 18px 14px 22px; }
  .ft-stage-head-title { font-size: 16px; }
  .ft-tree-scene { max-width: 320px; }
  .ft-action-ico { font-size: 22px; }
  .ft-action-label { font-size: 14.5px; }
  .ft-manage-text { display: none; }
  .ft-modal-rel-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .ft-harvest-grid { grid-template-columns: 1fr 1fr; }
  .ft-tree-scene { max-width: 420px; }
}

@media (min-width: 1024px) {
  .ft-tree-scene { max-width: 480px; }
  .ft-stage { padding: 26px 22px 24px; }
}

/* =============================================================
 * prefers-reduced-motion：所有树相关动效降级
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .ft-tree-scene,
  .ft-tree-layer,
  .ft-empty-illu {
    animation: none !important;
  }
  .ft-tree-scene.is-upgrade,
  .ft-tree-scene.is-watering,
  .ft-tree-scene.is-fertilizing {
    animation: ftFadeIn 0.4s ease !important;
  }
  .ft-water-drop,
  .ft-water-splash,
  .ft-fertilizer-grain,
  .ft-nutrient-spark,
  .ft-upgrade-ring,
  .ft-canopy-glow,
  .ft-falling-leaf {
    display: none !important;
  }
  .ft-toast,
  .ft-modal-card,
  .ft-modal-backdrop {
    animation: ftFadeIn 0.2s ease !important;
  }
}

/* =============================================================
 * 长辈模式（html.senior-mode）：字号普涨，按钮加大
 * ============================================================= */
html.senior-mode .ft-title    { font-size: 28px; }
html.senior-mode .ft-subtitle { font-size: 16px; }
html.senior-mode .ft-stage-head-title { font-size: 19px; }
html.senior-mode .ft-stage-name { font-size: 22px; }
html.senior-mode .ft-stage-tip  { font-size: 15px; }
html.senior-mode .ft-action-label { font-size: 17px; }
html.senior-mode .ft-action-ico   { font-size: 30px; }
html.senior-mode .ft-task-title { font-size: 16.5px; }
html.senior-mode .ft-task-desc  { font-size: 13.5px; }
html.senior-mode .ft-task-btn   { font-size: 15px; padding: 11px 16px; }
html.senior-mode .ft-friend-chip { font-size: 16px; padding: 10px 16px; }

/* =============================================================
 * v3 新增组件 —— 共同守护 / 草药百科 / 任务回看 / 邀请码
 * ============================================================= */

/* danger 按钮（"解除共同守护" / "退出守护"用） */
.ft-btn-danger {
  background: #fff;
  color: #C44A4A;
  border: 1.5px solid rgba(196,74,74,0.3);
}
.ft-btn-danger:hover {
  background: rgba(196,74,74,0.08);
  border-color: #C44A4A;
}

/* 大树卡顶部双层标题：左侧标题 + 共同守护副标题 */
.ft-stage-head-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ft-stage-head-sub {
  font-size: 12.5px;
  color: var(--ft-green-deep);
  background: var(--ft-green-soft);
  padding: 2px 9px;
  border-radius: 999px;
  align-self: flex-start;
  font-weight: 600;
}

/* 空状态：横排两个按钮 */
.ft-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin: 0 auto 18px;
  max-width: 280px;
}
.ft-empty-actions .ft-btn { width: 100%; justify-content: center; }
@media (min-width: 480px) {
  .ft-empty-actions { flex-direction: row; max-width: 420px; }
  .ft-empty-actions .ft-btn { flex: 1; }
}

/* section-head：标题 + 右侧文字链接（"过往 7 天 →"） */
.ft-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
  gap: 12px;
}
.ft-section-head .ft-section-title { margin: 0; }
.ft-section-link {
  border: 0;
  background: transparent;
  color: var(--ft-green-deep);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.15s;
}
.ft-section-link:hover { background: var(--ft-green-soft); }

/* 管理弹窗每行的双行结构（名字 + role / partner badges） */
.ft-mng-name-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ft-mng-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.ft-mng-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ft-green-soft);
  color: var(--ft-green-deep);
  font-weight: 600;
}
.ft-mng-badge.is-mute  { background: #F0EDE2; color: var(--ft-text-3); }
.ft-mng-badge.is-info  { background: #E1F0FA; color: #2A6FAE; }

/* 草药 / 茶包按钮的可点击视觉（覆盖原 .ft-herb / .ft-teabag） */
.ft-herb { cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: all 0.15s; }
.ft-herb:hover { border-color: var(--ft-green); transform: translateY(-1px); }
.ft-teabag { cursor: pointer; border: 1px solid rgba(201,162,77,0.3); font-family: inherit; transition: all 0.15s; }
.ft-teabag:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201,162,77,0.2); }

/* 详情弹窗（草药 / 茶包） */
.ft-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--ft-border);
}
.ft-detail-emoji {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--ft-green-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}
.ft-detail-meta { font-size: 12.5px; color: var(--ft-text-2); margin-top: 4px; }
.ft-herb-stock {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ft-green-soft);
  color: var(--ft-green-deep);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.ft-herb-stock.is-zero { background: #F0EDE2; color: var(--ft-text-3); }
.ft-detail-block { margin-bottom: 14px; }
.ft-detail-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ft-green-deep);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.ft-detail-text {
  font-size: 14px;
  color: var(--ft-text);
  line-height: 1.7;
}
.ft-detail-tip {
  background: #FFF6E3;
  border: 1px solid rgba(201,162,77,0.3);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #876520;
  line-height: 1.6;
  margin: 6px 0 14px;
}
.ft-recipe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ft-recipe-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--ft-green-soft);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ft-green-deep);
  font-weight: 600;
}

/* 过往照料记录 */
.ft-recent-list {
  max-height: 60vh;
  overflow-y: auto;
  margin: 4px -4px 16px;
  padding: 0 4px;
}
.ft-recent-day { margin-bottom: 16px; }
.ft-recent-date {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ft-green-deep);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.ft-recent-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ft-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--ft-bg-soft);
  border-radius: 12px;
}
.ft-recent-ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ft-recent-ico.is-water     { background: var(--ft-water-soft); }
.ft-recent-ico.is-fertilize { background: var(--ft-gold-soft); }
.ft-recent-title {
  flex: 1;
  font-size: 13.5px;
  color: var(--ft-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-recent-thumb {
  width: 44px; height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ft-border);
  flex-shrink: 0;
  background: #fff;
}
.ft-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-recent-noshot {
  font-size: 11px;
  color: var(--ft-text-3);
  width: 44px;
  text-align: center;
  flex-shrink: 0;
}

/* 邀请码弹窗 */
.ft-invite-code-box {
  background: linear-gradient(135deg, var(--ft-green-soft), #DFEDE1);
  border: 1.5px dashed var(--ft-green);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  margin-bottom: 14px;
}
.ft-invite-code-label {
  font-size: 12px;
  color: var(--ft-text-2);
  margin-bottom: 4px;
  letter-spacing: 1.5px;
}
.ft-invite-code-value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--ft-green-deep);
  font-family: "SF Mono", "Roboto Mono", "Cascadia Code", "Microsoft YaHei", monospace;
  margin-bottom: 6px;
  text-shadow: 0 2px 4px rgba(63,122,74,0.1);
}
.ft-invite-code-expire {
  font-size: 12px;
  color: var(--ft-text-3);
}
.ft-invite-input {
  letter-spacing: 4px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  font-family: "SF Mono", "Roboto Mono", "Cascadia Code", "Microsoft YaHei", monospace;
}
.ft-invite-empty {
  text-align: center;
  padding: 18px 12px;
  background: var(--ft-bg-soft);
  border-radius: 14px;
  margin-bottom: 14px;
}
.ft-invite-empty-text {
  font-size: 14px;
  color: var(--ft-text-2);
  line-height: 1.6;
}

/* 共同守护人卡片（已绑定 partner 时展示） */
.ft-partner-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--ft-green-soft), #E8F4EA);
  border: 1px solid rgba(107,170,115,0.3);
  border-radius: 14px;
  margin-bottom: 14px;
}
.ft-partner-emoji {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.ft-partner-info { flex: 1; min-width: 0; }
.ft-partner-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ft-green-deep);
}
.ft-partner-meta {
  font-size: 12.5px;
  color: var(--ft-text-2);
  margin-top: 2px;
}

/* 模态弹窗多按钮换行（接受邀请等弹窗有 3 个按钮时不挤） */
@media (max-width: 380px) {
  .ft-modal-actions { flex-wrap: wrap; }
  .ft-modal-actions .ft-btn { flex: 1; min-width: 100px; }
}

/* =============================================================
 * 邀请弹窗：二选一卡片 + 好友列表
 * ============================================================= */
.ft-invite-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.ft-invite-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  background: var(--ft-bg-soft);
  border: 1.5px solid var(--ft-border);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: all 0.18s;
}
.ft-invite-option:hover {
  border-color: var(--ft-green);
  background: var(--ft-green-soft);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(63,122,74,0.1);
}
.ft-invite-option-emoji {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.ft-invite-option-body { flex: 1; min-width: 0; }
.ft-invite-option-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ft-text);
  margin-bottom: 2px;
}
.ft-invite-option-desc {
  font-size: 12.5px;
  color: var(--ft-text-2);
  line-height: 1.5;
}
.ft-invite-option-arrow {
  font-size: 24px;
  color: var(--ft-text-3);
  flex-shrink: 0;
  line-height: 1;
}

/* 好友列表 */
.ft-invite-friends-list {
  max-height: 50vh;
  overflow-y: auto;
  margin: 0 -4px 16px;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ft-invite-friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--ft-bg-soft);
  border: 1.5px solid var(--ft-border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s;
}
.ft-invite-friend-row:hover {
  border-color: var(--ft-green);
  background: var(--ft-green-soft);
}
.ft-invite-friend-row:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ft-invite-friend-ava {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ft-green), var(--ft-green-deep));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.ft-invite-friend-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ft-invite-friend-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ft-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-invite-friend-sig {
  font-size: 11.5px;
  color: var(--ft-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-invite-friend-cta {
  font-size: 12.5px;
  color: var(--ft-green-deep);
  font-weight: 600;
  flex-shrink: 0;
}
.ft-invite-friends-empty {
  text-align: center;
  padding: 24px 12px;
  background: var(--ft-bg-soft);
  border-radius: 14px;
  color: var(--ft-text-2);
  font-size: 14px;
}

/* 长辈模式下返回按钮也放大一档 */
html.senior-mode .ft-back { font-size: 16px; padding: 10px 16px 10px 12px; }
html.senior-mode .ft-back [data-icon] { transform: scale(1.15); }

/* ============== hero 收件箱按钮 ============== */
.ft-hero-inbox {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 12px;
  background: linear-gradient(135deg, #fff7e0 0%, #ffe7c2 100%);
  border: 1.5px solid #f0c97a;
  border-radius: 999px;
  color: #8a5a14;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(240,201,122,0.30);
  transition: all 0.18s;
}
.ft-hero-inbox:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(240,201,122,0.45); }
.ft-hero-inbox[hidden] { display: none !important; }
.ft-hero-inbox-icon { font-size: 16px; line-height: 1; }
.ft-hero-inbox-label { font-size: 13.5px; }
.ft-hero-inbox-dot {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e23d3d;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff7e0;
}
html.senior-mode .ft-hero-inbox { font-size: 15px; padding: 10px 16px 10px 14px; }
html.senior-mode .ft-hero-inbox-label { font-size: 15px; }

/* 「暂不邀请」option soft 样式 */
.ft-invite-option-soft {
  background: linear-gradient(180deg, #fafaf6 0%, #f3f0e8 100%);
  border-color: #e6e1d2;
}
.ft-invite-option-soft:hover {
  background: linear-gradient(180deg, #f5f5ee 0%, #ecead8 100%);
  border-color: #d4ceb8;
}

/* 邀请列表 cta 静音态（已发送 / 已是守护人 / 虚拟） */
.ft-invite-friend-cta.is-mute {
  color: var(--ft-text-3);
  background: var(--ft-bg-soft);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
}
.ft-invite-friend-row[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}
.ft-invite-friend-row[disabled]:hover { transform: none; box-shadow: none; }
.ft-invite-friend-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: #8c6fb0;
  background: #f1ebf8;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ============== 调试 / QA 浮动面板（仅 ?debugTree=1） ============== */
.ft-debug-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 240px;
  background: rgba(28, 38, 30, 0.94);
  color: #fff;
  border-radius: 14px;
  padding: 10px 12px 12px;
  box-shadow: 0 16px 38px rgba(0,0,0,0.32);
  z-index: 250;
  font-size: 12.5px;
}
.ft-debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 8px;
}
.ft-debug-close {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.ft-debug-close:hover { background: rgba(255,255,255,0.2); }
.ft-debug-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.ft-debug-grid button {
  padding: 7px 6px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ft-debug-grid button:hover { background: rgba(255,255,255,0.18); }
.ft-debug-grid button.is-danger {
  grid-column: span 2;
  background: rgba(196, 74, 74, 0.25);
  border-color: rgba(196, 74, 74, 0.5);
}
.ft-debug-grid button.is-danger:hover { background: rgba(196, 74, 74, 0.4); }

/* debug 面板新增结构：head 右侧动作、折叠、分段、reset 单独一行 */
.ft-debug-head-actions { display: flex; gap: 4px; }
.ft-debug-toggle {
  width: 22px; height: 22px; border: none; border-radius: 6px;
  background: rgba(255,255,255,0.12); color: #fff; cursor: pointer;
  font-size: 16px; line-height: 1; font-family: inherit;
}
.ft-debug-toggle:hover { background: rgba(255,255,255,0.2); }
.ft-debug-body { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.ft-debug-panel.is-collapsed .ft-debug-body { display: none; }
.ft-debug-section-label {
  font-size: 11px; opacity: 0.72; margin-bottom: 4px;
}
.ft-debug-reset {
  width: 100%;
  padding: 7px 6px;
  background: rgba(196, 74, 74, 0.25);
  border: 1px solid rgba(196, 74, 74, 0.5);
  color: #fff; border-radius: 8px; font-weight: 600; font-size: 12px; cursor: pointer;
  font-family: inherit;
}
.ft-debug-reset:hover { background: rgba(196, 74, 74, 0.4); }

/* ============== 收到的关怀（通知）横幅 + 弹窗 ============== */
.ft-notify-banner {
  margin: 8px 16px 4px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff3d2 0%, #ffe2b4 100%);
  border: 1px solid #f0d2a3;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(193, 132, 43, 0.12);
}
.ft-notify-head { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ft-notify-ico {
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}
.ft-notify-ico svg { display: block; }
.ft-notify-info { min-width: 0; flex: 1; }
.ft-notify-title {
  font-size: 14px; font-weight: 700; color: var(--ft-text-1, #2e3a2f);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ft-notify-sub {
  font-size: 12.5px; color: var(--ft-text-2, #5d6b5e);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ft-notify-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ft-btn-small { padding: 6px 12px; font-size: 12.5px; }

.ft-notify-list { display: flex; flex-direction: column; gap: 8px; max-height: 58vh; overflow-y: auto; padding: 4px 2px; }
.ft-notify-item {
  display: flex; gap: 10px; padding: 10px 12px;
  background: #fff; border: 1px solid #ECEFE4; border-radius: 12px;
}
.ft-notify-item.is-unread {
  background: #FFFAEB;
  border-color: #F4DDA7;
}
.ft-notify-item-emoji {
  font-size: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ft-notify-item-emoji svg { display: block; }
.ft-notify-item-body { flex: 1; min-width: 0; }
.ft-notify-item-title { font-weight: 700; font-size: 14px; color: var(--ft-text-1, #2e3a2f); }
.ft-notify-item-content { font-size: 13px; color: var(--ft-text-2, #5d6b5e); margin-top: 4px; }
.ft-notify-item-time { font-size: 11.5px; color: var(--ft-text-3, #8a958b); margin-top: 6px; }

/* ============== 接受邀请：partner 视角称呼选择 ============== */
.ft-accept-nick-block {
  margin-top: 10px;
  padding: 12px;
  background: #FAF7F0;
  border-radius: 12px;
  border: 1px solid #ECEAE0;
}
.ft-accept-nick-label {
  font-size: 13px; font-weight: 700; color: var(--ft-text-1, #2e3a2f); margin-bottom: 8px;
}
.ft-accept-nick-hint { font-weight: 400; color: var(--ft-text-3, #8a958b); margin-left: 4px; }
.ft-accept-nick-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.ft-accept-nick-chip {
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #DCDFD2;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ft-text-2, #5d6b5e);
  cursor: pointer;
  font-family: inherit;
}
.ft-accept-nick-chip:hover, .ft-accept-nick-chip.is-active {
  background: #E5F3D8;
  border-color: #A6CE7D;
  color: var(--ft-text-1, #2e3a2f);
}

/* ============== 对方近况面板 ============== */
.ft-companion {
  background: #fff;
  border: 1px solid #ECEFE4;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ft-companion-empty {
  text-align: center; padding: 20px 12px;
  color: var(--ft-text-2, #5d6b5e); font-size: 13.5px;
}
.ft-companion-empty-emoji { font-size: 32px; margin-bottom: 8px; }
.ft-comp-head { display: flex; align-items: center; gap: 12px; }
.ft-comp-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #C9E4A6, #82B364);
  color: #fff; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.ft-comp-head-name { font-size: 15px; font-weight: 700; color: var(--ft-text-1, #2e3a2f); }
.ft-comp-head-sub { font-size: 12px; color: var(--ft-text-3, #8a958b); margin-top: 2px; }
.ft-comp-today-title {
  font-size: 13.5px; color: var(--ft-text-2, #5d6b5e); margin-bottom: 8px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
}
.ft-comp-today-title b { color: var(--ft-text-1, #2e3a2f); font-size: 15px; margin: 0 2px; }
.ft-comp-today-hint {
  font-size: 11.5px; color: var(--ft-text-3, #8a958b); font-weight: 500;
  background: #F6F8F0; padding: 2px 8px; border-radius: 999px;
}
.ft-comp-task-list { display: flex; flex-direction: column; gap: 10px; }

/* 2026-05-18 v3 返工 Phase 4a：对方任务卡片化（截图当主角，软监督） */
.ft-comp-task-card {
  display: flex; align-items: center; gap: 12px;
  background: #F6F8F0; border: 1px solid #E5EDD8; border-radius: 14px;
  padding: 10px 12px; transition: box-shadow .15s ease, transform .15s ease;
}
.ft-comp-task-card.is-water { border-color: #CFE3F2; background: #F2F8FC; }
.ft-comp-task-card.is-fert  { border-color: #F0E2C6; background: #FBF6EA; }
.ft-comp-task-card-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
}
.ft-comp-task-card-ico {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.85);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--ft-text-1, #2e3a2f);
}
.ft-comp-task-card.is-water .ft-comp-task-card-ico { color: #2F7CB6; }
.ft-comp-task-card.is-fert  .ft-comp-task-card-ico { color: #B68130; }
.ft-comp-task-card-text { min-width: 0; flex: 1; }
.ft-comp-task-card-title {
  font-size: 14px; font-weight: 600; color: var(--ft-text-1, #2e3a2f);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ft-comp-task-card-time {
  font-size: 12px; color: var(--ft-text-3, #8a958b); margin-top: 2px;
}

/* 缩略图：放大到 96×72，截图当主视觉 */
.ft-comp-task-thumb {
  position: relative; flex-shrink: 0;
  width: 96px; height: 72px; border-radius: 10px;
  overflow: hidden; background: #fff;
  box-shadow: 0 2px 6px rgba(46, 58, 47, .08);
  text-decoration: none;
}
.ft-comp-task-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-comp-task-thumb-zoom {
  position: absolute; right: 4px; bottom: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ft-comp-task-thumb:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(46, 58, 47, .14); }

/* 占位（对方还没传截图）：让对方"我交了你看不见"的疑问消失 */
.ft-comp-task-thumb.is-empty {
  display: flex; flex-direction: column; gap: 2px;
  align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #FFF 0 6px, #F0F2EB 6px 12px);
  color: var(--ft-text-3, #8a958b);
  border: 1px dashed #C9D1BD;
  cursor: default;
}
.ft-comp-task-thumb-placeholder-ico { opacity: .7; }
.ft-comp-task-thumb-placeholder-txt { font-size: 11px; }
.ft-comp-empty-mini { font-size: 12.5px; color: var(--ft-text-3, #8a958b); }
.ft-comp-week {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  background: #FAF8EF; border-radius: 10px; padding: 10px 8px;
}
.ft-comp-week-cell { text-align: center; }
.ft-comp-week-v { font-size: 16px; font-weight: 700; color: #4F7F38; }
.ft-comp-week-l { font-size: 11.5px; color: var(--ft-text-3, #8a958b); margin-top: 2px; }
.ft-comp-tone {
  font-size: 13px; color: var(--ft-text-2, #5d6b5e);
  padding: 8px 12px; background: #F2F7E9; border-radius: 10px;
  border-left: 3px solid #A6CE7D;
}

/* ============== actor 小标签（事件/过往记录里的「我」/对方称呼） ============== */
.ft-event-actor, .ft-recent-actor {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  margin-right: 6px;
  font-weight: 600;
  vertical-align: middle;
}
.ft-event-actor.is-mine, .ft-recent-actor.is-mine {
  background: #E5F3D8; color: #4F7F38;
}
.ft-event-actor.is-partner, .ft-recent-actor.is-partner {
  background: #F6E2C5; color: #8c5e1c;
}

/* ============== 过往照料弹窗扩展：actor + 缩略图悬停 ============== */
.ft-recent-item { display: flex; align-items: center; gap: 8px; padding: 8px 4px; }
.ft-recent-thumb img { transition: transform 0.2s ease; }
.ft-recent-thumb:hover img { transform: scale(1.04); }

/* ============== 图片大图预览 overlay ============== */
.ft-img-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 320;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
.ft-img-overlay.is-open { opacity: 1; pointer-events: auto; }
.ft-img-overlay img {
  max-width: 92vw; max-height: 86vh;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.ft-img-overlay-close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 18px;
  border: none; background: rgba(255,255,255,0.18); color: #fff;
  font-size: 22px; cursor: pointer; font-family: inherit;
}
.ft-img-overlay-close:hover { background: rgba(255,255,255,0.3); }

/* ============== 树伪动效：树冠光点 + 飘落小叶 ============== */
.ft-canopy-glow {
  position: absolute;
  left: var(--ft-glow-x, 50%);
  top: var(--ft-glow-y, 30%);
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,210,0.95), rgba(232,196,86,0.4) 70%, transparent 100%);
  pointer-events: none;
  animation: ftCanopyGlow 3s ease-out forwards;
  filter: blur(0.5px);
}
@keyframes ftCanopyGlow {
  0%   { opacity: 0; transform: scale(0.6) translateY(0); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6) translateY(-14px); }
}
.ft-falling-leaf {
  position: absolute;
  left: var(--ft-leaf-x, 50%);
  top: 32%;
  width: 11px; height: 11px;
  margin-left: -5.5px;
  background: radial-gradient(ellipse at 30% 30%, #B7D689, #6FA449);
  border-radius: 50% 10% 50% 10% / 60% 20% 60% 20%;
  transform: rotate(var(--ft-leaf-rot, 0deg));
  pointer-events: none;
  animation: ftFallLeaf 5s cubic-bezier(.5,.1,.7,1) forwards;
  opacity: 0;
}
@keyframes ftFallLeaf {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--ft-leaf-rot, 0deg)); }
  10%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--ft-leaf-dx, 0), 130px) rotate(calc(var(--ft-leaf-rot, 0deg) + 360deg)); }
}

/* ============== 收到的邀请 弹窗 ============== */
.ft-incoming-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.ft-incoming-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(180deg, #fffaf0 0%, #fff5e0 100%);
  border: 1.5px solid #f0d99a;
  border-radius: 16px;
}
.ft-incoming-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ft-incoming-emoji {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #f0d99a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.ft-incoming-info { flex: 1; min-width: 0; }
.ft-incoming-title { font-size: 14px; font-weight: 700; color: var(--ft-text); margin-bottom: 2px; }
.ft-incoming-desc { font-size: 12.5px; color: var(--ft-text-2); line-height: 1.5; }
.ft-incoming-actions { display: flex; gap: 8px; }
.ft-incoming-actions button {
  flex: 1;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.18s;
}
.ft-incoming-accept {
  background: linear-gradient(135deg, var(--ft-green-deep) 0%, #3a8a5c 100%);
  color: #fff;
}
.ft-incoming-accept:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(63,122,74,0.25); }
.ft-incoming-reject {
  background: #fff;
  color: var(--ft-text-2);
  border-color: var(--ft-border);
}
.ft-incoming-reject:hover { background: var(--ft-bg-soft); color: #c44; border-color: #f3c5c5; }
.ft-incoming-empty {
  text-align: center;
  padding: 28px 12px;
  background: var(--ft-bg-soft);
  border-radius: 14px;
  color: var(--ft-text-2);
  font-size: 14px;
}