/* ============================================================
   幼升小预习打卡 · 样式（卡通风 · 手机优先）
   ------------------------------------------------------------
   配色都是柔和的奶油色系，不刺眼；按钮都很大，方便小手点。
   ============================================================ */

:root {
  --cream: #FFF2F6;
  --cream2: #FFE8F0;
  --mint: #DFF3E6;
  --sky: #E8F1FF;
  --pink: #FFE1EC;
  --lilac: #F1E8FF;
  --ink: #5B4B3A;
  --ink2: #7A6A58;
  --sub: #A08C99;
  --line: #F8E3ED;
  --orange: #F5A623;
  --orange-d: #D98A0B;
  --green: #7FC8A0;
  --green-d: #63AE86;
  --blue: #7FB6E8;
  --blue-d: #5C99D1;
  --pink-d: #EF9BB0;
  --purple: #B39DDB;
  --shadow: 0 6px 0 rgba(233, 197, 215, .55);
  --radius: 24px;
  --nav-h: 76px;
}

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

html, body { margin: 0; padding: 0; }

body {
  background: linear-gradient(180deg, #FFF7FB 0%, #FFEDF5 38%, #FFE1EE 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.6;
  font-family: "Yuanti SC", "STYuanti", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

/* 背景上的小云朵，纯装饰 */
body::before, body::after {
  content: "☁️";
  position: fixed;
  font-size: 46px;
  opacity: .5;
  pointer-events: none;
  animation: float 7s ease-in-out infinite;
  z-index: 0;
}
body::before { top: 6%; left: 1%; opacity: .38; }
body::after { top: 17%; right: 1%; animation-delay: 1.4s; font-size: 30px; content: "⭐"; opacity: .38; }
@keyframes float {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-12px) }
}

.app {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 14px calc(var(--nav-h) + 28px);
}

/* ---------- 顶部小标题 ---------- */
.top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px 6px;
}
.top .t-emo { font-size: 30px; }
.top h1 { font-size: 20px; margin: 0; letter-spacing: .5px; }
.top .t-sub { font-size: 13px; color: var(--sub); }

/* ---------- 小熊对话 ---------- */
.mascot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 2px 14px;
}
.m-emo { font-size: 40px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-5px) rotate(2deg)} }
.m-bubble {
  position: relative;
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 18px;
  padding: 10px 14px;
  font-size: 16px;
  box-shadow: 0 4px 0 rgba(214,197,173,.35);
}
.m-bubble::after {
  content: "";
  position: absolute; left: -9px; top: 50%;
  width: 14px; height: 14px; background: #fff;
  border-left: 3px solid var(--line); border-bottom: 3px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}

/* ---------- 通用卡片 / 按钮 ---------- */
.card {
  background: #fff;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.sec-title {
  font-size: 15px;
  color: var(--sub);
  margin: 18px 6px 10px;
  font-weight: 700;
}
.note {
  font-size: 13px;
  color: var(--sub);
  margin: 14px 6px;
  line-height: 1.7;
}
.tiny { font-size: 12px; color: var(--sub); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 20px;
  background: var(--orange);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 20px;
  box-shadow: 0 6px 0 var(--orange-d);
  transition: transform .08s ease, box-shadow .08s ease;
  cursor: pointer;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--orange-d); }
.btn-big { width: 100%; margin: 10px 0; min-height: 66px; font-size: 19px; }
.btn-ghost {
  background: #fff; color: var(--ink2);
  border: 3px solid var(--line);
  box-shadow: 0 6px 0 rgba(214,197,173,.45);
}
.btn-ghost:active { box-shadow: 0 2px 0 rgba(214,197,173,.45); }
.btn-done { background: var(--green); box-shadow: 0 6px 0 var(--green-d); }
.btn-done:active { box-shadow: 0 2px 0 var(--green-d); }
.mini {
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink2);
  border-radius: 14px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.mini.on { background: var(--green); color: #fff; border-color: var(--green); }

/* 音色预设按钮 */
.preset-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
.preset {
  border: 3px solid var(--line); background: #fff; border-radius: 18px;
  padding: 10px 4px; font-family: inherit; font-size: 14px; color: var(--ink);
  cursor: pointer; line-height: 1.35; box-shadow: 0 4px 0 rgba(233,197,215,.5);
}
.preset span { font-size: 11px; color: var(--sub); }
.preset.on { background: linear-gradient(180deg, #FFF6E4, #FFEACB); border-color: #F7D9A0; font-weight: 700; }
.preset:active { transform: translateY(3px); }
.row2 { display: flex; gap: 10px; }
.row2 .btn { flex: 1; }

.back {
  border: none; background: #fff; color: var(--ink2);
  border: 3px solid var(--line);
  border-radius: 16px; padding: 9px 16px; font-family: inherit;
  font-size: 15px; margin: 4px 0 10px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(214,197,173,.4);
}
.lesson-title { font-size: 21px; font-weight: 700; margin: 6px 4px 14px; }

/* ---------- 首页 ---------- */
.today-card {
  background: linear-gradient(160deg, #FFE9B8, #FFD98A);
  border: 3px solid #FFCF75;
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 8px 0 #EFC26A;
  text-align: center;
  margin-bottom: 8px;
}
.tc-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tc-emo { font-size: 30px; }
.tc-big { font-size: 42px; font-weight: 800; color: #8A6410; }
.tc-lbl { font-size: 15px; color: #A3792A; }
.tc-sub { font-size: 14px; color: #A3792A; margin-top: 2px; }
.tc-bar {
  height: 14px; background: rgba(255,255,255,.65); border-radius: 999px;
  margin: 12px 4px 8px; overflow: hidden;
}
.tc-bar i { display: block; height: 100%; background: var(--orange); border-radius: 999px; transition: width .4s ease; }
.tc-hint { font-size: 14px; color: #8A6410; }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wday {
  background: #fff; border: 3px solid var(--line); border-radius: 16px;
  text-align: center; padding: 8px 2px; font-size: 13px; color: var(--sub);
}
.wday.on { background: var(--mint); border-color: #BFE3CF; color: var(--ink); }
.wday.now { border-color: var(--orange); }
.wd-t { display: block; font-size: 12px; }
.wd-s { display: block; font-size: 16px; }
.wd-n { display: block; font-size: 11px; color: var(--sub); }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-mod {
  border: 3px solid #fff; border-radius: 24px; padding: 16px 12px;
  font-family: inherit; color: var(--ink); text-align: center; cursor: pointer;
  box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.home-mod:active { transform: translateY(3px); }
.hm-emo { font-size: 34px; }
.home-mod b { font-size: 18px; }
.home-mod i { font-style: normal; font-size: 12px; color: var(--ink2); }
.c1 { background: var(--pink); } .c2 { background: var(--mint); }
.c3 { background: var(--sky); }  .c4 { background: var(--cream2); }
.c5 { background: var(--lilac); } .c6 { background: #FFE9D6; }
.c7 { background: #FFE6DC; }

/* ---------- 绘本 ---------- */
.book-head { font-size: 20px; font-weight: 700; margin: 4px 4px 12px; }
.book-page {
  background: linear-gradient(180deg, #FFFDF8, #FFF2F7);
  border: 4px solid #FBD9E6; border-radius: 30px;
  padding: 22px 16px; text-align: center; box-shadow: 0 8px 0 #F3D3E1;
  margin-bottom: 14px; min-height: 300px;
  display: flex; flex-direction: column; justify-content: center;
}
.bk-emo { font-size: 88px; line-height: 1.1; animation: bob 3s ease-in-out infinite; }
.bk-zh {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
  font-size: 28px; margin-top: 10px; color: #4A3B2C;
}
.bk-en { font-size: 20px; color: var(--blue-d); margin-top: 6px; }
.book-say { display: flex; gap: 10px; }
.book-say .btn { flex: 1; }
.book-nav { display: flex; gap: 10px; }
.book-nav .btn { flex: 1; }
.book-nav .btn[disabled] { opacity: .4; }
.book-dots { text-align: center; margin: 10px 0 4px; }
.book-dots .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #F0D9E4; margin: 0 4px;
}
.book-dots .dot.on { background: var(--orange); transform: scale(1.25); }

.big-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  border: 3px solid #fff; border-radius: 26px; padding: 18px;
  margin-bottom: 14px; font-family: inherit; color: var(--ink);
  box-shadow: var(--shadow); cursor: pointer; text-align: left;
}
.big-card:active { transform: translateY(3px); }
.bc-emo { font-size: 40px; }
.bc-txt { flex: 1; display: flex; flex-direction: column; }
.bc-txt b { font-size: 20px; }
.bc-txt i { font-style: normal; font-size: 13px; color: var(--ink2); }
.bc-go { font-size: 20px; color: var(--sub); }

/* ---------- 列表行（课次、主题） ---------- */
.row-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: #fff; border: 3px solid var(--line); border-radius: 22px;
  padding: 14px; margin-bottom: 10px; font-family: inherit; color: var(--ink);
  box-shadow: 0 5px 0 rgba(214,197,173,.4); cursor: pointer; text-align: left;
}
.row-card:active { transform: translateY(3px); }
.row-card.done { background: #F4FBF6; border-color: #CFE9DA; }
.rc-emo { font-size: 30px; }
.rc-main { flex: 1; display: flex; flex-direction: column; }
.rc-main b { font-size: 17px; }
.rc-main i { font-style: normal; font-size: 12px; color: var(--sub); }
.rc-go { font-size: 13px; color: var(--orange); font-weight: 700; white-space: nowrap; }

/* ---------- 识字卡 ---------- */
.zcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zcard {
  background: #fff; border: 3px solid var(--line); border-radius: 24px;
  padding: 12px; text-align: center; cursor: pointer;
  box-shadow: 0 6px 0 rgba(214,197,173,.4);
}
.zcard:active { transform: translateY(4px); }
.z-emo { font-size: 30px; }
.z-big {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "Kaiti", serif;
  font-size: 62px; line-height: 1.1; font-weight: 700; color: #4A3B2C;
}
.z-py { font-size: 17px; color: var(--blue-d); letter-spacing: 1px; }
.z-w { font-size: 14px; color: var(--ink2); }
.z-d { font-size: 13px; color: var(--sub); margin-top: 2px; }
.z-say { font-size: 12px; color: var(--orange); margin-top: 6px; }

/* ---------- 古诗 ---------- */
.poem-card {
  background: linear-gradient(180deg, #FFFDF6, #FFF4E2);
  border: 3px solid #F3E3C8; border-radius: 28px; padding: 18px;
  box-shadow: 0 8px 0 #EFE0C6; margin-bottom: 14px;
}
.poem-title { font-size: 23px; font-weight: 700; text-align: center; }
.poem-author { text-align: center; font-size: 14px; color: var(--sub); margin-bottom: 12px; }
.poem-lines {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
  font-size: 27px; line-height: 2.1; text-align: center;
}
.pline { border-radius: 14px; padding: 2px 8px; transition: background .2s; }
.pline.on { background: #FFE7A8; }
.poem-btns { display: flex; gap: 10px; margin: 8px 0 4px; }
.poem-btns .btn { flex: 1; }
.poem-plain, .poem-words {
  background: #fff; border: 3px solid var(--line); border-radius: 22px;
  padding: 14px; margin-top: 12px; font-size: 16px; line-height: 1.9;
}
.chip {
  display: inline-block; background: var(--cream); border-radius: 999px;
  padding: 4px 12px; margin: 4px 6px 0 0; font-size: 14px; cursor: pointer;
}

/* ---------- 拼音卡 ---------- */
.pygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pycard {
  background: #fff; border: 3px solid var(--line); border-radius: 22px;
  padding: 12px 6px; text-align: center; cursor: pointer;
  box-shadow: 0 5px 0 rgba(214,197,173,.4);
}
.pycard:active { transform: translateY(4px); }
.py-emo { font-size: 24px; }
.py-big { font-size: 26px; font-weight: 700; color: var(--blue-d); letter-spacing: 1px; }
.py-hint { font-size: 11px; color: var(--sub); line-height: 1.4; margin-top: 2px; }

/* ---------- 英语卡 ---------- */
.wcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wcard {
  background: #fff; border: 3px solid var(--line); border-radius: 24px;
  padding: 14px 8px; text-align: center; cursor: pointer;
  box-shadow: 0 6px 0 rgba(214,197,173,.4);
}
.wcard:active { transform: translateY(4px); }
.w-emo { font-size: 40px; }
.w-en { font-size: 20px; font-weight: 700; color: var(--blue-d); }
.w-zh { font-size: 14px; color: var(--ink2); }

/* ---------- 答题 ---------- */
.quiz-top { text-align: center; font-size: 14px; color: var(--sub); margin: 6px 0 12px; }
.qcard {
  background: #fff; border: 3px solid var(--line); border-radius: 26px;
  padding: 20px 16px; text-align: center; box-shadow: var(--shadow); margin-bottom: 14px;
}
.q-emo { font-size: 38px; margin-bottom: 8px; }
.q-text { font-size: 21px; font-weight: 700; line-height: 1.6; }
.qcard .mini { margin-top: 12px; }
.opts { display: flex; flex-direction: column; gap: 12px; }
.opt {
  min-height: 74px; border: 3px solid var(--line); background: #fff;
  border-radius: 22px; font-family: inherit; font-size: 22px; font-weight: 700;
  color: var(--ink); box-shadow: 0 6px 0 rgba(214,197,173,.45);
  cursor: pointer; padding: 10px 16px;
}
.opt:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(214,197,173,.45); }
.opt.right {
  background: #D9F2E3; border-color: var(--green); color: #2F6B4C;
  animation: pop .4s ease;
}
.opt.wrong { background: #FFEEDC; border-color: #F0C08A; color: #A05C1A; }
@keyframes pop { 0%{transform:scale(1)} 45%{transform:scale(1.06)} 100%{transform:scale(1)} }
.quiz-prog { height: 12px; background: #fff; border: 3px solid var(--line); border-radius: 999px; margin-top: 18px; overflow: hidden; }
.quiz-prog i { display: block; height: 100%; background: var(--green); transition: width .3s ease; }

.quiz-done { text-align: center; padding: 30px 10px; }
.qd-emo { font-size: 72px; animation: pop .6s ease; }
.qd-stars { font-size: 38px; letter-spacing: 6px; }
.qd-t { font-size: 22px; font-weight: 700; margin-top: 6px; }
.qd-d { color: var(--ink2); margin: 10px 0 20px; line-height: 1.9; }

/* ---------- 闯关地图 ---------- */
.quest-bar { text-align: center; font-size: 15px; color: var(--ink2); margin-bottom: 12px; }
.quest-map { position: relative; }
.qnode {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: #fff; border: 3px solid var(--line); border-radius: 24px;
  padding: 14px; margin-bottom: 12px; font-family: inherit; color: var(--ink);
  box-shadow: var(--shadow); cursor: pointer; text-align: left;
}
.qnode:nth-child(odd) { margin-left: 0; }
.qnode:nth-child(even) { margin-left: 18px; }
.qnode:active { transform: translateY(3px); }
.qnode.done { background: #F4FBF6; border-color: #CFE9DA; }
.qnode.lock { opacity: .6; }
.qn-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.qn-emo { font-size: 32px; }
.qn-txt { display: flex; flex-direction: column; }
.qn-txt b { font-size: 17px; }
.qn-txt i { font-style: normal; font-size: 12px; color: var(--sub); }
.qn-right { font-size: 15px; color: var(--orange); font-weight: 700; white-space: nowrap; }

/* ---------- 勋章 ---------- */
.badge-head { text-align: center; font-size: 15px; color: var(--ink2); margin-bottom: 14px; }
.badge-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.badge {
  background: #fff; border: 3px solid var(--line); border-radius: 22px;
  padding: 12px 6px; text-align: center; opacity: .55;
  box-shadow: 0 5px 0 rgba(214,197,173,.4);
}
.badge.on { opacity: 1; background: linear-gradient(180deg, #FFFBEA, #FFF2CE); border-color: #F7DFA0; }
.b-emo { font-size: 34px; }
.b-name { font-size: 14px; font-weight: 700; }
.b-desc { font-size: 11px; color: var(--sub); line-height: 1.4; }

/* ---------- 家长页 / 周报 ---------- */
.line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 16px; }
.line input[type=text], .line input:not([type]), .line select {
  font-family: inherit; font-size: 16px; padding: 8px 12px; border-radius: 14px;
  border: 3px solid var(--line); color: var(--ink); background: #fff; max-width: 190px;
}
.line input[type=range] { width: 180px; }
.report {
  background: #fff; border: 3px solid var(--line); border-radius: 26px;
  padding: 18px; box-shadow: var(--shadow);
}
.rp-title { font-size: 20px; font-weight: 700; text-align: center; }
.rp-range { text-align: center; font-size: 13px; color: var(--sub); margin-bottom: 10px; }
.rp-stars { text-align: center; font-size: 17px; margin-bottom: 14px; }
.rp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.rp-day {
  background: var(--cream); border-radius: 14px; text-align: center; padding: 8px 2px;
  font-size: 12px; color: var(--sub);
}
.rp-day.on { background: var(--mint); color: var(--ink); }
.rp-day b { display: block; font-size: 12px; }
.rp-mods { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.rp-mod {
  background: var(--sky); border-radius: 16px; padding: 10px 14px; text-align: center; min-width: 74px;
}
.rp-mod b { display: block; font-size: 20px; }
.rp-mod span { font-size: 12px; color: var(--ink2); }
.rp-empty { font-size: 14px; color: var(--sub); }
.rp-wrong { background: var(--pink); border-radius: 18px; padding: 12px; font-size: 14px; margin-top: 12px; }
.rp-w { color: var(--ink2); font-size: 13px; margin-top: 4px; }
.rp-foot { text-align: center; font-size: 12px; color: var(--sub); margin-top: 12px; }

.wrong-card {
  background: #fff; border: 3px solid var(--line); border-radius: 22px;
  padding: 14px; margin-bottom: 12px; box-shadow: 0 5px 0 rgba(214,197,173,.4);
}
.wc-q { font-size: 17px; font-weight: 700; }
.wc-a { font-size: 15px; color: var(--green-d); margin-top: 6px; }
.wc-t { font-size: 14px; color: var(--ink2); }
.wc-d { font-size: 12px; color: var(--sub); margin-top: 8px; display: flex; justify-content: space-between; align-items: center; }

/* ---------- 底部导航 ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-top: 3px solid var(--line);
  display: flex;
}
.nav-item {
  flex: 1; border: none; background: none; font-family: inherit;
  color: var(--sub); font-size: 12px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 6px 0;
}
.nav-item span { font-size: 26px; line-height: 1; }
.nav-item.on { color: var(--orange); font-weight: 700; }
.nav-item.on span { transform: translateY(-2px) scale(1.1); }

/* ---------- 动画 ---------- */
.cheer {
  position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%);
  font-size: 34px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #FFC46B, #F59F3C);
  padding: 14px 28px; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(240,160,60,.5);
  z-index: 60; animation: cheerIn .5s cubic-bezier(.2,1.6,.4,1);
  white-space: nowrap;
}
.cheer.out { animation: cheerOut .5s ease forwards; }
@keyframes cheerIn { 0%{transform:translate(-50%,-50%) scale(.4); opacity:0} 100%{transform:translate(-50%,-50%) scale(1); opacity:1} }
@keyframes cheerOut { to { transform: translate(-50%,-90%) scale(.9); opacity: 0 } }
.confetti {
  position: fixed; top: 30%; z-index: 59; pointer-events: none;
  animation: fall 1.5s ease-in forwards;
}
@keyframes fall {
  0% { transform: translateY(0) rotate(0); opacity: 1 }
  100% { transform: translateY(60vh) rotate(320deg); opacity: 0 }
}

.badge-pop {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgba(90,70,50,.28); animation: fadeIn .25s ease;
}
.badge-pop.out { opacity: 0; transition: opacity .5s; }
.bp-card {
  background: linear-gradient(180deg, #FFFDF3, #FFEFC9);
  border: 5px solid #FBDD8E; border-radius: 32px; padding: 26px 34px; text-align: center;
  box-shadow: 0 14px 40px rgba(150,110,40,.35); animation: cheerIn .5s cubic-bezier(.2,1.6,.4,1);
}
.bp-emo { font-size: 74px; }
.bp-t { font-size: 15px; color: var(--sub); }
.bp-n { font-size: 26px; font-weight: 800; }
.bp-d { font-size: 14px; color: var(--ink2); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.eye-mask {
  position: fixed; inset: 0; z-index: 80; background: rgba(233,247,239,.96);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.eye-card { background: #fff; border: 5px solid #CFE9DA; border-radius: 32px; padding: 26px; text-align: center; max-width: 420px; }
.eye-emo { font-size: 70px; animation: bob 2s ease-in-out infinite; }
.eye-t { font-size: 24px; font-weight: 800; margin: 6px 0; }
.eye-d { font-size: 16px; color: var(--ink2); line-height: 1.9; margin-bottom: 18px; }

.img-mask {
  position: fixed; inset: 0; z-index: 80; background: rgba(90,70,50,.5);
  display: flex; align-items: center; justify-content: center; padding: 14px; overflow: auto;
}
.img-box { background: #fff; border-radius: 24px; padding: 14px; text-align: center; max-width: 100%; }
.ib-t { font-size: 13px; color: var(--sub); margin-bottom: 8px; }
.img-box img { width: 100%; max-width: 420px; border-radius: 16px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 22px);
  transform: translateX(-50%) translateY(10px);
  background: rgba(91,75,58,.95); color: #fff; font-size: 15px;
  padding: 11px 20px; border-radius: 999px; z-index: 90;
  opacity: 0; pointer-events: none; transition: all .25s ease; white-space: nowrap;
  max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 今日任务清单 ---------- */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: #fff; border: 3px solid var(--line); border-radius: 20px;
  padding: 12px 14px; font-family: inherit; color: var(--ink);
  box-shadow: 0 4px 0 rgba(233,197,215,.5); cursor: pointer; text-align: left;
}
.task:active { transform: translateY(3px); }
.task.done { background: #F3FBF6; border-color: #CFE9DA; }
.tk-box { font-size: 22px; }
.tk-name { flex: 1; font-size: 16px; }
.tk-go { font-size: 13px; color: var(--orange); font-weight: 700; white-space: nowrap; }
.task.done .tk-go { color: var(--green-d); }
.task-prog { text-align: center; font-size: 14px; color: var(--ink2); margin: 10px 0 2px; }
.zi-stat { text-align: center; font-size: 14px; color: var(--ink2); margin: 2px 0 8px; }

/* 古诗打卡步骤提示 */
.step-hint {
  background: #FFF3E4; border: 3px dashed #F3D3A6; border-radius: 18px;
  padding: 10px 14px; font-size: 15px; color: #9A6B2A; text-align: center; margin: 10px 0;
}
.step-hint.ok { background: #EAF8F0; border-color: #BFE3CF; color: #2F6B4C; }

/* ---------- 打卡日历 ---------- */
.cal-head { text-align: center; font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: 12px; color: var(--sub); margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cday {
  position: relative; aspect-ratio: 1; border: 2px solid var(--line); background: #fff;
  border-radius: 12px; font-family: inherit; font-size: 15px; color: var(--ink2);
  cursor: pointer; padding: 0;
}
.cday.empty { border: none; background: none; }
.cday.on { background: var(--mint); border-color: #BFE3CF; color: #2F6B4C; font-weight: 700; }
.cday.on i { position: absolute; right: 3px; top: 1px; font-size: 11px; font-style: normal; color: var(--green-d); }
.cday.now { border-color: var(--orange); border-width: 3px; }
.cal-foot { text-align: center; font-size: 12px; color: var(--sub); margin-top: 10px; }

/* ---------- 历史记录 ---------- */
.hist-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 2px dashed var(--line); font-size: 14px;
}
.hist-row:last-child { border-bottom: none; }
.hist-row b { width: 74px; color: var(--ink2); font-size: 14px; }
.hist-stars { font-size: 13px; }
.hist-mods { margin-left: auto; font-size: 12px; color: var(--sub); text-align: right; }

.btn-danger { background: #FFE3E3; color: #C0504A; box-shadow: 0 6px 0 #F3C9C9; }
.btn-danger:active { box-shadow: 0 2px 0 #F3C9C9; }

/* 微信里打开的提醒条 */
.warn-bar {
  background: #FFF3E4; border: 3px dashed #F3C58A; border-radius: 20px;
  padding: 12px 14px; font-size: 15px; color: #9A6B2A;
  line-height: 1.7; margin-bottom: 12px;
}

/* ---------- 打印 ---------- */
#printArea { display: none; }

@media print {
  body { background: #fff !important; }
  body::before, body::after { display: none !important; }
  .app, .nav, .toast, #toast, .eye-mask, .badge-pop, .img-mask, .cheer, .confetti { display: none !important; }
  #printArea { display: block !important; padding: 12mm; color: #000; }
  #printArea h1 { font-size: 22pt; text-align: center; margin: 0 0 6pt; }
  #printArea .p-sub { text-align: center; font-size: 11pt; color: #444; margin-bottom: 14pt; }
  #printArea .p-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6mm; }
  #printArea .p-zi, #printArea .p-word {
    border: 1px dashed #bbb; border-radius: 6pt; padding: 4mm 2mm; text-align: center;
  }
  #printArea .p-py { font-size: 11pt; color: #333; }
  #printArea .p-big {
    font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
    font-size: 46pt; line-height: 1.15; color: #cfcfcf;
  }
  #printArea .p-box { height: 16mm; border: 1px dashed #ddd; border-radius: 4pt; margin-top: 2mm; }
  #printArea .p-math { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm 10mm; }
  #printArea .p-q { font-size: 15pt; letter-spacing: 1pt; }
  #printArea .p-poem { text-align: center; margin: 6mm 0; }
  #printArea .p-ptext {
    font-family: "Kaiti SC", "STKaiti", "KaiTi", serif; font-size: 20pt; line-height: 2.2;
  }
  #printArea .p-pbox { height: 12mm; border-bottom: 1px dashed #ccc; margin: 0 0 4mm; }
  #printArea .p-wemo { font-size: 24pt; }
  #printArea .p-wen { font-size: 15pt; font-weight: 700; }
  #printArea .p-wzh { font-size: 11pt; color: #444; }
}

/* 小屏适配：更小的手机也放得下 */
@media (max-width: 360px) {
  body { font-size: 17px; }
  .z-big { font-size: 52px; }
  .poem-lines { font-size: 23px; }
  .pygrid { grid-template-columns: repeat(2, 1fr); }
  .badge-grid { grid-template-columns: 1fr 1fr; }
}