:root {
  --bg: #f6f4ff;
  --card: #ffffff;
  --primary: #7c5cff;
  --primary-d: #6a48f0;
  --accent: #ff7eb6;
  --text: #2a2342;
  --muted: #8b86a3;
  --good: #34c77b;
  --shadow: 0 6px 20px rgba(124, 92, 255, 0.12);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg); color: var(--text); overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen { display: none; min-height: 100vh; padding: 18px; max-width: 720px; margin: 0 auto; }
.screen.active { display: block; animation: screenIn .34s var(--ease); }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
h1 { font-size: 26px; margin: 8px 0; }
h2 { font-size: 18px; margin: 22px 0 10px; }
h3 { font-size: 16px; margin: 18px 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.err { color: #e0566b; min-height: 20px; }

button { font-family: inherit; cursor: pointer; border: none; border-radius: 14px; font-size: 16px; }
.btn-primary {
  background: var(--primary); color: #fff; padding: 14px 18px; font-weight: 600;
  box-shadow: var(--shadow); transition: transform .12s var(--ease), background .15s, box-shadow .15s;
}
.btn-primary:hover { box-shadow: 0 10px 26px rgba(124,92,255,.28); }
.btn-primary:active { transform: scale(.94); background: var(--primary-d); }
.btn-primary:disabled { opacity: .55; }
.btn-primary.wide { width: 100%; margin: 24px 0 40px; }
.ghost { background: transparent; color: var(--primary); padding: 8px 10px; font-weight: 600; transition: transform .12s var(--ease); }
.ghost:active { transform: scale(.9); }
.ghost.award { font-size: 22px; }
@keyframes spin { to { transform: rotate(360deg); } }
.ghost.award.pop { animation: starSpin .6s var(--ease); }
@keyframes starSpin { 0%{transform:scale(1) rotate(0)} 50%{transform:scale(1.5) rotate(20deg)} 100%{transform:scale(1) rotate(0)} }

/* 登录 */
#screen-login { display: none; align-items: center; justify-content: center; }
#screen-login.active { display: flex; }
.login-card { background: var(--card); border-radius: 24px; padding: 34px 28px; text-align: center; box-shadow: var(--shadow); width: 100%; max-width: 340px; }
.logo { font-size: 40px; animation: floaty 3s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
#pin {
  width: 100%; text-align: center; letter-spacing: 10px; font-size: 28px; padding: 12px;
  border: 2px solid #e7e2ff; border-radius: 14px; margin: 14px 0; outline: none; transition: border-color .2s;
}
#pin:focus { border-color: var(--primary); }
#login-btn { width: 100%; }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }

/* 主页 */
.home-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 12px; }
.head-actions { display: flex; gap: 2px; }
.hi { font-size: 24px; font-weight: 700; }
.stats { display: flex; gap: 14px; margin: 16px 0; }
.stat { flex: 1; background: var(--card); border-radius: 18px; padding: 16px; text-align: center; box-shadow: var(--shadow); }
.big { font-size: 30px; font-weight: 800; color: var(--primary); display: inline-block; }
.big.bump { animation: bump .5s var(--ease); }
@keyframes bump { 0%{transform:scale(1)} 35%{transform:scale(1.25); color:var(--accent)} 100%{transform:scale(1)} }
.box-card { background: var(--card); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.box-card.celebrate { animation: boxCele .7s var(--ease); }
@keyframes boxCele { 0%{transform:scale(1)} 30%{transform:scale(1.04)} 60%{transform:scale(.99)} 100%{transform:scale(1)} }
.box-top { display: flex; justify-content: space-between; font-weight: 600; }
.bar { height: 14px; background: #eee7ff; border-radius: 10px; margin: 10px 0 6px; overflow: hidden; position: relative; }
.bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 10px; transition: width .7s var(--ease); position: relative; overflow: hidden; }
.bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-120%); animation: shimmer 2.2s infinite; }
@keyframes shimmer { 0%{transform:translateX(-120%)} 60%,100%{transform:translateX(320%)} }

.review-entry { width: 100%; text-align: left; background: var(--card); border-radius: 16px; padding: 14px 16px; margin: 12px 0 0; box-shadow: var(--shadow); font-weight: 700; color: var(--text); transition: transform .14s var(--ease); }
.review-entry:active { transform: scale(.98); }
.review-entry.has-due { background: linear-gradient(0deg, #fff6f9, #fff); }
.review-entry #review-count { font-weight: 600; color: var(--muted); font-size: 13px; }
.btn-primary.mini { padding: 8px 14px; font-size: 14px; }
/* 今日建议 */
.suggest-card { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: linear-gradient(135deg, #efeaff, #fff0f6); border-radius: 16px; padding: 14px 16px; margin: 14px 0 2px; box-shadow: var(--shadow); transition: transform .14s var(--ease); }
.suggest-card:active { transform: scale(.98); }
.suggest-card .sg-icon { font-size: 24px; }
.suggest-card .sg-text { flex: 1; font-weight: 700; color: var(--text); }
.suggest-card .sg-go { color: var(--primary); font-weight: 700; font-size: 14px; }

/* 成长树 */
#growth-body { padding-bottom: 40px; }
.profile-card { display: flex; gap: 8px; margin-bottom: 6px; }
.profile-row { flex: 1; background: var(--card); border-radius: 14px; padding: 12px 6px; text-align: center; box-shadow: var(--shadow); }
.profile-row b { display: block; font-size: 22px; color: var(--primary); }
.profile-row span { font-size: 11px; color: var(--muted); }
.season-card { background: linear-gradient(135deg, #fff1f6, #f3efff); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); margin-bottom: 8px; }
.season-top { font-weight: 800; margin-bottom: 10px; }
.day-dots { display: flex; gap: 8px; font-size: 22px; }
.day-dot { opacity: .8; }
.day-dot.on { transform: scale(1.05); }
.grow-sub { background: var(--card); border-radius: 16px; padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); }
.grow-sub-top { font-weight: 700; margin-bottom: 8px; }
.leaves { display: flex; flex-wrap: wrap; gap: 6px; font-size: 22px; }
.leaf { filter: grayscale(.4); opacity: .55; transition: transform .2s; }
.leaf.on { filter: none; opacity: 1; }
.mistake-card { background: var(--card); border-radius: 16px; padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); animation: tileIn .4s var(--ease) both; }
.mistake-card.due { background: linear-gradient(0deg, #fff6f9, #fff); }
.mistake-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mtopic { font-weight: 700; }
.due-tag { background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; }
.mistake-q { color: var(--text); line-height: 1.5; margin-bottom: 10px; }
.mistake-actions { display: flex; gap: 10px; align-items: center; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  background: var(--card); border-radius: 18px; padding: 18px; text-align: center;
  box-shadow: var(--shadow); font-weight: 600; color: var(--text);
  transition: transform .14s var(--ease), box-shadow .14s;
  animation: tileIn .45s var(--ease) both;
}
.tile:active { transform: scale(.93); box-shadow: 0 3px 10px rgba(124,92,255,.18); }
.tile-prog { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.tile .emoji { font-size: 30px; display: block; margin-bottom: 6px; transition: transform .14s var(--ease); }

/* 单元地图 */
#units-body { padding-bottom: 40px; }
.unit-term { font-weight: 800; color: var(--primary); margin: 16px 2px 8px; font-size: 15px; }
.unit-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border-radius: 16px; padding: 14px; margin-bottom: 10px;
  box-shadow: var(--shadow); color: var(--text); animation: tileIn .4s var(--ease) both;
  transition: transform .14s var(--ease);
}
.unit-row:active { transform: scale(.97); }
.unit-row.done { background: linear-gradient(0deg, #f1fff6, #fff); }
.unit-check { font-size: 22px; flex-shrink: 0; }
.unit-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.unit-name { font-weight: 700; font-size: 16px; }
.unit-points { font-size: 12px; color: var(--muted); }
.tile:active .emoji { transform: scale(1.25) rotate(-6deg); }
@keyframes tileIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.grid .tile:nth-child(1){animation-delay:.04s} .grid .tile:nth-child(2){animation-delay:.10s}
.grid .tile:nth-child(3){animation-delay:.16s} .grid .tile:nth-child(4){animation-delay:.22s}

.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { background: var(--card); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); text-align: center; min-width: 76px; opacity: .35; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.badge.earned { opacity: 1; filter: none; }
.badge.just-earned { animation: badgePop .7s var(--ease); }
@keyframes badgePop { 0%{transform:scale(.4) rotate(-14deg)} 55%{transform:scale(1.25) rotate(8deg)} 80%{transform:scale(.95) rotate(-3deg)} 100%{transform:scale(1) rotate(0)} }
.badge .be { font-size: 24px; }
.badge .bl { font-size: 12px; color: var(--muted); }

/* 聊天 */
.chat-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; padding: 4px 0 12px; }
.messages { display: flex; flex-direction: column; gap: 10px; padding-bottom: 96px; }
.bubble { max-width: 82%; padding: 12px 14px; border-radius: 18px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.bubble.ai { background: var(--card); align-self: flex-start; border-bottom-left-radius: 6px; box-shadow: var(--shadow); transform-origin: left bottom; animation: popLeft .34s var(--ease); }
.bubble.me { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; transform-origin: right bottom; animation: popRight .28s var(--ease); }
@keyframes popLeft { 0%{opacity:0; transform: translateY(8px) scale(.9)} 60%{transform: translateY(-2px) scale(1.02)} 100%{opacity:1; transform:none} }
@keyframes popRight { 0%{opacity:0; transform: translateY(8px) scale(.9)} 100%{opacity:1; transform:none} }
.typing-dots { display: inline-flex; gap: 6px; align-items: center; padding: 4px 2px; }
.typing-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); animation: dotBounce 1.3s infinite ease-in-out; }
.typing-dots span:nth-child(2){ animation-delay: .18s; } .typing-dots span:nth-child(3){ animation-delay: .36s; }
@keyframes dotBounce { 0%,75%,100%{transform:translateY(0); opacity:.35} 35%{transform:translateY(-7px); opacity:1} }
.composer {
  position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 8px; padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: var(--bg); max-width: 720px; margin: 0 auto;
}
#chat-input { flex: 1; padding: 14px; border: 2px solid #e7e2ff; border-radius: 14px; font-size: 16px; outline: none; transition: border-color .2s; }
#chat-input:focus { border-color: var(--primary); }

/* 弹窗 */
.modal { display: none; position: fixed; inset: 0; background: rgba(42,35,66,.45); align-items: center; justify-content: center; padding: 18px; z-index: 50; }
.modal.show { display: flex; animation: fadeIn .2s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-card { background: var(--card); border-radius: 22px; padding: 22px; width: 100%; max-width: 420px; animation: modalPop .34s var(--ease); }
@keyframes modalPop { 0%{opacity:0; transform: translateY(20px) scale(.94)} 100%{opacity:1; transform:none} }
.modal-card label { display: block; margin: 12px 0 4px; font-weight: 600; }
.modal-card textarea { width: 100%; border: 2px solid #e7e2ff; border-radius: 12px; padding: 10px; font-size: 15px; font-family: inherit; outline: none; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* 家长 */
.parent-body { padding-bottom: 40px; }
.report-card { background: linear-gradient(180deg, #fbf9ff, #fff); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px; animation: modalPop .34s var(--ease); }
.report-stat { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.report-text { line-height: 1.7; white-space: pre-wrap; }
.ci-row { background: var(--card); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow); }
.ci-row .d { font-weight: 700; color: var(--primary); }
.log-row { padding: 8px 0; border-bottom: 1px solid #eee7ff; font-size: 14px; }
.log-row .who { font-weight: 700; }
.log-row .who.user { color: var(--accent); }
.log-row .who.ai { color: var(--primary); }
.log-row .meta { color: var(--muted); font-size: 12px; }

/* toast / 撒花 / 飘字 */
.toast { position: fixed; left: 50%; bottom: 30%; transform: translateX(-50%) translateY(24px) scale(.9); background: var(--text); color: #fff; padding: 13px 20px; border-radius: 16px; opacity: 0; transition: opacity .28s, transform .28s var(--ease); z-index: 100; pointer-events: none; font-weight: 700; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.confetti { position: fixed; font-size: 22px; pointer-events: none; z-index: 200; will-change: transform, opacity; }
.floatup { position: fixed; font-size: 24px; font-weight: 800; color: var(--primary); pointer-events: none; z-index: 200; text-shadow: 0 2px 8px rgba(124,92,255,.35); will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
}