/* ============================================================
   NDBI 家庭干预平台 · 家长端 V3 皮肤（parent-v3.css）
   ------------------------------------------------------------
   依据：《NDBI家长端小程序原型》（空间根目录重设计稿）重设计。
   设计语言：暖纸质感 + 葡萄紫品牌 + 四色表现记录 + 中央「安」印章 Tab。
   实现方式：在 .phone 作用域内把 tokens-v2 令牌重映射到 --pv3-* 家族
   （令牌定义在 tokens-v2.css，与 design-output 基线同步），
   页面既有标记零改动即获得新皮肤；再补原型签名组件。
   纪律：四色任务语义零漂移（自发=品牌紫 / 提示后=印章黄 / 无表现=玫瑰灰 /
        无机会=雾蓝，「无机会」不算没做到）；无外部资源；触控 ≥44px。
   ============================================================ */

/* ---------- 0. 预览舞台（.phone 外 · 原型 stage 暖紫底） ---------- */
.desk { background: var(--pv3-paper-2); }

/* ---------- 1. 令牌重映射（.phone 作用域 · 原型「葡萄紫」主题） ---------- */
.phone {
  /* 纸面与卡底 */
  --bg-page: var(--pv3-paper);
  --bg-surface: #FFFFFF;
  --bg-subtle: var(--pv3-card-2);
  --bg-hover: var(--pv3-paper-2);

  /* 线与分隔 */
  --border: var(--pv3-line);
  --border-strong: var(--pv3-line-strong);

  /* 墨色文字（暖紫墨） */
  --text-heading: var(--pv3-ink);
  --text-primary: var(--pv3-ink);
  --text-secondary: var(--pv3-ink-2);
  --text-secondary-strong: var(--pv3-ink-strong);
  --text-tertiary: var(--pv3-muted);
  --text-placeholder: var(--pv3-placeholder);

  /* 品牌紫阶（原型 brand #8B5FC6 / brand-btn #66389E / brand-deep #5E3193） */
  --primary-50: var(--pv3-brand-50);   --primary-100: var(--pv3-brand-100);
  --primary-200: var(--pv3-brand-200); --primary-300: var(--pv3-brand-300);
  --primary-400: var(--pv3-brand-400); --primary-500: var(--pv3-brand-500);
  --primary-600: var(--pv3-brand-600); --primary-700: var(--pv3-brand-700);
  --primary-800: var(--pv3-brand-800); --primary-900: var(--pv3-brand-900);
  --pbrand-50: var(--pv3-brand-50);    --pbrand-100: var(--pv3-brand-100);
  --pbrand-200: var(--pv3-brand-200);  --pbrand-300: var(--pv3-brand-300);
  --pbrand-400: var(--pv3-brand-400);  --pbrand-500: var(--pv3-brand-500);
  --pbrand-600: var(--pv3-brand-600);  --pbrand-700: var(--pv3-brand-700);
  --pbrand-800: var(--pv3-brand-800);  --pbrand-900: var(--pv3-brand-900);
  --chart-1: var(--pv3-brand);

  /* 主 CTA：原型 primary-btn 深紫（替代旧珊瑚，IP 点缀改由印章黄承担） */
  --cta-50: var(--pv3-brand-50);  --cta-100: var(--pv3-brand-100);
  --cta-200: var(--pv3-brand-200); --cta-300: var(--pv3-brand-300);
  --cta-400: var(--pv3-brand-400); --cta-500: var(--pv3-brand-btn);
  --cta-600: var(--pv3-brand-deep); --cta-700: var(--pv3-brand-900);

  /* 四色表现记录（原型 sp/pr/nr/no · 语义零漂移） */
  --task-self: var(--pv3-brand);      --task-self-text: var(--pv3-brand-deep);  --task-self-bg: var(--pv3-tint);
  --task-prompted: var(--pv3-seal);   --task-prompted-text: var(--pv3-seal-deep); --task-prompted-bg: var(--pv3-seal-tint);
  --task-none: var(--pv3-nr);         --task-none-text: var(--pv3-nr-deep);     --task-none-bg: var(--pv3-nr-tint);
  --task-noop: var(--pv3-no);         --task-noop-text: var(--pv3-no-text);     --task-noop-bg: var(--pv3-no-tint);

  /* 形状与投影（原型 24px 圆角家族 · 暖紫软投影） */
  --radius-card: 20px;
  --shadow-3: 0 12px 28px rgba(var(--pv3-shadow-rgb), .10);
  --pv3-shadow-s: 0 1px 2px rgba(var(--pv3-shadow-rgb), .04), 0 4px 14px rgba(var(--pv3-shadow-rgb), .05);
  --pv3-shadow-m: 0 2px 6px rgba(var(--pv3-shadow-rgb), .05), 0 12px 28px rgba(var(--pv3-shadow-rgb), .08);
}

/* ---------- 2. 手机壳（暖纸底 · 软投影） ---------- */
.phone {
  background: var(--bg-page);
  border-color: var(--border-strong);
  box-shadow: 0 24px 64px rgba(var(--pv3-shadow-rgb), .16);
}

/* ---------- 3. 卡片基座（原型 r-card 20px · 暖边 · 软投影） ---------- */
.phone .card {
  border-radius: 20px;
  border-color: var(--border);
  box-shadow: var(--pv3-shadow-s);
}
.phone .card--key { border-top: 4px solid var(--primary-500); }
.phone .card-title { letter-spacing: -.01em; }
/* 区块题标记：原型无方块题标 → 收成品牌紫小圆点，弱化工具感 */
.phone .card-title::before,
.phone .section-title::before { border-radius: 50%; width: 7px; height: 7px; background: var(--primary-400); }

/* ---------- 4. 底部 Tab（原型：毛玻璃白 + 中央「安」印章凸起） ---------- */
.phone .tabbar {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 18px rgba(var(--pv3-shadow-rgb), .04);
}
.phone .tab-item { color: var(--text-tertiary); }
.phone .tab-item.active { color: var(--primary-800); font-weight: 700; }
/* 中央印章：原 tab-xiaoan 图标升格为凸起圆形印章（不改 HTML） */
.phone .tab-item.tab-xiaoan { color: var(--primary-700); }
.phone .tab-item.tab-xiaoan .tab-ico {
  width: 40px; height: 40px; padding: 8px; box-sizing: border-box;
  margin-top: -16px; border-radius: 50%;
  background: #FFFFFF; color: var(--primary-700);
  border: 1px solid rgba(var(--pv3-brand-rgb), .24);
  box-shadow: 0 4px 12px rgba(var(--pv3-brand-btn-rgb), .18);
  transition: transform .18s ease, background .25s, color .25s;
}
.phone .tab-item.tab-xiaoan .tab-ico .ix { fill: #FFFFFF; }
.phone .tab-item.tab-xiaoan.active { color: var(--primary-800); font-weight: 700; }
.phone .tab-item.tab-xiaoan.active .tab-ico {
  background: var(--cta-500); color: #FFFFFF;
  border-color: var(--primary-500);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--pv3-brand-btn-rgb), .26);
}

/* ---------- 5. AI 通栏入口（原型 ai-entry：深紫横幅 + 白字） ---------- */
.phone .ai-card {
  background: var(--cta-500);
  border: none;
  border-radius: 20px;
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(var(--pv3-brand-btn-rgb), .22);
  overflow: hidden;
  position: relative;
}
.phone .ai-card::after {
  content: ""; position: absolute; right: -30px; top: -40px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255, 255, 255, .09);
}
.phone .ai-card .ai-badge {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
}
.phone .ai-card .ai-title { color: #FFFFFF; }
.phone .ai-card .ai-sub { color: rgba(255, 255, 255, .82); }
.phone .ai-card .ai-spark { color: var(--pv3-seal); }
.phone .ai-card .ai-arrow { color: rgba(255, 255, 255, .7); }

/* ---------- 6. 四色分段进度条（原型 segbar · 首页今日卡签名组件） ---------- */
.segbar {
  display: flex; gap: 2px; height: 8px; margin-top: 14px;
  border-radius: 6px; overflow: hidden; background: var(--bg-subtle);
}
.segbar i { display: block; height: 100%; min-width: 0; transition: width .3s ease; }
.segbar .seg-self     { background: var(--task-self); }
.segbar .seg-prompted { background: var(--task-prompted); }
.segbar .seg-none     { background: var(--task-none); }
.segbar .seg-noop     { background: var(--task-noop); }
.seglegend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 10px; }
.seglegend .li { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.seglegend .li i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.seglegend .li b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-heading); }
.seglegend .li.pend { color: var(--text-tertiary); }
.seglegend .li.pend i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); }

/* ---------- 7. 原型点缀组件（可直接用于页面模板） ---------- */
/* 印章徽标（连续打卡 / 已签约等荣誉位） */
.stamp {
  background: var(--pv3-seal-tint); color: var(--pv3-seal-deep);
  border: 1px solid rgba(var(--pv3-seal-rgb), .55);
  border-radius: 12px; padding: 7px 10px 6px;
  font-size: 10px; line-height: 1.3; letter-spacing: .04em;
  text-align: center; font-weight: 600;
}
.stamp b { display: block; font-size: 14px; letter-spacing: -.01em; margin-top: 2px; font-weight: 800; }
/* 深紫卡（督导卡 / 下一步引导） */
.dark-card {
  background: var(--pv3-dark); color: var(--pv3-on-dark);
  border-radius: 20px; padding: 14px 15px;
  box-shadow: 0 8px 22px rgba(51, 37, 74, .18);
}
.dark-card .eyebrow { color: var(--pv3-on-dark-muted); }
/* 引用式小贴士（原型 tip-card：白卡 + 引号章） */
.phone .tip-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--pv3-shadow-s);
}

/* ---------- 8. 通用小件对齐原型 ---------- */
/* chips：白底暖边（原型 chip） */
.phone .chip { background: #FFFFFF; border-color: var(--border); color: var(--text-secondary); }
.phone .chip:hover { border-color: rgba(var(--pv3-brand-rgb), .32); }
/* 主按钮：16px 圆角 + 深紫投影（原型 primary-btn） */
.phone .btn-block-cta,
.phone .btn-checkin,
.phone .btn-cta {
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(var(--pv3-brand-btn-rgb), .22);
  letter-spacing: .02em;
}
/* 宫格：原型 r-tile 18px + 白卡描边 */
.phone .act-cell { border-radius: 18px; border-color: var(--border); }
.phone .act-cell.is-self     { box-shadow: inset 0 0 0 1px rgba(var(--pv3-brand-rgb), .24); }
.phone .act-cell.is-prompted { box-shadow: inset 0 0 0 1px rgba(var(--pv3-seal-rgb), .55); }
.phone .act-cell.is-none     { box-shadow: inset 0 0 0 1px rgba(185, 122, 133, .30); }
.phone .act-cell.is-noop     { box-shadow: inset 0 0 0 1px rgba(110, 136, 152, .30); }
/* 列表行图标位：紫 tint 圆角块 */
.phone .icon-box { border-radius: 12px; }
/* 会员锁条：沿用雾蓝「无机会」一支，圆角升到 16px */
.phone .member-lock { border-radius: 16px; }

/* ---------- 9. 动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .phone * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   10. 字体与字号对齐（原型《NDBI家长端小程序原型》排版纪律）
   ------------------------------------------------------------
   原型字体：Noto Sans SC 单一字体栈（无 Manrope / 无衬线混排）；
   字号紧凑偏小、权重偏重（700/800）。当前各页内联 <style> 的
   字号普遍偏大 2–3px，故此处用 .phone 前缀提升特异性统一压制，
   一处生效、不改 V2 令牌（管理端不受影响）。
   ============================================================ */
.phone {
  font-family: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "MiSans",
    -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
}

/* —— 页面级标题（问候 / 页标题）：22–25px · 800 —— */
.phone .greet-title,
.phone .page-title,
.phone .page-head h2,
.phone .app-header-title h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.32;
}

/* —— 区块题 / 卡片题：原型 15–15.5px · 700 —— */
.phone .section-title,
.phone .card-title,
.phone .sub-head h3,
.phone .sec-head h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* —— 正文 / 段落 / 行主标题：原型 12–13px —— */
.phone .tip-text,
.phone .notice-text,
.phone .notify-text,
.phone .fb-text,
.phone .list-row__desc,
.phone .list-row__title,
.phone .notice-body,
.phone .empty-text,
.phone .goal-text,
.phone .lead-text,
.phone .seg-line,
.phone .gblock,
.phone .review-text,
.phone .rp-block__line,
.phone .sup-text,
.phone .ctx-foot,
.phone .ctx-empty,
.phone .doc-p,
.phone .sheet__body {
  font-size: 13px;
}

/* —— 标签 / meta / 辅助说明：原型 9.5–10.5px —— */
.phone .card-sub,
.phone .card-meta,
.phone .card-note,
.phone .greet-date,
.phone .page-sub,
.phone .section-note,
.phone .section-meta,
.phone .list-row__meta,
.phone .notify-time,
.phone .tl-scene,
.phone .tl-note,
.phone .tl-hint,
.phone .field-sub,
.phone .field-sub-inline,
.phone .chip,
.phone .chip-label,
.phone .legend-item,
.phone .pf-note,
.phone .pf-tagline,
.phone .fb-who,
.phone .page-note,
.phone .toast {
  font-size: 10.5px;
}

/* —— 大数字（KPI/打卡计数）：原型 30px · 800 —— */
.phone .streak-num,
.phone .kpi-cell__num,
.phone .count-num,
.phone .pc-num {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* —— 次级数字（环图/四格/统计）：原型 17–22px · 700 —— */
.phone .ring-num,
.phone .quad-cell .num,
.phone .big3 .num,
.phone .sum-cell__num,
.phone .stat-cell__num,
.phone .goal-count__num,
.phone .acq3 .num,
.phone .dur-num,
.phone .week-kpi .num {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* —— 行内标题（任务卡/条目名）：原型 12.5–13px · 600/700 —— */
.phone .task-card-title,
.phone .stat-entry__title,
.phone .list-row__title,
.phone .art-title,
.phone .st-name,
.phone .pj-title,
.phone .tl-title,
.phone .ctx-title,
.phone .om-title,
.phone .acq-title,
.phone .acq3 .lbl {
  font-size: 13px;
  font-weight: 600;
}

/* —— 按钮文案：原型 13.5–14.5px · 600 —— */
.phone .btn-block-cta,
.phone .btn--lg,
.phone .btn--sm {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}