/* ============================================================
   陪跑 正式版骨架 · 收工仪式（页面 7）
   视觉：demo/07_收工仪式.html 提取（玻璃卡片 / 高光行 / 自评三键 / 回应气泡 + 妈妈头像）
   作用域：.fn 整页固定层（自带滚动），不影响主页 body 布局
   头像复用主页语义：元素 id=avatarOuter、class=avatar-outer/.avatar、
   开口动画 class=wobble（本文件在 .fn 作用域内自给自足，不依赖 home.css）
   ============================================================ */
.fn {
  --main: #e05570;
  --main-deep: #d6456d;
  --ink: #5a3a42;
  --ink-soft: #a87f8b;
  --ok: #2e8b57;
  --note: #b99a55;
  position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(85% 65% at 10% 6%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(65% 55% at 90% 12%, rgba(255,196,220,.34), transparent 66%),
    var(--cream);
}
.fn * { box-sizing: border-box; }

/* ---- 顶栏 ---- */
.fn-hd { max-width: 760px; margin: 0 auto; padding: 22px 20px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fn-logo { font-size: 22px; font-weight: 900; color: var(--main-deep); letter-spacing: 2px; }
.fn-logo .heart { font-size: 13px; }
.fn-chip { margin-left: auto; font-size: 12.5px; font-weight: 800; color: #2e8b57;
  background: rgba(255,255,255,.85); border: 1px solid #cfe6d4; padding: 7px 16px;
  border-radius: 999px; box-shadow: 0 4px 12px rgba(46,139,87,.12); white-space: nowrap; }
.fn-back { font-size: 12.5px; color: var(--main-deep); font-weight: 700; font-family: inherit;
  background: rgba(255,255,255,.8); border: 1px solid rgba(224,85,112,.35); padding: 7px 16px;
  border-radius: 999px; cursor: pointer; }
.fn-back:hover { background: #fff0f3; }

/* ---- 主体 ---- */
.fn-wrap { max-width: 760px; margin: 0 auto; padding: 14px 20px 60px; text-align: center; }
.fn-stage { background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.75);
  border-radius: 28px; padding: 36px 30px; box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
  0 14px 40px rgba(224,85,112,.1); backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); animation: fnQIn .45s ease;
  min-height: 430px; display: flex; flex-direction: column; justify-content: center; }
@keyframes fnQIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.fn-tag { font-size: 12px; font-weight: 900; color: #c26a83; letter-spacing: 3px; margin-bottom: 8px; }
.fn-emoji { font-size: 60px; margin: 6px 0; line-height: 1.2; }
.fn-title { font-size: 23px; color: var(--ink); margin: 4px 0 8px; line-height: 1.5; font-weight: 900; }
.fn-sub { font-size: 14px; color: var(--ink-soft); line-height: 1.9; }
.fn-note { font-size: 10.5px; color: var(--note); opacity: .9; margin-top: 6px; }

/* ---- 步 1：高光行（真实完成素材 chips） ---- */
.fn-chips { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.fn-chips .hc { background: #eef7f0; border: 1.5px solid #cfe6d4; color: var(--ok); border-radius: 999px;
  padding: 8px 18px; font-size: 14.5px; font-weight: 800; animation: fnPop .4s ease both; }
.fn-chips .hc:nth-child(2) { animation-delay: .15s; }
.fn-chips .hc:nth-child(3) { animation-delay: .3s; }
.fn-chips .hc:nth-child(n+4) { animation-delay: .4s; }
@keyframes fnPop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---- 步 2：自评三键 ---- */
.fn-keys { display: flex; gap: 16px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.fn-key { border: none; border-radius: 24px; padding: 22px 18px; width: 170px; cursor: pointer;
  font-family: inherit; background: rgba(255,255,255,.92); border: 1.5px solid rgba(224,85,112,.18);
  transition: all .15s; box-shadow: 0 4px 14px rgba(224,85,112,.08); user-select: none; }
.fn-key:hover { border-color: var(--main); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(224,85,112,.18); }
.fn-key:active { transform: translateY(0) scale(.97); }
.fn-key .ki { font-size: 44px; display: block; line-height: 1.1; }
.fn-key .kt { font-size: 17px; font-weight: 900; color: var(--ink); display: block; margin-top: 8px; }
.fn-key .kd { font-size: 11.5px; color: var(--ink-soft); display: block; margin-top: 4px; line-height: 1.6; }

/* ---- 高龄选填「多说一句」 ---- */
.fn textarea { display: block; width: 100%; max-width: 540px; margin: 18px auto 0; min-height: 80px;
  border: 1.5px solid #f0c3cd; border-radius: 16px; padding: 12px 14px; font-family: inherit;
  font-size: 15px; line-height: 1.7; color: var(--ink); outline: none; resize: vertical;
  background: rgba(255,255,255,.9); }
.fn textarea:focus { border-color: var(--main); box-shadow: 0 0 0 3px rgba(224,85,112,.12); }
.fn textarea::placeholder { color: #c9a0ab; }

/* ---- 步 3：妈妈头像 + 回应气泡 ---- */
.fn-reply { display: flex; align-items: center; gap: 18px; margin-top: 8px; text-align: left; }
.fn .avatar-outer { position: relative; flex: none; width: 108px; aspect-ratio: 1; }
.fn .avatar { width: 100%; height: 100%; border-radius: 50%; position: relative; overflow: hidden;
  background: var(--mist); display: flex; align-items: center;
  justify-content: center; font-size: 40px; font-weight: 900; color: #fff; animation: none;
  box-shadow: 0 6px 18px rgba(224,85,112,.28); user-select: none; }
.fn .avatar .mini { font-size: 17px; margin-top: 6px; }
.fn .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.16); object-position: 50% 44%; }
/* 电子妈妈开口：头像 wobble（demo01/home.css 同名动效，本文件自给） */
.fn .avatar-outer.wobble { animation: fnWobble .55s ease; }
@keyframes fnWobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg) scale(1.05); }
  40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
.fn-bubble { flex: 1; min-width: 0; background: var(--amber);
  border: 1.5px solid #f2d9a4; border-radius: 22px; padding: 18px 22px; position: relative; }
.fn-bubble::before { content: ""; position: absolute; left: -8px; top: 30px; border: 8px solid transparent;
  border-right-color: #f2d9a4; }
.fn-bubble .bq { font-size: 15.5px; color: #8a6420; font-weight: 700; line-height: 2; }
.fn-bubble .bn { display: block; font-size: 10.5px; color: var(--note); margin-top: 8px; }
.fn-goodnight { margin-top: 16px; font-size: 15.5px; color: var(--ink); font-weight: 800; }

/* ---- 动作 ---- */
.fn-actions { margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fn-actions button { border: none; border-radius: 999px; padding: 13px 34px; font-size: 15px;
  font-weight: 900; font-family: inherit; cursor: pointer; }
.fn-main { background: var(--leaf); color: #fff;
  box-shadow: 0 8px 22px rgba(224,85,112,.3); }
.fn-main:hover { filter: brightness(1.06); }
.fn-ghost { border: 1.5px solid #ecc4cd; background: rgba(255,255,255,.85); color: var(--ink-soft); }
.fn-ghost:hover { color: var(--main-deep); background: #fff0f3; }

/* ---- 分龄微调：低龄=大字图标/去小字，妈妈可代点 ---- */
.fn-a0 .fn-title { font-size: 21px; }
.fn-a0 .fn-key { width: 156px; padding: 26px 12px; }
.fn-a0 .fn-key .ki { font-size: 56px; }
.fn-a0 .fn-key .kt { font-size: 19px; }
.fn-a0 .fn-key .kd { display: none; }
.fn-a0 .fn-emoji { font-size: 68px; }
.fn-a0 .fn-actions button { font-size: 16px; padding: 15px 38px; }

/* ---- 窄屏 ---- */
@media (max-width: 600px) {
  .fn-stage { padding: 26px 18px; min-height: 0; }
  .fn-title { font-size: 20px; }
  .fn-key { width: 46%; }
  .fn-reply { flex-direction: column; }
  .fn-bubble::before { display: none; }
  .fn .avatar-outer { width: 88px; }
}