:root {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #18221d;
  background: #e9ecea;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, textarea { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

.phone {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  background: #f5f6f7;
  position: relative;
  box-shadow: 0 0 36px rgba(20, 40, 30, .08);
}

.splash {
  position: absolute;
  inset: 0;
  z-index: 50;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(155deg, #0f3826 0%, #176541 52%, #1d9b59 100%);
  transition: opacity .55s ease, visibility .55s ease;
}
.splash.leaving { opacity: 0; visibility: hidden; }
.splash-skip { position: absolute; z-index: 2; top: 48px; right: 18px; min-width: 52px; min-height: 32px; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.1); font-size: 12px; }
.splash-glow { position: absolute; border-radius: 50%; background: rgba(159,255,197,.17); filter: blur(3px); animation: drift 4s ease-in-out infinite alternate; }
.glow-one { width: 290px; height: 290px; top: -90px; right: -130px; }
.glow-two { width: 230px; height: 230px; bottom: -70px; left: -100px; animation-delay: -.8s; }
.splash-content { position: relative; z-index: 1; width: 100%; padding: 0 28px; text-align: center; transform: translateY(-12px); }
.brand-mark { width: 74px; height: 74px; margin: 0 auto 18px; position: relative; filter: drop-shadow(0 12px 18px rgba(5,39,23,.22)); animation: markIn .7s cubic-bezier(.2,.9,.25,1.2) both; }
.book-page { position: absolute; bottom: 6px; width: 34px; height: 48px; background: rgba(255,255,255,.96); }
.page-left { left: 4px; border-radius: 8px 2px 4px 10px; transform: skewY(8deg); }
.page-right { right: 4px; border-radius: 2px 8px 10px 4px; transform: skewY(-8deg); }
.brand-mark i { position: absolute; z-index: 2; left: 29px; top: 5px; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; color: #168b4e; background: #b9f0ce; font-size: 18px; font-style: normal; font-weight: 900; }
.splash-brand { margin: 0 0 24px; color: #bce9cd; font-size: 13px; font-weight: 700; letter-spacing: .3em; text-indent: .3em; opacity: 0; animation: riseIn .55s .35s ease forwards; }
.splash-slogan { margin: 0; color: white; font-size: 28px; line-height: 1.5; letter-spacing: .01em; }
.splash-slogan span { display: block; opacity: 0; transform: translateY(18px); animation: riseIn .62s .55s cubic-bezier(.2,.75,.25,1) forwards; }
.splash-slogan span + span { animation-delay: .76s; }
.splash-subtitle { margin: 20px 0 0; color: rgba(230,255,239,.78); font-size: 14px; letter-spacing: .08em; opacity: 0; animation: riseIn .55s 1.05s ease forwards; }
.splash-foot { position: absolute; bottom: max(38px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 10px; color: rgba(235,255,242,.65); font-size: 11px; opacity: 0; animation: riseIn .55s 1.25s ease forwards; }
.splash-foot i { display: block; width: 22px; height: 1px; background: rgba(235,255,242,.35); }
@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }
@keyframes markIn { from { opacity: 0; transform: translateY(20px) scale(.75) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes drift { to { transform: translate(18px, 16px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .splash *, .splash-glow { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}

.nav-bar {
  height: 88px;
  padding: 40px 12px 0;
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  align-items: center;
  background: rgba(245, 246, 247, .94);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(16px);
}
.nav-title { text-align: center; font-weight: 600; font-size: 17px; }
.icon-button { border: 0; background: none; font-size: 34px; height: 44px; width: 44px; color: #1b2620; }
.settings-entry { font-size: 20px; }
.capsule { justify-self: end; width: 87px; height: 34px; border: 1px solid #d8dcda; border-radius: 18px; background: rgba(255,255,255,.76); display: flex; align-items: center; justify-content: space-evenly; color: #111; }
.capsule i { height: 18px; width: 1px; background: #d7d9d8; }
.capsule b { font-size: 15px; }

.page { padding: 18px 16px 30px; }
.hidden { display: none !important; }
.intro { padding: 14px 4px 22px; }
.eyebrow { color: #16844a; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
h1 { margin: 9px 0 9px; font-size: 28px; line-height: 1.25; letter-spacing: -.03em; }
.intro p { color: #728078; margin: 0; line-height: 1.7; font-size: 14px; }
.profile-chip { width: 100%; min-height: 43px; margin-top: 15px; padding: 0 11px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; text-align: left; border: 1px solid #dfe8e3; border-radius: 11px; background: #f9fbfa; color: #445249; }.profile-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; }.profile-chip i { color: #7e8b83; font-style: normal; font-size: 20px; }

.method-tabs { background: #e9ecea; padding: 4px; border-radius: 12px; display: flex; margin-bottom: 14px; }
.method-tab { flex: 1; height: 40px; border: 0; border-radius: 9px; color: #68756e; background: transparent; font-weight: 600; }
.method-tab.active { background: white; color: #17231c; box-shadow: 0 2px 8px rgba(28,51,38,.08); }

.card { background: white; border-radius: 16px; border: 1px solid #edf0ee; box-shadow: 0 8px 24px rgba(34, 58, 44, .045); }
.input-card { padding: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-head label { font-size: 15px; font-weight: 700; }
.text-button, .plain-back, .source-button { border: 0; background: none; color: #16844a; padding: 6px 0; }
.wechat-paste-button { width: 100%; min-height: 58px; margin-bottom: 11px; padding: 8px 10px; display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: center; text-align: left; border: 1px solid #cce8d7; border-radius: 11px; background: #effaf3; }.wechat-logo { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #07c160; color: white; font-size: 24px; font-weight: 800; }.wechat-paste-button strong,.wechat-paste-button small { display: block; }.wechat-paste-button strong { color: #26372d; font-size: 12px; }.wechat-paste-button small { margin-top: 3px; color: #7c8b82; font-size: 9px; }.wechat-paste-button i { padding: 5px 8px; border-radius: 7px; background: white; color: #089e4e; font-size: 10px; font-style: normal; box-shadow: 0 1px 5px rgba(18,97,52,.08); }.paste-status { margin: -2px 0 9px; padding: 8px 10px; border-radius: 8px; background: #eef7ff; color: #52718f; font-size: 10px; line-height: 1.45; }
textarea { width: 100%; resize: vertical; min-height: 210px; border: 0; border-radius: 10px; background: #f7f8f8; color: #26332c; padding: 13px; font-size: 14px; line-height: 1.65; outline: none; }
textarea:focus { box-shadow: inset 0 0 0 1.5px #24a861; }
.privacy-note { font-size: 11px; color: #8a958f; padding-top: 11px; }
.privacy-note span { color: #19a25a; }

.upload-card { min-height: 290px; padding: 44px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.upload-icon { width: 62px; height: 62px; background: #eaf8f0; color: #159452; border-radius: 18px; display: grid; place-items: center; font-size: 30px; margin-bottom: 16px; }
.upload-card p, .upload-card small { color: #8a958f; }
.secondary-button { height: 42px; padding: 0 22px; border: 1px solid #19a25a; color: #168c4e; background: white; border-radius: 10px; margin: 5px 0 12px; }

.primary-button { width: 100%; min-height: 50px; border: 0; border-radius: 13px; color: white; background: #19a25a; font-weight: 700; font-size: 16px; box-shadow: 0 8px 18px rgba(25,162,90,.18); }
#importPage > .primary-button { margin-top: 20px; }
.primary-button:active { transform: scale(.99); background: #148947; }
.disclaimer { text-align: center; font-size: 11px; color: #99a19c; }

.result-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.demo-badge { font-size: 11px; background: #e7f6ed; color: #158447; padding: 5px 9px; border-radius: 999px; }
.summary-card { background: linear-gradient(135deg, #153f2a, #23764a); color: white; border-radius: 18px; min-height: 114px; padding: 20px; display: flex; align-items: center; gap: 17px; box-shadow: 0 12px 28px rgba(20,87,51,.16); }
.summary-card h2 { font-size: 18px; margin: 0 0 7px; }
.summary-card p { font-size: 12px; color: #c8e5d3; margin: 0; }
.ring { width: 65px; height: 65px; flex: 0 0 65px; border-radius: 50%; border: 5px solid rgba(255,255,255,.25); display: grid; place-content: center; grid-template-columns: auto auto; align-items: baseline; }
.ring strong { font-size: 23px; }.ring span { font-size: 11px; color: #cce4d5; }

.alert-card { margin-top: 14px; background: #fff8e9; border: 1px solid #f4e3bb; border-radius: 14px; padding: 13px; display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; }
.alert-icon { width: 30px; height: 30px; display: grid; place-items: center; background: #ffdf91; color: #765109; border-radius: 9px; font-weight: 800; }
.alert-card strong { font-size: 13px; }.alert-card p { font-size: 11px; color: #95763e; margin: 4px 0 0; }
.alert-card button { border: 0; background: none; color: #8b6417; font-size: 12px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin: 23px 2px 11px; }
.section-title h3 { margin: 0; font-size: 17px; }.section-title span { color: #7c8981; font-size: 12px; }

.homework-list { display: grid; gap: 10px; }
.homework-item { background: white; border: 1px solid #edf0ee; border-radius: 15px; padding: 15px; display: grid; grid-template-columns: 26px 1fr; gap: 11px; transition: .2s; }
.homework-item.done { opacity: .62; }.homework-item.done .task-title { text-decoration: line-through; }
.check { width: 24px; height: 24px; border: 1.5px solid #c9d1cc; background: white; border-radius: 50%; color: transparent; padding: 0; }
.done .check { background: #1aa15a; color: white; border-color: #1aa15a; }
.task-row { display: flex; justify-content: space-between; gap: 8px; }
.task-title { font-size: 14px; font-weight: 650; line-height: 1.5; }
.subject { flex: 0 0 auto; font-size: 10px; border-radius: 6px; padding: 3px 6px; align-self: flex-start; }
.语文 { background: #fff0ec; color: #c35338; }.数学 { background: #edf3ff; color: #406db7; }.英语 { background: #f1ecff; color: #7456ae; }
.task-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; color: #859088; font-size: 11px; }
.task-meta span { background: #f6f7f7; padding: 4px 7px; border-radius: 6px; }

.confirm-card { scroll-margin-top: 100px; background: white; border-radius: 15px; border: 1px solid #f0dfb7; margin-top: 17px; padding: 16px; }
.source-list-card { margin-top: 14px; padding: 15px; border: 1px solid #e5ebe7; border-radius: 15px; background: white; }.source-message { margin-top: 10px; padding: 10px; border-radius: 10px; background: #f6f8f7; }.source-message header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; }.source-message header b { color: #2d4436; font-size: 10px; }.source-message header span { color: #8a958e; font-size: 8px; }.source-message p { margin: 0; color: #5c6961; font-size: 10px; line-height: 1.55; }.source-link { min-height: 28px; margin-top: 7px; padding: 0 8px; border: 1px solid #dbe6df; border-radius: 7px; background: white; color: #28734c; font-size: 9px; }
.confirm-head { display: flex; gap: 8px; align-items: center; }.confirm-head span { width: 23px; height: 23px; display: grid; place-items: center; background: #fff0c9; color: #966d10; border-radius: 7px; font-weight: 700; }
.confirm-card p { font-size: 13px; color: #48564e; line-height: 1.6; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.choice { min-height: 40px; border-radius: 9px; border: 1px solid #dfe5e1; color: #46534b; background: #fafbfa; }
.choice.selected { border-color: #19a25a; background: #eaf8f0; color: #168c4e; }
.source-button { font-size: 12px; margin-top: 7px; }
.bottom-space { height: 94px; }
.fixed-action { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); border-top: 1px solid #edf0ee; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }

.toast { position: fixed; z-index: 20; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: rgba(25,33,29,.92); color: white; padding: 10px 15px; border-radius: 9px; font-size: 13px; opacity: 0; pointer-events: none; transition: .25s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
dialog { width: min(calc(100% - 40px), 380px); border: 0; border-radius: 16px; padding: 20px; color: #233029; box-shadow: 0 20px 60px rgba(0,0,0,.22); }
dialog::backdrop { background: rgba(18,27,22,.46); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; }.dialog-head button { border: 0; background: none; font-size: 24px; }.dialog-head + p { background: #f5f7f6; border-radius: 10px; padding: 12px; line-height: 1.6; }.dialog-head ~ small { color: #8a958f; }

.pet-card, .plan-card { margin-top: 14px; background: white; border: 1px solid #edf0ee; border-radius: 18px; padding: 16px; box-shadow: 0 8px 24px rgba(34,58,44,.045); }
.pet-card-head, .plan-head { display: flex; align-items: center; justify-content: space-between; }
.pet-kicker { display: block; margin-bottom: 3px; color: #799085; font-size: 10px; letter-spacing: .08em; }
.pet-card h3, .plan-card h3 { margin: 0; font-size: 16px; }
.skin-button { min-width: 58px; min-height: 34px; border: 1px solid #dce7e0; border-radius: 10px; background: #f6fbf8; color: #178a4d; font-size: 12px; }
.pet-stage { height: 152px; margin-top: 9px; position: relative; overflow: hidden; border-radius: 14px; background: linear-gradient(#eaf9f0, #f6fbf8 70%); }
.pet-stage::before, .pet-stage::after { content: ""; position: absolute; bottom: -28px; width: 150px; height: 70px; border-radius: 50%; background: #d7f0df; }
.pet-stage::before { left: -35px; }.pet-stage::after { right: -38px; background: #ccebd7; }
.pet-speech { position: absolute; top: 12px; left: 50%; z-index: 4; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 6px 10px; border-radius: 10px 10px 10px 2px; background: white; color: #526158; box-shadow: 0 4px 13px rgba(28,66,43,.08); font-size: 10px; }
.pet-shadow { position: absolute; z-index: 1; bottom: 15px; left: 50%; width: 82px; height: 15px; transform: translateX(-50%); border-radius: 50%; background: rgba(25,78,47,.12); }
.pet { --pet-color: #7bd7a2; position: absolute; z-index: 3; left: 50%; bottom: 20px; width: 76px; height: 85px; transform: translateX(-50%); border-radius: 48% 48% 43% 43%; background: linear-gradient(145deg, #b5efcc, var(--pet-color)); box-shadow: inset -8px -8px 14px rgba(21,111,61,.09), 0 9px 16px rgba(30,103,59,.14); animation: petIdle 2.2s ease-in-out infinite; }
.pet[data-skin="sunny"] { --pet-color: #f6bd57; background: linear-gradient(145deg, #ffe9a5, var(--pet-color)); }
.pet[data-skin="berry"] { --pet-color: #d98aaf; background: linear-gradient(145deg, #f5c0d8, var(--pet-color)); }
.pet-ear { position: absolute; top: -7px; width: 24px; height: 29px; background: inherit; border-radius: 15px 15px 4px 4px; }.pet-ear.left { left: 7px; transform: rotate(-18deg); }.pet-ear.right { right: 7px; transform: rotate(18deg); }
.pet-face { position: absolute; top: 33px; left: 18px; right: 18px; display: flex; justify-content: space-between; }.pet-face b { width: 6px; height: 8px; border-radius: 50%; background: #244333; }.pet-face em { position: absolute; top: 13px; left: 50%; width: 12px; height: 6px; transform: translateX(-50%); border-bottom: 2px solid #31523f; border-radius: 50%; }
.pet-cheek { position: absolute; top: 48px; width: 10px; height: 6px; border-radius: 50%; background: rgba(244,116,132,.25); }.pet-cheek.left { left: 10px; }.pet-cheek.right { right: 10px; }
.pet.happy { animation: petHappy .48s ease 2; }
@keyframes petIdle { 50% { transform: translateX(-50%) translateY(-3px) rotate(1deg); } }
@keyframes petHappy { 50% { transform: translateX(-50%) translateY(-14px) scale(1.04); } }
.pet-stats { display: grid; gap: 9px; margin-top: 13px; }.pet-stats > div { display: grid; grid-template-columns: 58px 1fr 25px; align-items: center; gap: 8px; font-size: 11px; color: #647269; }.pet-stats b { font-size: 10px; text-align: right; color: #829087; }
.stat-track { height: 7px; overflow: hidden; border-radius: 6px; background: #eef1ef; }.stat-track i { display: block; width: 60%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffb65c,#f28d42); transition: width .35s; }.stat-track.water i { width: 55%; background: linear-gradient(90deg,#63c8eb,#459be0); }
.pet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }.pet-actions button { min-height: 48px; border: 1px solid #e1e9e4; border-radius: 11px; background: #fafcfb; color: #34443a; font-weight: 650; }.pet-actions button:disabled { opacity: .48; }.pet-actions button span { margin-right: 4px; }.pet-actions small { display: block; margin-top: 2px; color: #819087; font-size: 9px; font-weight: 400; }
.reward-hint { margin: 10px 0 0; color: #849089; text-align: center; font-size: 10px; }
.countdown { min-width: 82px; color: #168d4e; text-align: right; font-size: 25px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.timeline { display: flex; gap: 3px; margin: 15px 0 7px; }.timeline span { height: 8px; border-radius: 5px; background: #dbe3df; }.timeline span:nth-child(1) { flex: 12; background: #ef8871; }.timeline span:nth-child(2) { flex: 10; background: #ef8871; }.timeline span:nth-child(3) { flex: 13; background: #6b9fea; }.timeline span:nth-child(4) { flex: 10; background: #977bd4; }
.help-budget { margin-top: 13px; padding: 11px; border-radius: 10px; background: #f6f8f7; }.help-budget > span { display: block; margin-bottom: 8px; color: #748179; font-size: 10px; }.help-budget > div { display: flex; gap: 8px; }.help-budget b { flex: 1; color: #4b5a51; font-size: 10px; font-weight: 600; }.help-budget i { color: #168d4e; font-style: normal; }
.timer-actions { display: grid; grid-template-columns: 1.25fr 1fr; gap: 9px; margin-top: 13px; }.timer-actions button { min-height: 40px; border-radius: 10px; border: 1px solid #dbe5df; background: white; color: #526158; }.timer-actions button:first-child { border-color: #19a25a; background: #19a25a; color: white; font-weight: 650; }
.plan-note { color: #99a19d; font-size: 9px; line-height: 1.5; margin: 10px 0 0; }
.skin-progress { color: #7b8880; font-size: 12px; }.skin-grid { display: grid; gap: 9px; }.skin-option { min-height: 62px; padding: 9px 11px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: 1fr 1fr; column-gap: 10px; text-align: left; border: 1px solid #e3e8e5; border-radius: 12px; background: white; }.skin-option.selected { border-color: #1aa15a; background: #f2fbf6; }.skin-option.locked { opacity: .56; }.skin-dot { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; align-self: center; background: #7bd7a2; }.skin-dot.sunny { background: #f6bd57; }.skin-dot.berry { background: #d98aaf; }.skin-option span { align-self: end; font-size: 13px; font-weight: 650; }.skin-option small { color: #87928b; font-size: 10px; }
.task-help { grid-column: 2; justify-self: start; min-height: 30px; margin-top: 8px; padding: 0 10px; border: 1px solid #dfe8e3; border-radius: 8px; background: #f7faf8; color: #397052; font-size: 11px; }
.help-task { padding: 10px 12px; border-radius: 10px; background: #f6f8f7; color: #4d5a52; font-size: 12px; line-height: 1.5; }
.help-choices { display: grid; gap: 9px; }.help-choices > button { min-height: 66px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; padding: 10px; text-align: left; border: 1px solid #e0e7e3; border-radius: 12px; background: white; }.help-choices > button > span { font-size: 23px; }.help-choices strong, .help-choices small { display: block; }.help-choices strong { color: #344239; font-size: 13px; }.help-choices small { margin-top: 4px; color: #87928b; font-size: 9px; }.help-choices b { color: #188b4e; font-size: 10px; }.help-choices button:disabled { opacity: .45; }
.coach { margin-top: 12px; padding: 13px; border: 1px solid #cce6d7; border-radius: 12px; background: #f0faf4; }.coach-label { color: #15864a; font-size: 10px; font-weight: 700; }.coach p { color: #33463a; font-size: 13px; line-height: 1.7; }.coach-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.coach-actions button { min-height: 37px; border: 1px solid #bcdcca; border-radius: 9px; background: white; color: #377151; font-size: 11px; }.coach-actions button:last-child { border-color: #1aa15a; background: #1aa15a; color: white; }
.help-rule { margin: 12px 0 0; color: #929b95; font-size: 9px; line-height: 1.55; }
.grading-hero { padding: 6px 3px 18px; }.grading-hero > span { color: #16864b; font-size: 11px; font-weight: 700; }.grading-hero h1 { margin: 7px 0; font-size: 23px; }.grading-hero p { margin: 0; color: #77847c; font-size: 12px; line-height: 1.6; }.grading-tabs { margin-bottom: 13px; }.grading-tab { flex: 1; height: 40px; border: 0; border-radius: 9px; background: transparent; color: #68756e; font-weight: 600; }.grading-tab.active { background: white; color: #17231c; box-shadow: 0 2px 8px rgba(28,51,38,.08); }
.grading-info { min-height: 45px; padding: 0 12px; display: flex; align-items: center; gap: 7px; border-radius: 11px; background: #173e2b; color: white; font-size: 11px; }.grading-info b { flex: 1; }.grading-info i { color: #bfe4cd; font-style: normal; }
.question-card { margin-top: 10px; padding: 14px; border: 1px solid #e7ece9; border-radius: 14px; background: white; }.question-card label { display: flex; gap: 9px; color: #344139; font-size: 13px; line-height: 1.6; }.question-card label b { flex: 0 0 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: #edf8f1; color: #17894c; }.answer-input { width: 100%; min-height: 42px; margin-top: 11px; padding: 9px 11px; border: 1px solid #dce4df; border-radius: 9px; outline: none; background: #fafbfa; color: #26352c; }.answer-input:focus { border-color: #19a25a; }.answer-row { display: flex; align-items: center; gap: 8px; }.answer-row em { color: #68766d; font-size: 12px; font-style: normal; }.text-answer { resize: none; font-size: 12px; line-height: 1.5; }.grade-submit { margin-top: 14px; }
.photo-uploader { position: relative; min-height: 250px; display: grid; place-items: center; overflow: hidden; border: 1.5px dashed #cbd8d0; border-radius: 15px; background: white; }.photo-uploader input { position: absolute; inset: 0; z-index: 2; opacity: 0; cursor: pointer; }.photo-placeholder { padding: 25px; text-align: center; }.photo-placeholder span { display: block; color: #1b9c58; font-size: 40px; }.photo-placeholder strong { display: block; margin: 8px 0; font-size: 14px; }.photo-placeholder p { color: #8a958e; font-size: 10px; }.photo-uploader img { width: 100%; height: 250px; object-fit: contain; background: #ecefed; filter: none; }.photo-uploader.sample-blur img { filter: blur(3px) contrast(.8); }.full-button { width: 100%; margin: 10px 0 0; }
.grading-loading { margin-top: 15px; padding: 28px; text-align: center; border-radius: 15px; background: white; }.grading-loading strong { display: block; margin: 12px 0 5px; font-size: 13px; }.grading-loading p { color: #909a94; font-size: 10px; }.scan-icon { width: 52px; height: 52px; margin: auto; position: relative; border: 2px solid #bfe6cf; border-radius: 14px; }.scan-icon::before { content: "AI"; position: absolute; inset: 0; display: grid; place-items: center; color: #168b4e; font-weight: 800; }.scan-icon i { position: absolute; left: 5px; right: 5px; top: 7px; height: 2px; background: #22b766; box-shadow: 0 0 7px #22b766; animation: scan 1s ease-in-out infinite alternate; }@keyframes scan { to { top: 40px; } }
.grade-results { margin-top: 14px; }.result-overview { padding: 16px; border-radius: 15px; background: #173f2b; color: white; }.result-overview > span { color: #b7dfc6; font-size: 10px; }.result-overview h2 { margin: 5px 0 13px; font-size: 18px; }.score-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.score-row div { padding: 8px; border-radius: 9px; background: rgba(255,255,255,.09); text-align: center; }.score-row b, .score-row small { display: block; }.score-row b { font-size: 18px; }.score-row small { margin-top: 2px; color: #badbc7; font-size: 9px; }
.marked-item { margin-top: 10px; padding: 14px; border-radius: 14px; border: 1px solid #e5ebe7; background: white; }.marked-head { display: flex; align-items: center; justify-content: space-between; }.marked-head strong { font-size: 13px; }.grade-state { padding: 4px 7px; border-radius: 7px; font-size: 9px; }.grade-state.correct { background: #e9f8ef; color: #16884b; }.grade-state.retry { background: #fff4d8; color: #92650b; }.grade-state.unclear { background: #eef1f5; color: #617083; }.marked-answer { margin: 9px 0; color: #4c5951; font-size: 11px; }.analysis-box { padding: 10px; border-radius: 9px; background: #f7f9f8; color: #5f6d64; font-size: 10px; line-height: 1.6; }.analysis-box b { color: #34473b; }.hint-reveal { width: 100%; min-height: 37px; margin-top: 9px; border: 1px solid #cfe3d7; border-radius: 9px; background: #f4fbf7; color: #29734c; font-size: 11px; }.confidence { margin-top: 8px; color: #939d97; font-size: 9px; }.result-next { margin-top: 11px; padding: 13px; border: 1px solid #d8e8df; border-radius: 13px; background: #f3faf6; color: #3d5145; font-size: 11px; line-height: 1.6; }
.settings-dialog { width: min(100%, 430px); max-height: min(88vh, 760px); margin: auto auto 0; padding: 0; border-radius: 22px 22px 0 0; overflow: auto; }.settings-head { position: sticky; top: 0; z-index: 2; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.96); border-bottom: 1px solid #edf0ee; backdrop-filter: blur(12px); }.settings-head div span, .settings-head div strong { display: block; }.settings-head div span { margin-bottom: 3px; color: #77857d; font-size: 10px; }.settings-head div strong { font-size: 17px; }.settings-head button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f3f2; font-size: 22px; color: #526057; }
#settingsForm { padding: 4px 18px max(22px, env(safe-area-inset-bottom)); }.settings-section { padding: 15px 0; border-bottom: 1px solid #edf0ee; }.settings-section h3 { margin: 0 0 12px; font-size: 14px; }.settings-title-row { display: flex; align-items: center; justify-content: space-between; }.settings-title-row span { color: #8a958f; font-size: 9px; }.form-grid { display: grid; gap: 10px; }.form-grid.two { grid-template-columns: 1fr 1fr; }.settings-section label { color: #748178; font-size: 10px; }.settings-section select, .settings-section input:not([type="checkbox"]) { width: 100%; height: 42px; margin-top: 6px; padding: 0 10px; border: 1px solid #dfe5e1; border-radius: 9px; outline: none; background: #fafbfa; color: #344239; font-size: 12px; }.settings-section select:focus, .settings-section input:focus { border-color: #1aa15a; }
.book-setting { min-height: 59px; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; }.book-icon { width: 36px; height: 42px; display: grid; place-items: center; border-radius: 4px 8px 8px 4px; color: white; font-style: normal; font-weight: 700; box-shadow: inset 4px 0 rgba(0,0,0,.1); }.book-icon.chinese { background: #e77e69; }.book-icon.math { background: #568cd5; }.book-icon.english { background: #8b70c6; }.book-setting select { margin-top: 4px !important; }.verify-row { margin-top: 13px; display: flex; gap: 9px; align-items: flex-start; }.verify-row input { width: 18px; height: 18px; accent-color: #19a25a; }.verify-row b, .verify-row small { display: block; }.verify-row b { color: #45534a; font-size: 11px; }.verify-row small { margin-top: 4px; color: #909a94; font-size: 9px; line-height: 1.45; }.settings-note { color: #8c9690; font-size: 9px; line-height: 1.5; }

@media (min-width: 500px) { body { padding: 24px 0; } .phone { min-height: 812px; border-radius: 24px; overflow: hidden; } .splash { min-height: 812px; } .fixed-action { position: absolute; } }
.homework-item .source-link { grid-column: 2; justify-self: start; margin-top: 0; }

.learning-entry,.next-learning{margin-top:11px}.learning-hero{padding:7px 3px 17px}.learning-hero>span{color:#16894c;font-size:10px;font-weight:700}.learning-hero h1{margin:6px 0;font-size:22px;line-height:1.4}.learning-hero p{margin:0;color:#7d8982;font-size:11px;line-height:1.6}.learning-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:13px}.learning-tab{min-height:52px;padding:6px 2px;border:1px solid #e2e8e4;border-radius:10px;background:white;color:#6e7b73;font-size:9px}.learning-tab span{display:block;margin-bottom:3px;color:#a0aaa4;font-size:8px}.learning-tab.active{border-color:#1aa15a;background:#eaf8f0;color:#167d47;font-weight:700}.learning-panel{animation:panelIn .25s ease}@keyframes panelIn{from{opacity:0;transform:translateY(5px)}}.panel-title{display:flex;align-items:flex-end;justify-content:space-between;margin:15px 2px 10px}.panel-title span{color:#89948d;font-size:9px}.panel-title h2{margin:3px 0 0;font-size:17px}.panel-title>b{padding:5px 8px;border-radius:8px;background:#ecf7f0;color:#19894d;font-size:9px}
.wrong-card{padding:15px;border:1px solid #e7ebe8;border-radius:15px;background:white}.wrong-tags{display:flex;gap:5px;align-items:center}.wrong-tags span,.wrong-tags em{padding:4px 7px;border-radius:6px;background:#eef4ff;color:#5274a8;font-size:9px;font-style:normal}.wrong-tags em{margin-left:auto;background:#fff2d7;color:#94640c}.wrong-card h3{margin:13px 0;font-size:13px;line-height:1.6}.answer-compare{padding:11px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;border-radius:10px;background:#f7f8f8}.answer-compare div{text-align:center}.answer-compare small,.answer-compare strong{display:block}.answer-compare small{color:#8a958f;font-size:8px}.answer-compare strong{margin-top:4px;color:#187e48;font-size:14px}.answer-compare .wrong-answer{color:#cf674d}.answer-compare i{color:#a2aaa5;font-style:normal}.error-analysis{margin:13px 0}.error-analysis div{padding:9px 0;border-bottom:1px solid #eff1f0}.error-analysis dt{color:#849088;font-size:9px}.error-analysis dd{margin:4px 0 0;color:#445249;font-size:11px;line-height:1.55}.review-plan{display:flex;align-items:center;justify-content:space-between;color:#89948e;font-size:8px}.review-plan b{padding:4px 6px;border-radius:6px;background:#f1f6f3;color:#52635a;font-size:8px}.review-plan i{font-style:normal}
.coach-scene{min-height:100px;padding:15px;display:flex;align-items:center;gap:13px;border-radius:15px;background:linear-gradient(135deg,#17432d,#208956);color:white}.coach-scene span{color:#bce3ca;font-size:9px}.coach-scene h2{margin:4px 0 0;font-size:16px}.mini-pet{width:58px;height:62px;position:relative;display:grid;place-items:center;border-radius:50% 50% 44% 44%;background:#91ddb0;color:#264d37}.mini-pet:before,.mini-pet:after{content:"";position:absolute;top:-5px;width:19px;height:22px;border-radius:50% 50% 5px 5px;background:#91ddb0}.mini-pet:before{left:6px;transform:rotate(-15deg)}.mini-pet:after{right:6px;transform:rotate(15deg)}.mini-pet b{letter-spacing:9px;text-indent:9px}.mini-pet i{position:absolute;bottom:18px;width:10px;border-bottom:2px solid #31533e}.coach-chat{margin-top:11px}.ai-bubble{padding:13px;border-radius:13px;background:white;color:#435148;font-size:12px;line-height:1.65}.student-compose{margin-top:9px;padding:11px;border:1px solid #e2e7e4;border-radius:13px;background:white}.student-compose textarea{min-height:90px}.student-compose button{width:100%;min-height:39px;margin-top:7px;border:0;border-radius:9px;background:#1aa15a;color:white}.feynman-feedback{margin-top:9px;padding:13px;border:1px solid #cfe4d7;border-radius:13px;background:#eff9f3;color:#3c5144;font-size:11px;line-height:1.65}.feynman-feedback button{width:100%;min-height:37px;margin-top:8px;border:1px solid #1aa15a;border-radius:8px;background:white;color:#16894c}.feynman-rule{margin-top:10px;color:#929b95;text-align:center;font-size:9px}
.practice-levels{display:flex;gap:5px;margin-bottom:10px}.practice-levels span{flex:1;padding:7px 3px;border-radius:8px;background:#ecefed;color:#8a958e;text-align:center;font-size:9px}.practice-levels span.active{background:#e8f7ee;color:#16864a}.practice-question{margin-bottom:9px;padding:12px;display:grid;grid-template-columns:25px 1fr 90px;align-items:center;gap:8px;border:1px solid #e5eae7;border-radius:12px;background:white}.practice-question>b{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:#eef7f2;color:#16864a;font-size:10px}.practice-question p{margin:0;color:#3e4c43;font-size:11px;line-height:1.45}.practice-question input{width:100%;height:36px;padding:0 8px;border:1px solid #dce4df;border-radius:8px;background:#fafbfa}.practice-result{margin-top:11px;padding:14px;border-radius:13px;background:#eff9f3;color:#3f5547;font-size:11px;line-height:1.6}
.insight-warning{padding:12px;border:1px solid #f1ddb2;border-radius:12px;background:#fff8e8}.insight-warning span{color:#95660f;font-size:10px;font-weight:700}.insight-warning p{margin:4px 0 0;color:#886f3f;font-size:9px}.insight-card{margin-top:9px;padding:13px;display:grid;grid-template-columns:38px 1fr;gap:10px;border:1px solid #e5eae7;border-radius:13px;background:white}.insight-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#eef4ff;color:#5677ab;font-weight:700}.positive .insight-icon{background:#e9f8ef;color:#18864c}.uncertain .insight-icon{background:#f0f1f1;color:#7e8983}.insight-card span{color:#849088;font-size:8px}.insight-card h3{margin:3px 0 5px;font-size:12px}.insight-card p{margin:0;color:#637168;font-size:10px;line-height:1.55}.insight-card small{display:block;margin-top:7px;color:#929c96;font-size:8px}.observe-next{margin-top:10px;padding:13px;border-radius:12px;background:#edf8f1;color:#3d5345}.observe-next p{margin:5px 0 0;font-size:10px;line-height:1.6}