/* ============================================================
   NDBI 家庭干预平台 · 家长端小程序 V2 皮肤（parent-v2.css）
   令牌来源：../shared/tokens-v2.css（V2 明亮工具风 · DESIGN-V2.md）
   端纪律（§5.2 家长端适配）：
   - 390px 移动骨架：底部 5 Tab（56px）+ 安全区 34px；正文 ≥16px 适老化
   - 页底 --bg-page #F7F8FA；卡片白底 + 1px --border + 圆角 16px
     （移动温度保留，不降到工作台的 10px）
   - 关键卡（今日任务）4px --primary-500 顶部饰条
   - 主 CTA（去打卡）珊瑚 --cta-500 全圆角 Pill
   - 四色任务语义零漂移：色块 + 图标 + 文字；数字 tabular-nums
   - 触控区 ≥44px；无外部资源，双击可离线运行
   ============================================================ */

/* ---------- 预览外壳：390px 移动容器 · 居中于中性底色 ---------- */
.desk {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  padding: var(--space-6) 0;
}
.phone {
  width: 390px;
  height: min(844px, calc(100vh - 48px));
  background: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ---------- 家长端品牌换肤（.phone 作用域 · 参考资料库界面稿） ----------
   家长端主色统一为青绿：在 .phone 容器内把 --primary-* 重映射到 --pbrand-*，
   图表主色 --chart-1 同步青绿。机构 / 督导 / 管理端不受影响；
   四色任务语义（锁色）与珊瑚 CTA / 小安 IP 点缀保持不动。 */
.phone {
  --primary-50: var(--pbrand-50);   --primary-100: var(--pbrand-100);
  --primary-200: var(--pbrand-200); --primary-300: var(--pbrand-300);
  --primary-400: var(--pbrand-400); --primary-500: var(--pbrand-500);
  --primary-600: var(--pbrand-600); --primary-700: var(--pbrand-700);
  --primary-800: var(--pbrand-800); --primary-900: var(--pbrand-900);
  --chart-1: var(--pbrand-500);
}

/* ---------- 统一区块题标记：青绿小方块（参考稿「■ 四类记录」式） ----------
   家长端所有卡片题 / 区块题（.card-title / .section-title）自动获得，
   页面无需逐个改 HTML；不需要标记的标题加 .title-plain 覆写。 */
.card-title::before, .section-title::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; background: var(--pbrand-500);
  margin-right: 8px; vertical-align: 1px;
}
.title-plain::before { display: none; }

/* ---------- 状态栏（小程序骨架） ---------- */
.status-bar {
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  color: var(--text-primary);
}
.status-time { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.status-right { display: flex; align-items: center; gap: 6px; }
.status-right svg { display: block; }
.sig { width: 16px; height: 12px; }
.wifi { width: 15px; height: 12px; }
.batt { width: 22px; height: 12px; }
.capsule { position: relative; width: 58px; height: 18px; border-radius: 999px; background: var(--text-heading); margin-left: 10px; }
.capsule::before {
  content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary-900); box-shadow: inset 0 0 0 1.5px var(--primary-700);
}
.capsule::after {
  content: "···"; position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  color: var(--bg-page); font-size: 9px; letter-spacing: .5px; line-height: 1;
}

/* ---------- 顶部问候区 ---------- */
.app-header {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4) var(--space-3);
}
.greet-title { font-size: 22px; font-weight: 700; color: var(--text-heading); line-height: 1.3; }
.greet-date { margin-top: 2px; font-size: 14px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.header-actions { display: flex; gap: var(--space-1); padding-top: var(--space-1); }
.icon-btn {
  position: relative; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-chip);
  color: var(--text-secondary-strong);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--bg-surface); color: var(--primary-700); }
.icon-btn svg { width: 24px; height: 24px; }
/* 未读红点：督导消息带数字，铃铛为纯点 */
.dot-red {
  position: absolute; top: 6px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--warning-red); color: #FFFFFF;
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
  border: 1.5px solid var(--bg-page); font-variant-numeric: tabular-nums;
}
.dot-red.bare { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 9px; right: 9px; border-width: 1.5px; }

/* ---------- 会员未生效提示条（未激活 / 已到期）----------
   家长端与督导端共用「会员」口径（server/lib/membership.js），色只引令牌：
   未激活用琥珀（与「无机会」同一支），已到期用红。 */
.member-lock {
  margin: var(--space-2) var(--space-4) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--task-noop);
  border-radius: 14px;
  background: var(--task-noop-bg);
}
.member-lock.is-expired { border-color: var(--warning-red); background: var(--warning-red-bg); }
.member-lock__top { display: flex; align-items: center; gap: 6px; }
.member-lock__top b { font-size: 14px; font-weight: 700; color: var(--task-noop-text); }
.member-lock.is-expired .member-lock__top b { color: var(--warning-red-text); }
.member-lock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--task-noop); flex: none; }
.member-lock.is-expired .member-lock__dot { background: var(--warning-red); }
.member-lock__text { margin-top: var(--space-1); font-size: 13px; line-height: 1.6; color: var(--text-secondary-strong); }
.member-lock__hint { margin-top: 2px; font-size: 12px; color: var(--text-tertiary); }

/* ---------- 内容滚动区 ---------- */
.app-scroll {
  flex: 1; overflow-y: auto;
  padding: var(--space-2) 0 var(--space-5);
  scrollbar-width: none;
}
.app-scroll::-webkit-scrollbar { display: none; }

/* ---------- 卡片基座（V2 家长端：16px 圆角 · 白底 · 1px 冷灰边） ---------- */
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px; }

/* ---------- 连续打卡 + 本周进度环 ---------- */
.streak-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin: 0 var(--space-4) var(--space-3); padding: var(--space-4);
}
.streak-label { font-size: 13px; color: var(--text-tertiary); }
.streak-num-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.streak-star { width: 30px; height: 30px; flex: none; }
.streak-num { font-size: 28px; font-weight: 700; line-height: 1; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.streak-unit { font-size: 14px; color: var(--text-secondary); }
.streak-micro { margin-top: var(--space-2); font-size: 13px; color: var(--text-tertiary); }
.streak-right { position: relative; width: 84px; height: 84px; flex: none; }
.ring { width: 84px; height: 84px; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num { font-size: 17px; font-weight: 700; color: var(--text-heading); line-height: 1.2; font-variant-numeric: tabular-nums; }
.ring-label { font-size: 11px; color: var(--text-tertiary); }

/* ---------- 今日干预任务卡（核心 · 4px 蓝饰条） ---------- */
.task-card { margin: 0 var(--space-4) var(--space-3); padding: var(--space-4); border-top: 4px solid var(--primary-500); }
.task-card-head { display: flex; align-items: center; justify-content: space-between; }
.task-card-title-row { display: flex; align-items: center; gap: var(--space-2); }
.child-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--radius-chip); background: var(--primary-100); color: var(--primary-700);
  font-size: 12px; font-weight: 600;
}
.task-card-title { font-size: 17px; font-weight: 600; color: var(--text-heading); }
.card-corner-ico { width: 20px; height: 20px; color: var(--primary-300); flex: none; }
.task-card-date { margin-top: var(--space-1); font-size: 13px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* 16 宫格目标行为网格（4×4 · 四色态 + 微图标） */
.task-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.tcell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 66px; padding: var(--space-2) 2px; border-radius: 12px;
}
.tcell-ico { width: 18px; height: 18px; flex: none; }
.tcell-label { font-size: 12px; line-height: 1.3; text-align: center; }
/* 四色锁色：主值 / 文字值 / 浅底全部引用令牌，禁止改色 */
.tcell.self      { background: var(--task-self-bg);      color: var(--task-self-text); }
.tcell.prompted  { background: var(--task-prompted-bg);  color: var(--task-prompted-text); }
.tcell.none      { background: var(--task-none-bg);      color: var(--task-none-text); }
.tcell.noop      { background: var(--task-noop-bg);      color: var(--task-noop-text); }

/* 四色图例（色块 + 图标 + 文字） */
.legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-ico { width: 13px; height: 13px; flex: none; }
.lg-self     .legend-dot { background: var(--task-self); }
.lg-self     .legend-ico { color: var(--task-self); }
.lg-prompted .legend-dot { background: var(--task-prompted); }
.lg-prompted .legend-ico { color: var(--task-prompted); }
.lg-none     .legend-dot { background: var(--task-none); }
.lg-none     .legend-ico { color: var(--task-none); }
.lg-noop     .legend-dot { background: var(--task-noop); }
.lg-noop     .legend-ico { color: var(--task-noop); }

/* 主 CTA：去打卡（珊瑚 Pill · 全圆角 · ≥44px 触控） */
.btn-checkin {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; height: 48px; margin-top: var(--space-4);
  background: var(--cta-500); color: #FFFFFF;
  font-size: 16px; font-weight: 600; border-radius: 999px;
  transition: background .15s;
}
.btn-checkin svg { width: 20px; height: 20px; }
.btn-checkin:hover { background: var(--cta-600); }
.btn-checkin:active { background: var(--cta-700); }

/* ---------- 家长策略小贴士（浅蓝底） ---------- */
.tip-card {
  display: flex; gap: var(--space-3);
  margin: 0 var(--space-4) var(--space-3); padding: var(--space-4);
  background: var(--primary-50); border-radius: 16px;
}
.tip-ico { width: 24px; height: 24px; color: var(--primary-700); flex: none; margin-top: 2px; }
.tip-title { font-size: 15px; font-weight: 600; color: var(--primary-800); }
.tip-text { margin-top: 2px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }

/* ---------- 通知预览 ---------- */
.notify-card { margin: 0 var(--space-4) var(--space-3); padding: var(--space-4); }
.notify-head { display: flex; align-items: center; justify-content: space-between; }
.notify-title { font-size: 17px; font-weight: 600; color: var(--text-heading); }
.notify-all {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 0 2px; margin-right: -2px;
  font-size: 13px; font-weight: 500; color: var(--primary-700);
}
.notify-all svg { width: 16px; height: 16px; }
.notify-all:hover { color: var(--primary-800); }
.notify-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--border);
}
.notify-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notify-row-title { display: flex; align-items: center; gap: var(--space-2); }
.notify-name { font-size: 16px; font-weight: 600; color: var(--text-heading); }
.notify-text { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.notify-time { font-size: 12px; color: var(--text-tertiary); flex: none; padding-top: 3px; font-variant-numeric: tabular-nums; }

/* ---------- 小安老师 AI 助手入口（IP 保留：珊瑚系点缀） ---------- */
.ai-card {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 var(--space-4) var(--space-4); padding: var(--space-4);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px;
  transition: border-color .15s;
}
.ai-card:hover { border-color: var(--primary-300); }
.ai-badge {
  width: 48px; height: 48px; border-radius: 999px; flex: none;
  background: var(--primary-100);
  display: flex; align-items: center; justify-content: center;
}
.ai-badge svg { width: 40px; height: 40px; }
.ai-texts { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ai-title-row { display: flex; align-items: center; gap: 5px; }
.ai-title { font-size: 16px; font-weight: 600; color: var(--text-heading); }
.ai-spark { width: 14px; height: 14px; color: var(--primary-500); flex: none; }
.ai-sub { font-size: 14px; color: var(--text-secondary); }
.ai-arrow { width: 20px; height: 20px; color: var(--text-placeholder); flex: none; }

/* ---------- 底部 5 Tab（56px + 安全区 34px） ---------- */
.tabbar { flex: none; background: var(--bg-surface); border-top: 1px solid var(--border); }
.tabbar-row { display: flex; height: 56px; }
.tab-item {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-tertiary);
  transition: color .15s;
}
.tab-ico { width: 24px; height: 24px; }
.tab-label { font-size: 10px; font-weight: 500; line-height: 1.2; }
.tab-item:hover { color: var(--text-secondary-strong); }
.tab-item.active { color: var(--primary-700); font-weight: 600; }
/* 填充态图标：仅激活 tab 显示 */
.tab-ico .if { display: none; }
.tab-item.active .tab-ico .if { display: block; }
.tab-item.active .tab-ico .il { display: none; }
/* 小安老师 Tab：IP 珊瑚点缀（描边 → 填充珊瑚泡 + 白星） */
.tab-item.tab-xiaoan { color: var(--cta-700); }
.tab-item.tab-xiaoan .tab-ico .il { display: none; }
.tab-item.tab-xiaoan .tab-ico .if { display: block; }
.tab-item.tab-xiaoan .tab-ico .ix { display: block; }
.tab-item.tab-xiaoan.active { color: var(--cta-700); }
/* 安全区 + Home 指示条 */
.tabbar-safe { height: 34px; display: flex; align-items: center; justify-content: center; }
.tabbar-safe::after { content: ""; width: 120px; height: 5px; border-radius: 999px; background: var(--text-placeholder); }

/* ---------- 小屏兜底：容器全屏铺满 ---------- */
@media (max-width: 430px) {
  .desk { padding: 0; }
  .phone { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; border: none; box-shadow: none; }
}