/* 小学生古诗文背诵练习 —— 儿童卡通 / 糖果配色
   设计关键词：大圆角 · 厚底按钮 · 贴纸卡片 · 会呼吸的动效 · 吉祥物「小榉」 */
:root{
  --bg1:#FFF9EC;          /* 奶油 */
  --bg2:#EFF9FF;          /* 天空 */
  --card:#FFFFFF;
  --primary:#4FC3E8;      /* 糖果青 */
  --primary-deep:#2B7C93; /* 深青（标题） */
  --orange:#FFA640;       /* 蜜橘（主按钮） */
  --orange-deep:#F2810C;
  --pink:#FF8FA8;
  --mint:#57D9A8;
  --purple:#B98BFF;
  --yellow:#FFD45E;
  --muted:#9A8A76;
  --ink:#4A3B2C;
  --soft:#F1E7D6;
  --badge:#E3F4FB;
  --wrong:#F2596B;
  --wrong-bg:#FFEDF0;
  --ok:#3FBF8F;
  --line:3px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:12px}
body{
  margin:0;color:var(--ink);
  background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);
  background-attachment:fixed;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:1.4rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 背景装饰：飘浮云朵 + 星星 */
.sky-deco{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sky-deco i{position:absolute;display:block;opacity:.55}
.cloud{background:#fff;border-radius:999px;filter:blur(.2px)}
.star-d{width:8px;height:8px;background:var(--yellow);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(.7);opacity:.25}50%{transform:scale(1.15);opacity:.9}}
@keyframes drift{0%{transform:translateX(0)}50%{transform:translateX(14px)}100%{transform:translateX(0)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}

#app{max-width:520px;margin:0 auto;min-height:100vh;position:relative;z-index:1;padding-bottom:3rem}
.view{display:none;animation:pop .28s cubic-bezier(.34,1.56,.64,1)}
.view.active{display:block}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* 通用卡片（贴纸风） */
.card-sticker{background:var(--card);border-radius:2.2rem;padding:1.8rem;box-shadow:0 .4rem 0 rgba(160,140,110,.10),0 1rem 2.4rem rgba(150,130,100,.10)}
/* 通用按钮（厚底） */
.btn{
  display:block;width:100%;border:none;cursor:pointer;font-family:inherit;
  border-radius:999px;padding:1.6rem 0;font-size:1.85rem;font-weight:800;letter-spacing:.15rem;
  color:#fff;background:var(--orange);box-shadow:0 .55rem 0 var(--orange-deep);
  transition:transform .08s,box-shadow .08s;
}
.btn:active{transform:translateY(.4rem);box-shadow:0 .15rem 0 var(--orange-deep)}
.btn.blue{background:var(--primary);box-shadow:0 .55rem 0 #2FA3C7}
.btn.blue:active{box-shadow:0 .15rem 0 #2FA3C7}
.btn.ghost{background:#fff;color:var(--primary-deep);box-shadow:0 .5rem 0 #D7E9F2;border:.35rem solid #EAF6FC}
.btn.ghost:active{box-shadow:0 .15rem 0 #D7E9F2}

/* ================= 首页 ================= */
.home{padding:3.4rem 2.4rem 0;text-align:center;position:relative}
.mascot-wrap{width:19rem;height:19rem;margin:0 auto .4rem;position:relative}
.mascot{width:100%;height:100%;object-fit:contain;animation:bob 3.2s ease-in-out infinite;filter:drop-shadow(0 1rem 1.6rem rgba(70,150,180,.22))}
.mascot-hi{position:absolute;right:1.6rem;top:1rem;background:#fff;color:var(--primary-deep);
  border:.3rem solid var(--badge);border-radius:1.6rem;padding:.7rem 1.3rem;font-size:1.45rem;font-weight:800;
  box-shadow:0 .4rem 0 rgba(160,180,190,.18);animation:bob 2.4s ease-in-out infinite}
.home-title{
  font-size:4rem;font-weight:900;margin:.4rem 0 .6rem;letter-spacing:.2rem;line-height:1.2;
  background:linear-gradient(92deg,#FF9A3C 0%,#FF6F91 45%,#56C8E8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .25rem 0 rgba(255,255,255,.9));
}
.home-sub{font-size:1.55rem;color:var(--primary-deep);margin:0;line-height:2;font-weight:700}
.home-badges{display:flex;justify-content:center;gap:.8rem;margin:1.4rem 0 .4rem;flex-wrap:wrap}
.pill{background:#fff;border:.3rem solid;border-radius:999px;padding:.55rem 1.2rem;font-size:1.3rem;font-weight:800}
.pill.a{border-color:#FFE0B2;color:var(--orange-deep)}
.pill.b{border-color:#CDEAF7;color:var(--primary-deep)}
.pill.c{border-color:#D6F5E5;color:#2E9A72}
.home .btn{margin-top:2.2rem;font-size:2rem;padding:1.8rem 0}
.home-tip{margin-top:1.8rem;font-size:1.35rem;color:var(--muted);line-height:2.2}

/* ================= 分类页 ================= */
.nav{display:flex;align-items:center;gap:.8rem;padding:1.6rem 1.6rem .6rem;font-size:1.75rem;font-weight:800;color:var(--primary-deep)}
.nav .back{width:3.6rem;height:3.6rem;flex:0 0 3.6rem;border-radius:50%;background:#fff;border:.3rem solid var(--badge);
  color:var(--primary-deep);display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:900;cursor:pointer;
  box-shadow:0 .35rem 0 rgba(160,180,190,.2)}
.nav .back:active{transform:translateY(.3rem);box-shadow:none}
.nav .title{flex:1;text-align:center;margin-right:3.6rem}

.cat-head{padding:1.6rem 1.8rem 0;display:flex;gap:1rem;background:transparent}
.tab{flex:1;text-align:center;padding:1.25rem 0;border-radius:1.6rem;font-size:1.7rem;font-weight:800;font-family:inherit;
  background:#fff;color:var(--muted);border:.3rem solid #F0E7D9;cursor:pointer;box-shadow:0 .4rem 0 rgba(160,140,110,.10)}
.tab.on{background:var(--primary);color:#fff;border-color:#8FDCF3;box-shadow:0 .45rem 0 #2FA3C7;transform:translateY(-.1rem)}
.cat-tools{display:flex;gap:1rem;padding:1.2rem 1.8rem 0}
.tool{flex:1;padding:1.25rem 0;border-radius:1.6rem;border:.3rem solid #FFE2B0;font-family:inherit;
  font-size:1.55rem;font-weight:800;cursor:pointer;background:#FFF7E6;color:var(--orange-deep);
  display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 .4rem 0 rgba(255,190,120,.35)}
.tool.warn{background:var(--wrong-bg);border-color:#FFD1D8;color:#D8394F;box-shadow:0 .4rem 0 rgba(242,89,107,.25)}
.tool:disabled{opacity:.45}
.cat-list{padding:1.4rem 1.6rem 0}
.cat-row{background:var(--card);border-radius:2rem;padding:1.4rem 1.5rem;display:flex;align-items:center;
  margin-bottom:1.1rem;cursor:pointer;border:.3rem solid #EAF6FC;box-shadow:0 .4rem 0 rgba(160,190,205,.13);
  transition:transform .1s}
.cat-row:active{transform:translateY(.3rem);box-shadow:none}
.cat-num{width:4.6rem;height:4.6rem;flex:0 0 4.6rem;border-radius:1.4rem;display:flex;align-items:center;justify-content:center;
  font-size:2.1rem;font-weight:900;color:#fff;margin-right:1.2rem;background:var(--primary)}
.g1 .cat-num{background:linear-gradient(160deg,#7ED8F5,#4FC3E8)}
.g2 .cat-num{background:linear-gradient(160deg,#8FE3BD,#57D9A8)}
.g3 .cat-num{background:linear-gradient(160deg,#FFD98A,#FFC24B)}
.g4 .cat-num{background:linear-gradient(160deg,#FFB0C0,#FF8FA8)}
.g5 .cat-num{background:linear-gradient(160deg,#D3B7FF,#B98BFF)}
.g6 .cat-num{background:linear-gradient(160deg,#9FD0FF,#70AFFF)}
.pnum .cat-num{background:linear-gradient(160deg,#CFEAFB,#A9D8F2);color:var(--primary-deep);font-size:1.5rem}
.cat-main{flex:1;min-width:0}
.cat-name{font-size:1.85rem;font-weight:800;color:var(--ink)}
.cat-count{font-size:1.3rem;color:var(--muted);margin-top:.25rem}
.cat-arrow{color:#D3C6B4;font-size:2.4rem;font-weight:900}
.cat-group-title{font-size:1.5rem;color:var(--primary-deep);padding:1.2rem .6rem .4rem;font-weight:800}
.empty{text-align:center;color:var(--muted);padding:6rem 2rem;font-size:1.5rem;line-height:2.2}

/* ================= 答题页 ================= */
.quiz-top{display:flex;justify-content:space-between;align-items:center;padding:1.8rem 1.8rem 0;
  font-size:1.6rem;font-weight:800;color:var(--primary-deep)}
.chip{background:#fff;border:.3rem solid #EAF6FC;border-radius:999px;padding:.5rem 1.2rem;box-shadow:0 .3rem 0 rgba(160,190,205,.14)}
.bar{height:1.1rem;background:#fff;border:.3rem solid #EAF6FC;margin:1rem 1.8rem 0;border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;transition:width .35s cubic-bezier(.34,1.4,.64,1);
  background:linear-gradient(90deg,#FFD45E,#FFA640,#FF8FA8)}
/* 小榉气泡 */
.bot-bar{display:flex;align-items:center;gap:1rem;margin:1.4rem 1.8rem 0;background:#FFFDF5;
  border:.3rem dashed #FFE0B2;border-radius:1.8rem;padding:1rem 1.2rem}
.bot-bar .mini{width:4.4rem;height:4.4rem;flex:0 0 4.4rem;object-fit:contain}
.bot-bar .say{font-size:1.4rem;color:var(--orange-deep);font-weight:700;line-height:1.6}
.q-card{background:var(--card);border-radius:2.2rem;padding:2rem 1.8rem;margin:1.4rem 1.8rem 0;
  border:.3rem solid #EAF6FC;box-shadow:0 .4rem 0 rgba(160,190,205,.13);position:relative}
.q-type{position:absolute;top:-1.1rem;left:1.8rem;background:var(--orange);color:#fff;border-radius:999px;
  padding:.5rem 1.4rem;font-size:1.25rem;font-weight:800;box-shadow:0 .3rem 0 var(--orange-deep)}
.q-text{font-size:1.85rem;line-height:1.9;font-weight:700;padding-top:.8rem;word-break:break-word}
.opt{display:flex;align-items:center;gap:1.2rem;background:#fff;border:.35rem solid #F0E7D9;
  border-radius:1.8rem;padding:1.3rem 1.4rem;margin:1rem 1.8rem 0;cursor:pointer;transition:transform .1s}
.opt:active{transform:translateY(.25rem)}
.opt .idx{width:3.6rem;height:3.6rem;flex:0 0 3.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.6rem;background:#F4EEE3;color:#A08F79}
.opt .txt{flex:1;font-size:1.6rem;line-height:1.7;word-break:break-word}
.opt.sel{border-color:var(--primary);background:#F2FBFF}
.opt.sel .idx{background:var(--primary);color:#fff}
.fill-box{margin:1.4rem 1.8rem 0}
.fill-box input{width:100%;border:.35rem solid #E4EFF6;border-radius:1.8rem;padding:1.4rem 1.6rem;
  font-size:1.7rem;font-family:inherit;background:#fff;color:var(--ink);outline:none;box-shadow:inset 0 .2rem .6rem rgba(120,150,170,.06)}
.fill-box input:focus{border-color:var(--primary)}
.btn-submit{margin:1.8rem 1.8rem 0}

/* ================= 解析页 ================= */
.res-card{background:var(--card);border-radius:2.4rem;padding:2.2rem 1.6rem;text-align:center;margin:1.8rem 1.8rem 0;
  border:.3rem solid #EAF6FC;box-shadow:0 .5rem 0 rgba(160,190,205,.13)}
.res-badge{width:9.5rem;height:9.5rem;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;
  background:#EAF9F2;animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
.res-badge svg{width:5.2rem;height:5.2rem;fill:var(--ok)}
.res-badge.bad{background:var(--wrong-bg)}
.res-badge.bad svg{fill:var(--wrong)}
.res-word{font-size:2.3rem;font-weight:900;color:var(--ok)}
.res-word.bad{color:var(--wrong)}
.res-sub{font-size:1.4rem;color:var(--muted);margin-top:.5rem;font-weight:700}
.sec{background:var(--card);border-radius:2rem;padding:1.6rem 1.6rem;margin:1.2rem 1.8rem 0;
  border:.3rem solid #EAF6FC;box-shadow:0 .4rem 0 rgba(160,190,205,.12)}
.sec h3{margin:0 0 1rem;font-size:1.7rem;color:var(--primary-deep);font-weight:900;
  display:flex;align-items:center;gap:.6rem}
.sec h3::before{content:"";width:1rem;height:1rem;border-radius:.3rem;background:var(--yellow);display:block;transform:rotate(45deg)}
.sec .label{font-size:1.35rem;color:var(--muted);margin:.9rem 0 .3rem;font-weight:700}
.sec .val{font-size:1.6rem;line-height:1.85;color:var(--ink);word-break:break-word}
.sec .val.bad{color:var(--wrong)}
.sec .val.good{color:var(--ok)}
.poem-full{font-size:1.6rem;line-height:2.1}
.poem-full .meta{color:var(--muted);font-size:1.4rem;margin-bottom:.8rem}
.btn-next{margin:1.6rem 1.8rem 0}
/* 小榉讲解气泡 */
.bot-ask{display:flex;align-items:center;gap:1rem;margin:1.2rem 1.8rem 0;background:linear-gradient(100deg,#FFF3DC,#FFE9F0);
  border:.3rem solid #FFD9E6;border-radius:1.8rem;padding:1.1rem 1.2rem;cursor:pointer;box-shadow:0 .4rem 0 rgba(255,175,190,.3)}
.bot-ask .mini{width:4.4rem;height:4.4rem;flex:0 0 4.4rem;object-fit:contain}
.bot-ask .say{flex:1;font-size:1.5rem;font-weight:800;color:var(--orange-deep)}
.bot-ask .go{font-size:2.2rem;color:#FF8FA8;font-weight:900}
.bot-answer{display:none;margin:1rem 1.8rem 0;background:#FFFDF5;border:.3rem dashed #FFDCA8;border-radius:1.8rem;
  padding:1.4rem 1.4rem;font-size:1.5rem;line-height:2;white-space:pre-wrap;color:var(--ink)}
.bot-answer.on{display:block;animation:pop .3s cubic-bezier(.34,1.56,.64,1)}

/* ================= 成绩页 ================= */
.score-num{font-size:6.2rem;font-weight:900;line-height:1.15;
  background:linear-gradient(96deg,#FF9A3C,#FF6F91 55%,#56C8E8);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.score-stars{font-size:2.6rem;letter-spacing:.4rem;margin:.3rem 0 .6rem}
.score-word{font-size:1.7rem;font-weight:800;color:var(--primary-deep)}
.score-meta{display:flex;justify-content:space-around;margin:1.8rem 0 .2rem;text-align:center}
.score-meta div span{display:block;font-size:1.35rem;color:var(--muted);font-weight:700}
.score-meta div b{font-size:2.1rem;color:var(--ink)}
.btn-row{display:flex;gap:1.2rem;padding:1.6rem 1.8rem 0}
.btn-row button{flex:1}
.stamp{position:absolute;right:2.4rem;top:-1.2rem;background:var(--yellow);color:#8A5B00;font-weight:900;
  font-size:1.3rem;padding:.6rem 1rem;border-radius:.8rem;transform:rotate(12deg);box-shadow:0 .3rem 0 rgba(180,130,30,.25)}

/* ================= 提示 ================= */
#toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(74,59,44,.92);color:#fff;font-size:1.5rem;padding:1.1rem 1.8rem;border-radius:1.6rem;
  z-index:99;max-width:76%;text-align:center;pointer-events:none;font-weight:700;display:none}

/* ================= 身份条 / 教师入口 ================= */
.id-bar{display:flex;align-items:center;gap:.8rem;margin:1.6rem 1.8rem 0;padding:.9rem 1.2rem;
  border-radius:1.6rem;background:#fff;box-shadow:0 .3rem 0 rgba(120,110,90,.10)}
.id-bar.none{border:.28rem dashed #E5CFA8;background:#FFFCF3}
.id-bar.has{border:.28rem solid #C7EFDE;background:#F4FFF9}
.id-txt{flex:1;font-size:1.35rem;font-weight:800;color:var(--muted);line-height:1.4}
.id-bar.has .id-txt{color:#2E9C74}
.id-bar.has .id-txt b{color:#1E7F5C}
.id-btn{flex:0 0 auto;border:none;background:var(--orange);color:#fff;font-weight:900;font-size:1.3rem;
  padding:.7rem 1.2rem;border-radius:999px;box-shadow:0 .28rem 0 var(--orange-deep);cursor:pointer}
.id-btn.ghost{background:#fff;color:var(--muted);box-shadow:0 .28rem 0 #E3DACA}
.id-btn:active{transform:translateY(.2rem);box-shadow:none}
.teacher-link{display:block;margin:1.2rem auto 0;background:none;border:none;color:var(--muted);
  font-size:1.3rem;font-weight:800;text-decoration:underline;text-underline-offset:.3rem;cursor:pointer;
  font-family:inherit;padding:.4rem}

/* ================= 成绩同步提示 ================= */
.sync-note{margin:1.2rem 1.8rem 0;padding:1rem 1.2rem;border-radius:1.4rem;font-size:1.35rem;font-weight:800;
  background:#F6F4EE;color:var(--muted);text-align:center;line-height:1.6}
.sync-note.ok{background:#EEFBF4;color:#2E9C74;border:.24rem solid #C7EFDE}
.sync-note.warn{background:#FFF3F0;color:#C4564F;border:.24rem solid #FFD8CE}
.sync-note.ask{background:#FFFAF0;border:.28rem dashed #F0D6A6;color:#9A7A3C}
.sync-note.ask button{border:none;background:var(--orange);color:#fff;font-weight:900;font-size:1.3rem;
  padding:.6rem 1.2rem;border-radius:999px;margin-left:.4rem;cursor:pointer;font-family:inherit;
  box-shadow:0 .26rem 0 var(--orange-deep)}

/* ================= 认领弹窗 ================= */
.modal{display:none;position:fixed;inset:0;z-index:80;background:rgba(60,48,36,.45);
  align-items:flex-end;justify-content:center}
.modal.on{display:flex;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{width:100%;background:#FFFDF7;border-radius:2.4rem 2.4rem 0 0;padding:1.4rem 2rem 2.4rem;
  text-align:center;animation:slideUp .26s cubic-bezier(.34,1.4,.64,1)}
@keyframes slideUp{from{transform:translateY(60%)}to{transform:translateY(0)}}
.modal-mascot{width:9rem;height:9rem;object-fit:contain;margin-top:-5.4rem;
  filter:drop-shadow(0 .6rem 1rem rgba(70,150,180,.22))}
.modal-box h3{margin:.4rem 0 .6rem;font-size:2rem;color:var(--primary-deep)}
.modal-tip{margin:0 0 1.4rem;font-size:1.35rem;color:var(--muted);line-height:1.7}
.modal-in{width:100%;padding:1.2rem 1.4rem;margin-bottom:1rem;border:.28rem solid #EBDCC2;border-radius:1.4rem;
  font-size:1.5rem;font-family:inherit;color:var(--ink);background:#fff;outline:none}
.modal-in:focus{border-color:var(--primary)}
.modal-btns{display:flex;gap:1rem;margin-top:.6rem}
.modal-btns .btn{flex:1;font-size:1.5rem;padding:1.2rem 0}
.modal-foot{margin:1.2rem 0 0;font-size:1.25rem;color:#B0A08C}

/* ================= 教师端 ================= */
.t-table{border-radius:1.4rem;overflow:hidden;background:#fff;box-shadow:0 .3rem 0 rgba(120,110,90,.08)}
.t-row{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;font-size:1.35rem;font-weight:800}
.t-row+.t-row{border-top:.2rem solid #F4EEE3}
.t-head{background:#FFF6E4;color:var(--primary-deep);font-size:1.25rem}
.t-row span:nth-child(2),.t-row span:nth-child(3){flex:0 0 3.4rem;text-align:center}
.t-row span:nth-child(4){flex:0 0 5rem;text-align:center}
.t-row span:nth-child(5){flex:0 0 6.4rem;text-align:right;font-size:1.2rem;color:var(--muted);font-weight:700}
.t-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-rate.good{color:#2E9C74}
.t-rate.mid{color:#D98A18}
.t-rate.low{color:#E05A5A}
.t-bars{display:flex;flex-direction:column;gap:.8rem}
.t-bar-row{display:flex;align-items:center;gap:.8rem}
.t-bar-name{flex:0 0 10rem;font-size:1.3rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-bar-track{flex:1;height:1.4rem;background:#F3EDE2;border-radius:999px;overflow:hidden}
.t-bar-track i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#FFB84D,#FF7A8A)}
.t-bar-n{flex:0 0 4.6rem;text-align:right;font-size:1.25rem;font-weight:800;color:var(--muted)}
.t-chips{display:flex;flex-wrap:wrap;gap:.8rem}