/* ===========================================================
   styles.css —— 小问号乐园 · 设计系统
   探索层（冷蓝·自由）/ 素养层（暖木·积累）/ 家长端（灰蓝·理性）
   =========================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  /* 主题色由 JS 按当前孩子档案注入 */
  --theme: #2E86DE;
  --theme-d: #1f6dc0;
  --theme-s: #EAF4FC;
  --theme-xs: #F4FAFF;

  --ink: #17212E;
  --ink-2: #4A5A6E;
  --ink-3: #8695A6;
  --line: #E8EEF4;
  --card: #FFFFFF;
  --page: #F2F7FC;

  --warm: #C98A2E;
  --warm-d: #A66F1C;
  --warm-s: #FFF6E6;
  --warm-page: #FFFBF3;
  --warm-line: #F0E2C8;

  --strip: #F5F0FF;
  --strip-b: #E5DCFB;

  --ok: #2BAE66;
  --warn: #F2A93B;
  --danger: #E15A5A;
  --star: #F5B93B;

  --r: 18px;
  --r-s: 12px;
  --sh: 0 2px 10px rgba(23, 33, 46, .06);
  --sh-2: 0 6px 22px rgba(23, 33, 46, .10);
  --f: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

html, body { height: 100%; }
body {
  font-family: var(--f);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 20% -10%, #eaf3fb 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 100%, #fdf3e6 0%, transparent 55%),
    #eef3f8;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 26px 20px 40px;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- 舞台 / 手机壳 ---------------- */
.stage { display: flex; gap: 26px; align-items: flex-start; }

.phone {
  position: relative; width: 390px; height: 844px; flex: 0 0 390px;
  background: var(--page); border-radius: 52px; overflow: hidden;
  box-shadow: 0 0 0 11px #1d2430, 0 0 0 13px #2b3441, 0 30px 70px rgba(20, 30, 45, .34);
  display: flex; flex-direction: column;
}
.notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 112px; height: 30px; background: #14191f; border-radius: 16px; z-index: 60;
}

.phone.dark { background: #141B28; }

/* 状态栏 */
.statusbar {
  height: 48px; flex: 0 0 48px; display: flex; align-items: center;
  justify-content: space-between; padding: 14px 26px 0; font-size: 13px; font-weight: 700;
  color: var(--ink); position: relative; z-index: 50;
}
.statusbar .sb-r { display: flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: .5px; }
.sb-batt { width: 22px; height: 11px; border: 1.4px solid currentColor; border-radius: 3px; position: relative; opacity: .9; }
.sb-batt::after { content: ''; position: absolute; inset: 1.5px; right: 6px; background: currentColor; border-radius: 1px; }

/* 小程序胶囊 —— 两个半区都是真按钮（详见 index.html 里的注释） */
.capsule {
  position: absolute; top: 54px; right: 12px; z-index: 55;
  height: 30px; width: 88px; border-radius: 15px;
  background: rgba(255, 255, 255, .72); border: .5px solid rgba(0, 0, 0, .07);
  backdrop-filter: blur(8px); display: flex; align-items: center;
  justify-content: space-around; color: #3b4553; font-size: 15px;
  overflow: hidden;
}
.capsule .cp-btn {
  flex: 1; height: 100%; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: inherit; font: inherit; -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
.capsule .cp-btn:active { background: rgba(0, 0, 0, .07); }
.capsule .cp-btn:focus-visible { outline: 2px solid #3b4553; outline-offset: -3px; border-radius: 12px; }
.capsule .cp-dots { letter-spacing: 1px; font-weight: 700; font-size: 15px; }
.capsule .cp-circle { width: 15px; height: 15px; border: 1.8px solid #3b4553; border-radius: 50%; position: relative; }
.capsule .cp-circle::after { content: ''; position: absolute; inset: 3.2px; border: 1.6px solid #3b4553; border-radius: 50%; }
.capsule .cp-sep { width: .5px; height: 16px; background: rgba(0, 0, 0, .12); }

/* 胶囊在 y 54~84 那一带，屏幕自己的标题栏要让开它，
   否则最右边的元素会被盖住（首页的「⏳ 分钟」就是这么消失的）。 */
.screen > .topbar, .screen > .navbar { padding-right: 100px; }

/* 滚动区 */
.screen {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 16px 26px;
  scroll-behavior: smooth; position: relative;
}
.screen::-webkit-scrollbar { width: 0; }
.screen.warm { background: var(--warm-page); }
.screen.dark { background: #141B28; }
.screen.nopad { padding-bottom: 0; display: flex; flex-direction: column; }
.screen.nopad > .askbar { margin-top: auto; }
.screen.nopad > .navbar { padding-bottom: 12px; }

/* 通用进度条 */
.prog { height: 6px; border-radius: 4px; background: #EEF3F8; overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 4px; background: var(--theme); transition: width .4s; }

/* ---------------- 通用组件 ---------------- */
.card {
  background: var(--card); border-radius: var(--r); padding: 16px;
  box-shadow: var(--sh); margin-bottom: 12px;
}
.card.flat { box-shadow: none; border: 1px solid var(--line); }
.card.warm { background: #fff; border: 1px solid var(--warm-line); box-shadow: 0 2px 10px rgba(166, 111, 28, .05); }

.h1 { font-size: 20px; font-weight: 800; letter-spacing: -.2px; line-height: 1.4; }
.h2 { font-size: 15px; font-weight: 800; }
.h3 { font-size: 13.5px; font-weight: 700; }
.muted { color: var(--ink-3); font-size: 12.5px; line-height: 1.7; }
.small { font-size: 12px; color: var(--ink-3); line-height: 1.65; }
.body { font-size: 13.5px; line-height: 1.78; color: var(--ink-2); }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 50px; border: none; border-radius: 15px;
  font-family: var(--f); font-size: 16px; font-weight: 800; cursor: pointer;
  background: var(--theme); color: #fff; box-shadow: 0 6px 16px rgba(46, 134, 222, .26);
  transition: transform .12s, opacity .12s;
}
.btn:active { transform: scale(.975); opacity: .92; }
.btn.ghost { background: var(--theme-s); color: var(--theme-d); box-shadow: none; }
.btn.plain { background: #fff; color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; }
.btn.warm { background: var(--warm); box-shadow: 0 6px 16px rgba(201, 138, 46, .24); }
.btn.warm-ghost { background: var(--warm-s); color: var(--warm-d); box-shadow: none; }
.btn.sm { height: 40px; font-size: 14px; border-radius: 12px; }
.btn.xs { height: 32px; font-size: 12.5px; border-radius: 10px; width: auto; padding: 0 14px; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px;
  border-radius: 14px; background: var(--theme-s); color: var(--theme-d);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.chip.warm { background: var(--warm-s); color: var(--warm-d); }
.chip.gray { background: #F1F4F8; color: var(--ink-2); }
.chip.line { background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; }

.divider { height: 1px; background: var(--line); margin: 14px 0; }

/* 返回 / 标题栏 */
.navbar { display: flex; align-items: center; gap: 10px; padding: 8px 0 14px; min-height: 44px; }
.navbar .back {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: #fff;
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--ink-2); cursor: pointer; box-shadow: var(--sh);
}
.navbar .ttl { font-size: 16px; font-weight: 800; }
.navbar .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* ---------------- 启动页 ---------------- */
.launch { padding-top: 8px; text-align: center; }

/* 「你的档案存在哪」说明块：本地存储这件事必须说清楚，
   否则「换设备就空了」这件事会被当成 bug 报上来。2026-10-02 加。 */
.wherehint {
  margin-top: 14px; padding: 12px 14px; text-align: left;
  background: #FFF8E8; border: 1px solid #F0DFB0; border-radius: var(--r);
  font-size: 12px; line-height: 1.75; color: var(--ink-2);
}
.wherehint b { color: var(--ink); }
.launch .logo {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px 7px 8px;
  background: #fff; border-radius: 999px; box-shadow: var(--sh); font-weight: 800; font-size: 14.5px;
}
.launch .logo .mark {
  width: 28px; height: 28px; border-radius: 50%; background: var(--theme);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  box-shadow: 0 0 0 3px rgba(46, 134, 222, .14);
}
.launch h1 { font-size: 25px; font-weight: 900; margin: 20px 0 7px; letter-spacing: -.5px; }
.launch .sub { font-size: 13px; color: var(--ink-3); margin-bottom: 22px; }

.kids { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.kid {
  position: relative;
  background: #fff; border-radius: var(--r); padding: 18px 8px 14px; cursor: pointer;
  box-shadow: var(--sh); text-align: center; border: 2px solid transparent; transition: .16s;
}
/* 小头像右上角的「编辑档案」铅笔：从家长中心点「切换 / 编辑宝贝档案」进来后，
   以前这里没有任何能改档案的入口，家长只能报「出生时间没法修改」。
   2026-10-02 加。点击命中测试见 _shot_backsweep.py / _repro.py */
.kid .kpen {
  position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 50%;
  background: #F2F7FC; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  line-height: 1; cursor: pointer; z-index: 2;
}
.kid .kpen:active { transform: scale(.9); }
.editHint { color: var(--ink-3); margin: -4px 0 12px; }
.kid:active { transform: scale(.97); }
.kid.sel { border-color: var(--theme); }
.kid .av {
  width: 62px; height: 62px; margin: 0 auto 10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .07);
}
.kid .nm { font-size: 14px; font-weight: 800; }
.kid .mt { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.kid.add {
  border: 1.6px dashed #c8d6e5; background: #fff; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.kid.add .plus { font-size: 30px; color: var(--theme); font-weight: 300; line-height: 1; margin-bottom: 12px; }

/* 启动页 · 空状态（还没有任何宝贝） */
.emptybox {
  background: #fff; border-radius: var(--r); padding: 26px 18px 22px;
  box-shadow: var(--sh); margin-bottom: 18px;
}
.emptybox .eb-e {
  width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  background: linear-gradient(160deg, #EAF6FF, #FFF3F6);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .05);
}
.emptybox .eb-t { font-size: 15px; font-weight: 900; margin-bottom: 7px; }
.emptybox .eb-d { font-size: 12px; color: var(--ink-3); line-height: 1.75; }
/* 空状态次要按钮：描边弱一档，别跟主按钮抢视线 */
.launch .btn.demo { margin-top: 10px; height: 44px; font-size: 14px; font-weight: 700; color: var(--ink-3); }

.tipbar {
  display: flex; gap: 8px; text-align: left; background: #fff; border-radius: var(--r);
  padding: 13px 14px; box-shadow: var(--sh); font-size: 12px; color: var(--ink-2);
  line-height: 1.65; margin-bottom: 14px;
}

/* ---------------- 探索层首页 ---------------- */
.topbar { display: flex; align-items: center; gap: 11px; padding: 6px 0 16px; }
.topbar .av {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--theme-s); border: 2px solid #fff; box-shadow: var(--sh);
}
.topbar .hi { font-size: 16.5px; font-weight: 800; }
.topbar .sm { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* 点自己的小头像 = 换一个宝贝（右上角那个 ⇄ 是提示它可点）。
   以前孩子进了自己的账号就出不来了，只能刷新 —— 2026-10-03 加。 */
.topbar .av { cursor: pointer; position: relative; }
.topbar .av:active { transform: scale(.94); }
.topbar .av .swbadge {
  position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; color: var(--theme-d);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; box-shadow: 0 1px 4px rgba(20, 30, 45, .22);
}

.timerPill {
  display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px;
  border-radius: 14px; background: #fff; box-shadow: var(--sh); font-size: 11.5px;
  font-weight: 700; color: var(--ink-2);
}
.timerPill b { color: var(--theme); }
/* 时长药丸以前钉在顶栏最右，正好被胶囊压住 → 挪到 hero 卡右上角。
   z-index 要高于卡片自带的装饰圆（.hero::after）。 */
.hero .timerPill {
  position: absolute; top: 13px; right: 14px; z-index: 2;
  height: 26px; padding: 0 10px; border-radius: 13px;
  background: #fff; color: var(--theme-d);
  box-shadow: 0 4px 14px rgba(12, 30, 54, .18);
}
.hero .timerPill b { font-size: 13px; }

.hero {
  background: linear-gradient(140deg, var(--theme) 0%, var(--theme-d) 100%);
  border-radius: 22px; padding: 20px 18px; color: #fff; margin-bottom: 14px;
  box-shadow: 0 10px 26px rgba(46, 134, 222, .28); position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px;
  border-radius: 50%; background: rgba(255, 255, 255, .12);
}
.hero .t { font-size: 19px; font-weight: 900; line-height: 1.35; }
.hero .d { font-size: 12px; opacity: .88; margin-top: 6px; line-height: 1.6; }
.hero .go {
  margin-top: 14px; height: 44px; border-radius: 14px; background: #fff; color: var(--theme-d);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 15px; font-weight: 900; cursor: pointer;
}
.hero .go:active { transform: scale(.98); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.tile {
  background: #fff; border-radius: var(--r); padding: 15px; box-shadow: var(--sh); cursor: pointer;
  transition: .15s;
}
.tile:active { transform: scale(.975); }
.tile .ic { font-size: 24px; margin-bottom: 9px; }
.tile .tt { font-size: 14px; font-weight: 800; }
.tile .dd { font-size: 11px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }

/* 连接桥 */
.bridge {
  border-radius: var(--r); padding: 15px; margin-bottom: 12px;
  background: linear-gradient(135deg, #FFF6E6 0%, #FFFBF3 100%);
  border: 1.4px dashed var(--warm-line); position: relative;
}
.bridge .tag { font-size: 10.5px; font-weight: 800; color: var(--warm-d); letter-spacing: .4px; }
.bridge .bt { font-size: 14px; font-weight: 800; margin: 6px 0 4px; }
.bridge .bd { font-size: 11.5px; color: #8a7040; line-height: 1.6; }
.bridge .ba {
  margin-top: 11px; display: flex; gap: 8px; flex-wrap: wrap;
}

/* 底部导航 */
.tabbar {
  flex: 0 0 auto; display: flex; background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--line); padding: 7px 6px 14px; backdrop-filter: blur(12px);
}
.tabbar .tb {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--ink-3); cursor: pointer; font-weight: 600; padding: 3px 0;
  border-radius: 10px;
}
.tabbar .tb .ti { font-size: 19px; line-height: 1; }
.tabbar .tb.on { color: var(--theme); font-weight: 800; }
.tabbar.warm .tb.on { color: var(--warm); }

/* 素养层顶部徽章条 */
.warmtop .wbadge {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  background: rgba(255, 255, 255, .2); border-radius: 12px; padding: 9px 12px;
  position: relative; z-index: 2;
}
.warmtop .wbadge .wb-n { font-size: 20px; font-weight: 900; line-height: 1; }
.warmtop .wbadge .wb-l { font-size: 11px; opacity: .95; }

/* ---------------- 对话（启发式追问） ---------------- */
/* flex:0 0 auto —— 问答页的 .screen 是 flex 容器，
   若不写，对话区会被压到屏幕高度、内容溢出，底部提示条会浮起来压住结果卡片 */
.chatwrap { display: flex; flex-direction: column; flex: 0 0 auto; min-height: 100%; }
/* flex-basis 必须是 auto：否则消息区按 0 计算自然高度，
   底部提示条会「浮」在长内容中间、压住生成结果卡片 */
.msgs { flex: 1 1 auto; display: flex; flex-direction: column; gap: 13px; padding-bottom: 8px; }
.msg { display: flex; gap: 9px; align-items: flex-end; animation: pop .28s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.msg.me { flex-direction: row-reverse; }
.msg .mav {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; font-size: 16px;
  display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: var(--sh);
}
.bubble {
  max-width: 268px; padding: 12px 14px; border-radius: 16px; font-size: 13.5px;
  line-height: 1.72; background: #fff; box-shadow: var(--sh); color: var(--ink);
  border-top-left-radius: 5px;
}
.msg.me .bubble {
  background: var(--theme); color: #fff; border-top-left-radius: 16px;
  border-top-right-radius: 5px; box-shadow: 0 4px 12px rgba(46, 134, 222, .24);
}
.bubble .who { font-size: 10.5px; font-weight: 800; opacity: .62; margin-bottom: 5px; letter-spacing: .3px; }

.scaffold { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.scaffold .sc {
  height: 30px; padding: 0 12px; border-radius: 15px; background: var(--theme-xs);
  border: 1px solid var(--theme-s); color: var(--theme-d); font-size: 12.5px;
  font-weight: 700; display: flex; align-items: center; cursor: pointer;
}
.scaffold .sc:active { transform: scale(.96); }

.askbar {
  position: sticky; bottom: 0; z-index: 20;
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
  padding: 10px 16px 16px; backdrop-filter: blur(12px); margin: 0 -16px;
}
.askbar .hintline { font-size: 11px; color: var(--ink-3); text-align: center; margin-bottom: 8px; }
.inputrow { display: flex; gap: 8px; align-items: center; }
.inputrow input {
  flex: 1; height: 44px; border-radius: 22px; border: 1.4px solid var(--line);
  background: #F6F9FC; padding: 0 16px; font-size: 14px; font-family: var(--f);
  color: var(--ink); outline: none;
}
.inputrow input:focus { border-color: var(--theme); background: #fff; }
.inputrow .send {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: none;
  background: var(--theme); color: #fff; font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.inputrow .send:disabled { opacity: .4; }
.inputrow .mic {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 1.4px solid var(--line);
  background: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center;
  justify-content: center;
}
.inputrow .mic.rec { background: #FFE9E9; border-color: #FFC9C9; animation: beat 1s infinite; }
@keyframes beat { 50% { transform: scale(1.09); } }

/* 可视化选择 */
.vizpick {
  background: #fff; border-radius: var(--r); padding: 15px; box-shadow: var(--sh);
  border: 1.4px solid var(--theme-s); animation: pop .3s ease;
}
.vizpick .vt { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.vizpick .vd { font-size: 11.5px; color: var(--ink-3); margin-bottom: 13px; line-height: 1.6; }
.vizopts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.vizopts.four { grid-template-columns: 1fr 1fr; }
.vizopt {
  border: 1.4px solid var(--line); border-radius: 14px; padding: 13px 4px 11px;
  text-align: center; cursor: pointer; background: #fff; transition: .14s; position: relative;
}
.vizopt:active { transform: scale(.96); }
.vizopt .vi { font-size: 23px; margin-bottom: 6px; }
.vizopt .vn { font-size: 11.5px; font-weight: 800; line-height: 1.35; }
.vizopt.hi { border-color: var(--theme); background: var(--theme-xs); }
.vizopt.hot {
  border-color: var(--theme); background: linear-gradient(160deg, var(--theme-xs), #fff);
  box-shadow: 0 4px 14px rgba(46, 134, 222, .14);
}
.vizopt .newtag {
  position: absolute; top: -7px; right: 7px; font-size: 9px; font-weight: 900; color: #fff;
  background: var(--theme); padding: 2px 6px; border-radius: 8px; letter-spacing: .5px;
}

/* 动态绘图（逐笔手绘） */
.genstage.sketchwrap { height: 200px; background: #fff; }
.sketch { width: 100%; height: 200px; display: block; }
.sketch .sk {
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation-name: skdraw; animation-timing-function: ease-out; animation-fill-mode: forwards;
}
@keyframes skdraw { to { stroke-dashoffset: 0; } }
.sketch .skt { opacity: 0; animation: skfade .5s ease forwards; }
@keyframes skfade { to { opacity: 1; } }
.sksteps { display: flex; flex-direction: column; gap: 8px; }
.sks {
  display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.65;
  color: var(--ink-2); opacity: 0; animation: skfade .55s ease forwards;
}
.sks .n {
  width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; background: var(--theme-s);
  color: var(--theme-d); font-size: 10.5px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.regif {
  margin-top: 11px; font-size: 11.5px; font-weight: 800; color: var(--theme);
  text-align: center; cursor: pointer; padding: 7px; border-radius: 10px; background: var(--theme-xs);
}
.regif.sm { margin-top: 10px; }

/* 生成结果 */
.gencard {
  background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-2);
  margin-bottom: 12px; animation: pop .32s ease;
}
.genstage { height: 190px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.genstage .cap {
  position: absolute; bottom: 9px; left: 12px; right: 12px; font-size: 10.5px;
  color: #66768a; text-align: center; z-index: 3;
}
.genbody { padding: 13px 15px 15px; }
.genbody .gt { font-size: 14.5px; font-weight: 800; margin-bottom: 6px; }
.genbody .gd { font-size: 12.5px; color: var(--ink-2); line-height: 1.75; }

.loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 0; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--theme-s);
  border-top-color: var(--theme); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 动画场景 */
.scene { width: 100%; height: 190px; display: block; }
.swim { animation: swim 4.4s ease-in-out infinite; }
@keyframes swim {
  0%, 100% { transform: translate(6px, 0) rotate(-3deg); }
  50% { transform: translate(-6px, -7px) rotate(3deg); }
}
.bub { animation: bubup 3.2s linear infinite; }
.bub.b2 { animation-delay: .9s; } .bub.b3 { animation-delay: 1.7s; }
@keyframes bubup { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: .85; } 100% { transform: translateY(-88px); opacity: 0; } }
.beatH { animation: beatH 1.15s ease-in-out infinite; transform-origin: center; }
@keyframes beatH { 0%, 100% { transform: scale(1); } 22% { transform: scale(1.16); } 44% { transform: scale(1); } }
.twinkle { animation: tw 2.2s ease-in-out infinite; }
.twinkle.t2 { animation-delay: .6s; } .twinkle.t3 { animation-delay: 1.2s; }
@keyframes tw { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.fall { animation: fall 2.6s linear infinite; }
@keyframes fall { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(120px); opacity: 0; } }
.rumble { animation: rumble 2.6s ease-in-out infinite; transform-origin: center bottom; }
@keyframes rumble { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.sway { animation: sway 4.2s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }

/* ---------------- 绘画 ---------------- */
.canvasbox {
  border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--sh-2);
  margin-bottom: 12px; touch-action: none;
}
.canvasbox canvas { display: block; width: 100%; height: 320px; cursor: crosshair; }
.tools { display: flex; gap: 7px; align-items: center; margin-bottom: 12px; }
.swatch {
  width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; cursor: pointer; border: 2px solid #fff;
  box-shadow: 0 0 0 1.3px var(--line);
}
.swatch.on { box-shadow: 0 0 0 2.4px var(--theme); transform: scale(1.08); }
.tool {
  height: 28px; flex: 0 0 auto; padding: 0 10px; border-radius: 15px; border: 1.3px solid var(--line);
  background: #fff; font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap;
}
.tool.on { background: var(--theme); color: #fff; border-color: var(--theme); }
.gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.gallery .gi {
  border-radius: var(--r-s); overflow: hidden; background: #fff; box-shadow: var(--sh);
  aspect-ratio: 1; position: relative;
}
.gallery .gi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .gi .dt {
  position: absolute; bottom: 0; left: 0; right: 0; font-size: 9.5px; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55)); padding: 12px 6px 4px; text-align: center;
}

/* ---------------- 素养层 ---------------- */
.warmtop {
  background: linear-gradient(140deg, #F3B74E 0%, #DE9A2A 100%); border-radius: 22px;
  padding: 19px 18px; color: #fff; margin-bottom: 14px; box-shadow: 0 10px 24px rgba(201, 138, 46, .24);
  position: relative; overflow: hidden;
}
.warmtop::after {
  content: ''; position: absolute; right: -26px; bottom: -40px; width: 130px; height: 130px;
  border-radius: 50%; background: rgba(255, 255, 255, .13);
}
.warmtop .t { font-size: 18.5px; font-weight: 900; }
.warmtop .d { font-size: 11.5px; opacity: .92; margin-top: 5px; line-height: 1.6; }

.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skill {
  background: #fff; border: 1px solid var(--warm-line); border-radius: var(--r); padding: 15px;
  cursor: pointer; box-shadow: 0 2px 10px rgba(166, 111, 28, .06); transition: .15s;
  position: relative; overflow: hidden;
}
.skill:active { transform: scale(.975); }
.skill .si { font-size: 25px; margin-bottom: 9px; }
.skill .st { font-size: 14px; font-weight: 800; }
.skill .sd { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.skill .prog { margin-top: 10px; height: 5px; border-radius: 3px; background: #F4EDE0; overflow: hidden; }
.skill .prog i { display: block; height: 100%; background: var(--warm); border-radius: 3px; }

/* 字卡 */
.zicard {
  background: #fff; border: 1px solid var(--warm-line); border-radius: 20px; padding: 22px 18px;
  text-align: center; box-shadow: 0 3px 14px rgba(166, 111, 28, .07); margin-bottom: 12px;
}
.zicard .pic { font-size: 52px; line-height: 1; margin-bottom: 12px; }
.zicard .ch { font-size: 58px; font-weight: 900; line-height: 1.05; color: var(--ink); letter-spacing: 3px; }
.zicard .py { font-size: 16px; color: var(--warm-d); font-weight: 700; margin-top: 8px; letter-spacing: 1px; }
.zicard .wd { font-size: 12.5px; color: var(--ink-3); margin-top: 9px; }
.zidots { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.zidots .zd { width: 9px; height: 9px; border-radius: 50%; background: #EADCC4; }
.zidots .zd.on { background: var(--warm); transform: scale(1.25); }

/* ---------- 字形演变（甲骨文 / 金文 / 小篆） ---------- */
.evobox {
  background: #fff; border: 1px solid var(--warm-line); border-radius: 18px;
  padding: 14px 12px 12px; margin-top: 12px; box-shadow: 0 3px 14px rgba(166, 111, 28, .06);
}
.evohd { font-size: 12.5px; font-weight: 800; color: var(--warm-d); line-height: 1.5; }
.evohd i { display: block; font-style: normal; font-weight: 600; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.evostrip { display: flex; gap: 5px; align-items: flex-start; margin-top: 11px; }
.evos { flex: 1 1 0; min-width: 0; text-align: center; }
.evos svg { display: block; width: 100%; height: auto; background: #FFFDF6; border: 1px solid #F3E7D2; border-radius: 11px; }
.evos .gk {
  fill: none; stroke: #7A5A32; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: gksk .46s ease forwards; animation-delay: var(--dl);
}
@keyframes gksk { to { stroke-dashoffset: 0; } }
.evos .evon { margin-top: 5px; font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
.evos.now .evoch {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; background: var(--warm-page); border: 1px solid #F3E7D2; border-radius: 11px;
  font-size: 32px; font-weight: 900; color: var(--ink); line-height: 1;
}
.evos.now .evon { color: var(--warm-d); }
.evotip {
  margin-top: 10px; font-size: 11.5px; color: var(--ink-2); line-height: 1.72;
  background: #FFF9EE; border-radius: 10px; padding: 8px 10px;
}
.evobtn { width: 100%; margin-top: 10px; }

/* 字母 */
.abccard {
  background: #fff; border: 1px solid var(--warm-line); border-radius: 20px; padding: 20px;
  text-align: center; box-shadow: 0 3px 14px rgba(166, 111, 28, .07); margin-bottom: 12px;
  cursor: pointer;
}
.abccard .big { font-size: 64px; font-weight: 900; color: var(--warm); line-height: 1; letter-spacing: 2px; }
.abccard .ph { font-size: 14px; color: var(--ink-3); margin-top: 8px; letter-spacing: .6px; }
.abccard .we { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.abccard .we .e { font-size: 33px; }
.abccard .we .w { font-size: 19px; font-weight: 800; }
.abccard .we .c { font-size: 11.5px; color: var(--ink-3); }
.abcpick { display: flex; flex-wrap: wrap; gap: 6px; }
.abcpick .ap {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 800; background: #fff;
  border: 1px solid var(--warm-line); color: var(--ink-2); cursor: pointer;
}
.abcpick .ap.on { background: var(--warm); color: #fff; border-color: var(--warm); }

/* 数学 */
.mathcard {
  background: #fff; border: 1px solid var(--warm-line); border-radius: 20px; padding: 20px 16px;
  text-align: center; box-shadow: 0 3px 14px rgba(166, 111, 28, .07); margin-bottom: 12px;
}
.mathcard .vis { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center; margin-bottom: 16px; min-height: 34px; }
.mathcard .vis .grp { display: inline-flex; gap: 5px; }
.mathcard .vis .plus { font-size: 17px; font-weight: 900; color: var(--warm); margin: 0 5px; }
.mathcard .vis .it { font-size: 22px; }
.mathcard .vis .it.off { opacity: .26; position: relative; }
.mathcard .vis .it.off::after {
  content: ''; position: absolute; inset: 8px -2px auto -2px; height: 2px; background: var(--danger);
}
.mathcard .eq { font-size: 32px; font-weight: 900; letter-spacing: 2px; margin-bottom: 16px; }
.mathcard .eq b { color: var(--warm-d); }
.numrow { display: flex; gap: 10px; justify-content: center; }
.numrow .nu {
  width: 62px; height: 56px; border-radius: 16px; background: #fff; border: 1.6px solid var(--warm-line);
  font-size: 22px; font-weight: 900; color: var(--ink); display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-family: var(--f);
}
.numrow .nu.ok { background: #E8F7EE; border-color: var(--ok); color: #1c8a4d; }
.numrow .nu.no { background: #FDECEC; border-color: var(--danger); color: #c33; }

/* 找规律 */
.patrow { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.patrow .pi {
  width: 44px; height: 44px; border-radius: 13px; background: #FBFAF7; border: 1px solid var(--warm-line);
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800;
}
.patrow .pi.q { border: 1.8px dashed var(--warm); color: var(--warm); background: var(--warm-s); }

/* 诵读 */
.chantline {
  background: #fff; border: 1px solid var(--warm-line); border-radius: 16px; padding: 15px;
  margin-bottom: 10px; cursor: pointer; transition: .15s;
}
.chantline.on { border-color: var(--warm); background: var(--warm-s); }
.chantline .ct { font-size: 18px; font-weight: 800; letter-spacing: 2px; line-height: 1.7; }
.chantline .cp { font-size: 10.5px; color: var(--warm-d); margin-top: 5px; letter-spacing: .3px; }
.chantline .cn { font-size: 12px; color: var(--ink-2); margin-top: 8px; line-height: 1.72; display: none; }
.chantline.on .cn { display: block; }

/* ---------------- 数据 / 报告 ---------------- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.stat {
  background: #fff; border-radius: var(--r-s); padding: 15px 8px 13px; text-align: center; box-shadow: var(--sh);
}
.stat .n { font-size: 26px; font-weight: 900; color: var(--theme); line-height: 1.1; letter-spacing: -.5px; }
.stat .n small { font-size: 13px; font-weight: 800; margin-left: 1px; }
.stat .l { font-size: 11px; color: var(--ink-3); margin-top: 5px; font-weight: 600; }
.stat .l .s { color: var(--star); }

.bars { display: flex; gap: 14px; align-items: flex-end; justify-content: center; height: 132px; padding: 8px 0 0; }
.barcol { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 62px; }
.barcol .bar {
  width: 54px; border-radius: 7px 7px 0 0; background: var(--theme);
  transition: height .5s cubic-bezier(.2, .8, .3, 1); min-height: 3px;
}
.barcol .bl { font-size: 10.5px; color: var(--ink-2); text-align: center; line-height: 1.35; }
.barcol .bv { font-size: 10.5px; color: var(--ink-3); }

.hlbox {
  background: #FFF8E8; border-left: 3px solid var(--star); border-radius: 10px;
  padding: 12px 13px; font-size: 12.5px; line-height: 1.75; color: #7a5b16; margin: 12px 0;
}
.hlbox b { color: #a8760f; }
.qlist { background: #FFF8E8; border-radius: 10px; padding: 13px; margin-bottom: 12px; }
.qlist .qi { display: flex; gap: 6px; font-size: 12.5px; line-height: 1.8; color: #7a5b16; }
.qlist .qi + .qi { margin-top: 7px; }
.qlist .qi .ar { color: var(--star); font-weight: 800; }

.sec { margin-bottom: 18px; }
.sec .sh { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.sec .sh .no {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; background: var(--theme);
  color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.sec .sh .st { font-size: 15px; font-weight: 800; }
.sec .sh .sd { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }
.sec .box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px;
  font-size: 13px; line-height: 1.82; color: var(--ink-2);
}
.sec .box.soft { background: var(--theme-xs); border-color: var(--theme-s); }
.sec .box.dashed { background: #FCFDFE; border-style: dashed; }

.qitem { padding: 11px 0; }
.qitem + .qitem { border-top: 1px dashed var(--line); }
.qitem .qq { font-size: 13.5px; font-weight: 800; margin-bottom: 7px; }
.qitem .qa { font-size: 12.5px; line-height: 1.9; color: var(--ink-2); display: flex; gap: 7px; }
.qitem .qa .ar { color: var(--theme); font-weight: 800; flex: 0 0 auto; }
.qitem .qa .tagx { flex: 0 0 auto; }
.qitem .qa .tagx em {
  font-style: normal; font-weight: 800; color: var(--theme-d);
}

.metric { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }
.metric + .metric { margin-top: 9px; }
.metric .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--theme); margin-top: 7px; flex: 0 0 6px; }

/* 生辰参考栏 */
.fate {
  border: 1.6px solid var(--strip-b); background: linear-gradient(160deg, #FAF7FF 0%, #F6F2FF 100%);
  border-radius: var(--r); padding: 15px; margin-bottom: 12px;
}
.fate .fh { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.fate .fh .fi { font-size: 17px; }
.fate .fh .ft { font-size: 14px; font-weight: 800; color: #5B43A8; }
.fate .fsub { font-size: 10.5px; color: #8578B8; line-height: 1.65; margin-bottom: 13px; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 13px; }
.pillar {
  background: #fff; border: 1px solid var(--strip-b); border-radius: 12px;
  padding: 11px 4px 10px; text-align: center;
}
.pillar .pl { font-size: 10px; color: #8578B8; font-weight: 700; }
.pillar .pg { font-size: 17px; font-weight: 900; color: #4A3690; margin: 6px 0 5px; letter-spacing: 1px; }
.pillar .ph2 { font-size: 9px; color: #A79BD0; line-height: 1.4; }
.metaline { font-size: 11.5px; color: #6B5CA5; line-height: 1.8; }
.fate .disc {
  margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--strip-b);
  font-size: 10.5px; color: #9A8CC6; line-height: 1.7;
}

/* ---------------- 印证台账 ---------------- */
.ring { width: 92px; height: 92px; flex: 0 0 92px; }
.flowrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.flowcell {
  background: #fff; border: 1px solid var(--strip-b); border-radius: 12px;
  padding: 10px 4px 9px; text-align: center;
}
.flowcell .fl { font-size: 10px; color: #8578B8; font-weight: 700; }
.flowcell .fg { font-size: 16px; font-weight: 900; color: #4A3690; margin: 5px 0 3px; letter-spacing: 1px; }
.flowcell .fw { font-size: 9.5px; color: #9A8CC6; line-height: 1.4; }

.vrow {
  background: #fff; border: 1px solid var(--strip-b); border-radius: 12px;
  padding: 11px 12px 12px; margin-bottom: 9px;
}
.vrow.ok { border-left: 3px solid #4CAF7D; }
.vrow.no { border-left: 3px solid #C9BFEC; }
.vr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.vr-day { font-size: 12.5px; font-weight: 800; color: #3B2E63; }
.vr-gz { font-size: 11px; color: #8578B8; font-weight: 700; letter-spacing: .3px; }
.vr-badge {
  margin-left: auto; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 8px;
  background: #E7F8EF; color: #1E7A4C;
}
.vrow.no .vr-badge { background: #F2EEFF; color: #7A6BB5; }
.vr-say { font-size: 11px; color: #6B5CA5; line-height: 1.75; }
.vr-cmp { display: flex; gap: 8px; margin-top: 8px; }
.vr-c {
  flex: 1; background: #FAF8FF; border-radius: 9px; padding: 7px 9px;
}
.vr-k { display: block; font-size: 9.5px; color: #9A8CC6; font-weight: 700; margin-bottom: 3px; }
.vr-v { display: block; font-size: 11.5px; color: #3B2E63; font-weight: 700; line-height: 1.5; }
.vr-q {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--strip-b);
  font-size: 11px; color: var(--ink-2); line-height: 1.65;
}

.duobar { height: 6px; border-radius: 3px; background: #F0ECFB; overflow: hidden; margin-bottom: 3px; }
.duobar i { display: block; height: 100%; border-radius: 3px; }
.duobar .b1 { background: linear-gradient(90deg, #B9A9F0, #6B5BB8); }
.duobar .b2 { background: linear-gradient(90deg, #8FD8B4, #2BAE66); }
.legend { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; }
.legend.b1 { background: #6B5BB8; }
.legend.b2 { background: #2BAE66; }

.mrow {
  display: flex; gap: 10px; background: #fff; border: 1px solid var(--strip-b);
  border-radius: 12px; padding: 11px 12px; margin-bottom: 8px;
}
.mrow.now { border-color: #9C8CE0; box-shadow: 0 3px 12px rgba(107, 91, 184, .13); }
.mrow .mm { font-size: 11px; font-weight: 800; color: #4A3690; flex: 0 0 52px; line-height: 1.4; white-space: nowrap; }
.mrow .mg {
  font-size: 15px; font-weight: 900; color: #4A3690; flex: 0 0 40px;
  letter-spacing: 1px; text-align: center;
}
.mrow .body { flex: 1; min-width: 0; }
.mrow .mt { font-size: 12px; font-weight: 800; color: #3B2E63; margin-bottom: 3px; }
.mrow .md { font-size: 10.5px; color: #8578B8; line-height: 1.6; margin-bottom: 6px; }
.mrow .macts { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mrow .macts .chip { font-size: 10px; padding: 3px 8px; font-weight: 600; }

/* ---------------- 家长端 ---------------- */
.pcard { background: #fff; border-radius: var(--r); padding: 16px; box-shadow: var(--sh); margin-bottom: 12px; }
.prow {
  display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer;
}
.prow + .prow { border-top: 1px solid var(--line); }
.prow .pi { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: var(--theme-s);
  display: flex; align-items: center; justify-content: center; font-size: 17px; }
.prow .pt { font-size: 14px; font-weight: 700; }
.prow .pd { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.prow .pg2 { font-size: 17px; color: #C6D0DA; }

.switch {
  width: 46px; height: 27px; border-radius: 14px; background: #DCE3EA; position: relative;
  cursor: pointer; transition: .2s; flex: 0 0 46px;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); transition: .2s;
}
.switch.on { background: var(--ok); }
.switch.on::after { left: 22px; }

/* 底部弹层 */
.sheet-mask {
  position: absolute; inset: 0; background: rgba(18, 26, 38, .42); z-index: 100;
  display: flex; align-items: flex-end; animation: fade .2s ease; backdrop-filter: blur(2px);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  width: 100%; background: #fff; border-radius: 24px 24px 0 0; padding: 20px 18px 24px;
  max-height: 88%; overflow-y: auto; animation: up .28s cubic-bezier(.2, .9, .3, 1);
}
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
.sheet.modal {
  border-radius: 22px; margin: auto; width: 88%; max-width: 340px;
  animation: zoom .24s cubic-bezier(.2, .9, .3, 1);
}
.sheet-mask.mid { align-items: center; }
@keyframes zoom { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet .sh-t { font-size: 18px; font-weight: 900; margin-bottom: 4px; }
.sheet .sh-d { font-size: 11.5px; color: var(--ink-3); margin-bottom: 17px; line-height: 1.6; }

.field { margin-bottom: 15px; }
.field .fl { font-size: 12.5px; font-weight: 800; margin-bottom: 8px; display: flex; gap: 5px; align-items: baseline; }
.field .fl em { font-style: normal; font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
.field input, .field select {
  width: 100%; height: 46px; border-radius: 13px; border: 1.4px solid var(--line);
  background: #fff; padding: 0 14px; font-size: 14.5px; font-family: var(--f);
  color: var(--ink); outline: none; font-weight: 600;
}
.field input:focus, .field select:focus { border-color: var(--theme); box-shadow: 0 0 0 3px var(--theme-xs); }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%238695A6' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }

.avpick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avpick .ap {
  aspect-ratio: 1; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 21px; background: #F7FAFD; border: 1.6px solid transparent; cursor: pointer;
}
.avpick .ap.on { border-color: var(--theme); background: var(--theme-xs); transform: scale(1.05); }

.colpick { display: flex; gap: 12px; justify-content: space-between; }
.colpick .cp2 {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 0 0 1.4px var(--line);
}
.colpick .cp2.on { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.1); }

/* 锁定页 */
.lock {
  min-height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 30px 22px; color: #E8EEF6;
}
.lock .li { font-size: 66px; margin-bottom: 20px; }
.lock h2 { font-size: 22px; font-weight: 900; margin-bottom: 10px; }
.lock p { font-size: 13px; opacity: .78; line-height: 1.85; margin-bottom: 26px; }
.lock .btn { margin-bottom: 10px; }

/* 侧栏说明 */
.side { width: 320px; flex: 0 0 320px; padding-top: 6px; }
.side .sc2 {
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px); border-radius: 20px;
  padding: 18px; box-shadow: 0 8px 30px rgba(25, 40, 60, .08); margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, .9);
}
.side h3 { font-size: 15px; font-weight: 900; margin-bottom: 4px; }
.side .lead { font-size: 11.5px; color: var(--ink-3); line-height: 1.7; margin-bottom: 13px; }
.layer { display: flex; gap: 10px; padding: 9px 0; }
.layer + .layer { border-top: 1px dashed #E4EAF1; }
.layer .lic { font-size: 18px; }
.layer .lt { font-size: 12.5px; font-weight: 800; }
.layer .ld { font-size: 10.5px; color: var(--ink-3); line-height: 1.6; margin-top: 2px; }
.side .principle {
  background: #EEF7F0; border-left: 3px solid var(--ok); border-radius: 10px;
  padding: 11px 12px; font-size: 11px; line-height: 1.75; color: #2C6B45;
}
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.jump button {
  height: 27px; padding: 0 10px; border-radius: 8px; border: 1px solid #E1E8F0;
  background: #fff; font-size: 11px; font-weight: 700; color: var(--ink-2); cursor: pointer;
  font-family: var(--f);
}
.jump button:hover { border-color: var(--theme); color: var(--theme); }

/* ===========================================================
   小宠物 · 陪伴层（认领 / 零食 / 两本小账）
   =========================================================== */

/* 启动页孩子卡上的宠物行 */
.kid .petline { font-size: 10px !important; color: var(--theme-d); margin-top: 3px; }

/* 首页宠物条 */
.petbar {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.4px solid var(--theme-s); border-radius: var(--r);
  padding: 12px 14px; margin-bottom: 12px; cursor: pointer; box-shadow: var(--sh);
  transition: transform .12s;
}
.petbar:active { transform: scale(.99); }
.petbar .pe {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 15px;
  background: var(--theme-s); display: flex; align-items: center; justify-content: center;
  font-size: 23px;
}
.petbar .pn { font-size: 13.5px; font-weight: 800; }
.petbar .ps { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.petbar .pb { font-size: 13px; font-weight: 800; color: var(--ink-3); flex: 0 0 auto; }

/* 认领页 */
.adopthero { text-align: center; padding: 6px 0 14px; }
.adopthero .ah-e { font-size: 74px; line-height: 1.15; display: inline-block; animation: petfloat 3.4s ease-in-out infinite; }
.adopthero .ah-t { font-size: 15px; font-weight: 800; margin-top: 4px; }
.adopthero .ah-d { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; padding: 0 26px; line-height: 1.7; }
@keyframes petfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.petgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.petpick {
  background: #fff; border: 1.6px solid var(--line); border-radius: var(--r-s);
  padding: 12px 6px 10px; text-align: center; cursor: pointer; transition: .16s;
}
.petpick .pp-e { font-size: 30px; line-height: 1.2; }
.petpick .pp-n { font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-top: 3px; }
.petpick.on { border-color: var(--theme); background: var(--theme-xs); box-shadow: 0 0 0 3px var(--theme-s); }
.petpick.on .pp-n { color: var(--theme-d); }

/* 惊喜蛋 */
.card.egg {
  text-align: center; margin-bottom: 12px;
  background: linear-gradient(180deg, #FFFCF2, #FFF7E6);
  border-color: #F3E2BE; cursor: pointer;
}
.eggidle { padding: 6px 0; }
.egg-e {
  font-size: 38px; line-height: 1.2;
  animation: eggshake 2.6s ease-in-out infinite;
}
.card.egg:active .egg-e { transform: scale(.94); }
@keyframes eggshake {
  0%, 72%, 100% { transform: rotate(0); }
  78% { transform: rotate(-11deg) scale(1.06); }
  85% { transform: rotate(11deg) scale(1.06); }
  92% { transform: rotate(-6deg) scale(1.03); }
}
.egg-e.big {
  font-size: 48px; flex: 0 0 62px; animation: none;
  display: flex; align-items: center; justify-content: center;
}
.egg-t { font-size: 13.5px; font-weight: 800; margin-top: 3px; }
.egg-d { font-size: 11px; color: var(--ink-3); margin-top: 4px; line-height: 1.7; }
.egg-tip {
  font-size: 11px; color: #A66F1C; background: #FFF0D0;
  border-radius: 10px; padding: 7px 12px; margin-top: 7px;
}
.eggtop { display: flex; align-items: center; text-align: left; margin-bottom: 10px; }
.eggtop .egg-t { margin-top: 0; }
.eggtop .grow { flex: 1; }
.eggrow { display: flex; gap: 8px; }
.eggrow .btn { flex: 1; }

#petName {
  width: 100%; height: 44px; border-radius: 14px; border: 1.4px solid var(--line);
  background: #F6F9FC; padding: 0 15px; font-size: 14px; font-family: var(--f);
  color: var(--ink); outline: none;
}
#petName:focus { border-color: var(--theme); background: #fff; }

/* 宠物页 */
.petstage { text-align: center; padding: 4px 0 16px; }
.petbig {
  font-size: 84px; line-height: 1.15; display: inline-block;
  animation: petfloat 4.2s ease-in-out infinite;
}
.petbig.cheer { animation: petcheer .45s ease 3; }
@keyframes petcheer {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.16) rotate(-5deg); }
  70% { transform: scale(1.1) rotate(5deg); }
}
.petname { font-size: 18px; font-weight: 800; margin-top: 5px; }
.pettrait { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; padding: 0 24px; line-height: 1.7; }
.petsay {
  display: inline-block; margin-top: 11px; background: var(--theme-s); color: var(--theme-d);
  border-radius: 14px; padding: 10px 15px; font-size: 12.5px; font-weight: 700; line-height: 1.7;
  animation: pop .3s ease;
}

.petflash {
  border-radius: 12px; padding: 11px 14px; font-size: 12.5px; font-weight: 700;
  margin-bottom: 12px; line-height: 1.7;
  background: #E7F8EF; color: #1E7A4C; border: 1px solid #C7EDD8;
}
.petflash.bad { background: #FFF7E6; color: #8A5A12; border: 1px solid #F5E3BE; }

/* 两本小账 */
.walle { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.walle .we {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: var(--theme-s);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.walle .wn { font-size: 13px; font-weight: 700; }
.walle .wn b { font-size: 15px; color: var(--theme); margin-left: 2px; }
.walle .wd { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

/* 零食架 */
.shelf {
  background: #fff; border-radius: var(--r); padding: 14px 15px;
  box-shadow: var(--sh); margin-bottom: 12px; border: 1.4px solid var(--warm-line);
}
.shelf .shhd { font-size: 12.5px; font-weight: 800; color: var(--warm-d); }
.snackrow { display: flex; align-items: center; gap: 10px; padding: 11px 0; }
.snackrow + .snackrow { border-top: 1px dashed var(--line); }
.snackrow .se {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: var(--warm-s);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.snackrow .sn { font-size: 13px; font-weight: 700; }
.snackrow .sp { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.snackrow .btn { flex: 0 0 auto; }
.favtag {
  font-size: 9.5px; background: #FFF3D6; color: #A66F1C; border-radius: 6px;
  padding: 1px 5px; font-weight: 800; white-space: nowrap;
}

@media (max-width: 1080px) { .side { display: none; } }
@media (max-width: 440px) {
  body { padding: 0; }
  .phone { width: 100vw; height: 100vh; border-radius: 0; box-shadow: none; }
  .notch { display: none; }
}

/* ===========================================================
   成长档案 · 可迁移
   =========================================================== */
.arcflash {
  border-radius: var(--r-s); padding: 11px 13px; margin-bottom: 12px;
  font-size: 12px; line-height: 1.7; font-weight: 600;
}
.arcflash.ok { background: #E7F8EF; color: #1E7A4C; border: 1px solid #C7EDD8; }
.arcflash.bad { background: #FDECEC; color: #A32D2D; border: 1px solid #F6D2D2; }

.arcli { display: flex; gap: 10px; padding: 9px 0; }
.arcli + .arcli { border-top: 1px dashed var(--line); }
.arcli .arci { font-size: 17px; flex: 0 0 auto; line-height: 1.3; }
.arcli .arct { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.arcli .arcd { font-size: 11px; color: var(--ink-3); line-height: 1.6; margin-top: 2px; }

.arcgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.arcstat { text-align: center; background: #F6F9FC; border-radius: var(--r-s); padding: 10px 4px; }
.arcstat .an { font-size: 18px; font-weight: 800; color: var(--theme-d); line-height: 1.2; }
.arcstat .al { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }

.arcbox {
  width: 100%; min-height: 84px; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 10px 11px; font-size: 11px; line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-2); background: #FBFDFF; outline: none;
}
.arcbox:focus { border-color: var(--theme); }

/* ===== AI 对话：思考中的气泡 / AI 标记 ===== */
.bubble.thinking { display: flex; align-items: center; gap: 5px; min-height: 20px; }
.bubble.thinking .who { margin-right: 2px; }
.bubble.thinking .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
  animation: aidot 1.1s infinite ease-in-out;
}
.bubble.thinking .dot:nth-child(3) { animation-delay: .16s; }
.bubble.thinking .dot:nth-child(4) { animation-delay: .32s; }
@keyframes aidot {
  0%, 70%, 100% { opacity: .28; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-3px); }
}
.aibadge {
  display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 20px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .2px;
  background: var(--theme-xs); color: var(--theme); vertical-align: 1px;
}

/* ===== 家长中心 · AI 设置卡 ===== */
.aistate {
  background: #F4F7FA; border-radius: 12px; padding: 10px 12px;
  font-size: 12px; font-weight: 700; color: var(--ink-3); line-height: 1.7;
}
.aistate.ok { background: #EFF8F2; color: #1E7A4C; }
.aistate.warn { background: #FFF6E8; color: #A9661A; }
.aitest {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  font-size: 12px; font-weight: 700; line-height: 1.75; word-break: break-all;
  background: #F4F7FA; color: var(--ink-2);
}
.aitest.ok { background: #EFF8F2; color: #1E7A4C; }
.aitest.bad { background: #FDF0F0; color: #B3352F; }
/* ===== 全局轻提示（保存成功之类）=====
   以前改完档案没有任何反馈，家长会当成「改了没生效」。任何屏都浮在底部。 */
.toast {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 92px; z-index: 95;
  max-width: 300px; padding: 10px 16px; border-radius: 12px;
  background: rgba(24, 33, 46, .93); color: #fff;
  font-size: 12.5px; font-weight: 700; line-height: 1.6; text-align: center;
  box-shadow: 0 12px 28px rgba(15, 24, 36, .3); animation: toastIn .18s ease;
}
.toast.bad { background: rgba(180, 52, 52, .95); }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ===== 「页面有新版本」提示条 =====
   静态托管 + 浏览器缓存，很容易让人对着旧代码找 bug。见 app.js 里的 checkBuild()。 */
.newver {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 98;
  padding: 11px 17px; border-radius: 24px; cursor: pointer;
  background: rgba(24, 33, 46, .95); color: #fff;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(15, 24, 36, .34); animation: toastIn .2s ease;
}
.newver b { color: #8FD0FF; }
.newver:active { transform: translate(-50%, 1px); }

/* ===== v10（2026-10-13）：真插图上舞台（百科图 / AI 当场画的） ===== */
.genstage .realillu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.genstage .genload {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); z-index: 4;
  background: rgba(255,255,255,.94); border-radius: 999px; padding: 7px 13px;
  font-size: 12px; color: #5b6b82; box-shadow: 0 2px 12px rgba(40,60,90,.14); white-space: nowrap;
}
/* 「看动画」档：真插图缓缓推拉镜头（替代 emoji 动画片） */
.genstage .kenburns { animation: kbzoom 14s ease-in-out infinite alternate; will-change: transform; }
@keyframes kbzoom { from { transform: scale(1) translate(0,0); } to { transform: scale(1.13) translate(-2%,-2%); } }