/* 儿童学习端 · 宝宝巴士风格 (明亮·圆润·可爱·语音引导) */
.child-theme{background:linear-gradient(180deg,#CDEEFF 0%,#EAF6FF 40%,#FFF7EA 100%);}
.pad{min-height:100vh;display:flex;flex-direction:column;max-width:1280px;margin:0 auto;position:relative;overflow:hidden;}

/* 顶部 */
.ptop{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;
  background:linear-gradient(135deg,var(--sky),var(--teal));color:#fff;box-shadow:var(--shadow-sm);z-index:5;}
.pt-mascot{width:54px;height:54px;animation:floaty 3.2s ease-in-out infinite;}
.pt-title{font-size:var(--fs-xl);font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.06);}
.pt-stars{font-size:var(--fs-lg);font-weight:800;background:rgba(255,255,255,.22);
  padding:6px 16px;border-radius:var(--r-pill);}

.pscreen{flex:1;overflow-y:auto;padding:26px 30px 110px;}

/* 底栏 */
.pnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:1280px;
  display:flex;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:3px solid var(--line);box-shadow:0 -6px 20px rgba(46,120,180,.12);z-index:6;}
.pnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 0 14px;font-size:var(--fs-sm);font-weight:800;color:var(--text-soft);background:none;}
.pnav-btn span{font-size:30px;}
.pnav-btn.active{color:var(--teal-deep);}
.pnav-btn.active span{animation:wiggle 1.6s ease-in-out infinite;}

/* ============ 首页 ============ */
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.sky .cloud{position:absolute;background:#fff;border-radius:50px;opacity:.7;
  box-shadow:30px 0 0 -4px #fff,60px 6px 0 -8px #fff;}
.sky .c1{width:70px;height:26px;top:90px;left:-10%;animation:cloudMove 38s linear infinite;}
.sky .c2{width:54px;height:20px;top:170px;left:-10%;animation:cloudMove 52s linear infinite;animation-delay:-20s;}
.sky .c3{width:84px;height:30px;top:60px;left:-10%;animation:cloudMove 46s linear infinite;animation-delay:-30s;}

.home{position:relative;z-index:1;}
.home-hero{display:flex;gap:26px;align-items:center;background:rgba(255,255,255,.9);
  border-radius:var(--r-xl);padding:26px 30px;box-shadow:var(--shadow);border:3px solid #fff;}
.home-hero .dou{width:140px;height:140px;flex:none;animation:floaty 3s ease-in-out infinite;}
.home-hero .hi{flex:1;}
.home-hero .hi .h1{font-size:var(--fs-xl);font-weight:800;color:var(--teal-deep);}
.home-hero .hi .h2{font-size:var(--fs-md);color:var(--text-soft);margin-top:6px;}

.islands{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px;}
.island{position:relative;border-radius:var(--r-lg);padding:22px 16px;color:#fff;text-align:center;
  box-shadow:var(--shadow);min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:bounceIn .5s both;transition:transform .12s;}
.island:active{transform:scale(.95);}
.island .ic{font-size:54px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15));}
.island .lb{font-size:var(--fs-md);font-weight:800;margin-top:10px;text-shadow:0 2px 0 rgba(0,0,0,.08);}
.island .sub{font-size:var(--fs-xs);opacity:.92;margin-top:4px;}
.island.i-sky{background:linear-gradient(160deg,var(--sky),var(--sky-deep));}
.island.i-coral{background:linear-gradient(160deg,var(--coral),var(--coral-deep));}
.island.i-grass{background:linear-gradient(160deg,var(--grass),var(--grass-deep));}
.island.i-sun{background:linear-gradient(160deg,var(--sun),var(--sun-deep));color:#5A3D00;}
.island.i-sun .lb{text-shadow:none;}

.home-tip{margin-top:22px;background:var(--sun);color:#5A3D00;border-radius:var(--r-lg);
  padding:16px 20px;font-size:var(--fs-md);font-weight:700;display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-sm);}
.home-tip .em{font-size:30px;}

/* ============ 课程列表 ============ */
.section-title{font-size:var(--fs-xl);font-weight:800;color:var(--teal-deep);margin:4px 0 18px;
  display:flex;align-items:center;gap:10px;}
.course-card{display:flex;gap:22px;align-items:center;background:#fff;border-radius:var(--r-lg);
  padding:24px 26px;margin-bottom:18px;box-shadow:var(--shadow-sm);border:3px solid var(--sky-soft);
  cursor:pointer;transition:transform .12s,border-color .12s;}
.course-card:active{transform:scale(.98);}
.course-card .badge{width:92px;height:92px;border-radius:26px;background:var(--sky-soft);
  display:flex;align-items:center;justify-content:center;font-size:48px;flex:none;}
.course-card .meta .t{font-size:var(--fs-lg);font-weight:800;color:var(--text);}
.course-card .meta .s{font-size:var(--fs-sm);color:var(--text-soft);margin-top:6px;}
.course-card .go{margin-left:auto;font-size:var(--fs-md);color:var(--coral-deep);font-weight:800;
  background:var(--coral);color:#fff;padding:10px 18px;border-radius:var(--r-pill);}

/* ============ 课件引擎 ============ */
.lesson-bar{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.lesson-bar .back{background:#fff;border-radius:var(--r-pill);padding:10px 18px;font-weight:800;
  color:var(--teal-deep);box-shadow:var(--shadow-sm);font-size:var(--fs-sm);}
.lesson-bar .lt{font-size:var(--fs-lg);font-weight:800;color:var(--text);}

.course-view{display:flex;gap:22px;}
.cv-left{flex:1.7;background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow);
  padding:30px;display:flex;flex-direction:column;align-items:center;border:3px solid var(--sky-soft);position:relative;}
.cv-narrator{position:absolute;top:-30px;left:24px;display:flex;align-items:flex-end;gap:8px;z-index:2;}
.cv-narrator .d{width:60px;height:60px;animation:floaty 2.6s ease-in-out infinite;}
.cv-narrator .bubble{background:var(--teal);color:#fff;padding:8px 14px;border-radius:16px 16px 16px 2px;
  font-size:var(--fs-sm);font-weight:700;box-shadow:var(--shadow-sm);max-width:220px;}
.cv-goal{font-size:var(--fs-md);color:var(--teal-deep);background:var(--teal-soft);
  padding:12px 18px;border-radius:var(--r-md);margin:30px 0 14px;font-weight:800;width:100%;text-align:center;}
.cv-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:240px;}
.cv-prompt{font-size:var(--fs-lg);color:var(--text);text-align:center;margin-top:10px;font-weight:800;
  background:var(--sun);color:#5A3D00;padding:12px 20px;border-radius:var(--r-pill);}
.cv-controls{display:flex;gap:12px;margin-top:20px;width:100%;flex-wrap:wrap;}
.cv-controls button{flex:1;min-width:120px;padding:16px;border-radius:var(--r-lg);font-size:var(--fs-md);font-weight:800;
  box-shadow:var(--shadow-sm);}
.btn-prev{background:var(--card-soft);color:var(--teal-deep);}
.btn-repeat{background:var(--sky-soft);color:var(--sky-deep);}
.btn-call2{background:var(--coral);color:#fff;}
.btn-next{background:linear-gradient(135deg,var(--grass),var(--grass-deep));color:#fff;}

.cv-right{flex:1;background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow);
  padding:22px;border:3px solid var(--grass-soft);overflow-y:auto;max-height:560px;}
.cv-right h3{margin:0 0 14px;font-size:var(--fs-md);color:var(--grass-deep);}
.step{padding:14px 16px;border-radius:var(--r-md);margin-bottom:10px;font-size:var(--fs-sm);
  font-weight:800;display:flex;align-items:center;gap:12px;background:var(--card-soft);color:var(--text-soft);}
.step.cur{background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#5A3D00;}
.step.done{background:var(--grass-soft);color:var(--grass-deep);}
.step .num{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;
  align-items:center;justify-content:center;font-size:var(--fs-sm);flex:none;}

/* 互动元素 */
.count-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.count-emoji{font-size:84px;letter-spacing:6px;}
.num-chip{width:62px;height:62px;border-radius:18px;background:var(--sky-soft);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);font-weight:800;color:var(--sky-deep);}
.demo-big{font-size:var(--fs-2xl);font-weight:800;color:var(--text);text-align:center;}
.demo-op{color:var(--coral-deep);}
.answer-pill{display:inline-block;background:var(--grass-soft);color:var(--grass-deep);font-weight:800;
  padding:10px 24px;border-radius:var(--r-pill);font-size:var(--fs-md);margin-top:14px;animation:pop .4s both;}
.trace-big{font-size:84px;font-weight:800;color:var(--teal-deep);letter-spacing:8px;}

/* ============ 作业 ============ */
.chw{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  border:3px solid var(--coral-soft,#FFE9E2);padding:20px 24px;margin-bottom:14px;display:flex;align-items:center;gap:18px;}
.chw .ci{width:62px;height:62px;border-radius:18px;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:32px;flex:none;}
.chw .cmeta{flex:1;}
.chw .cmeta .t{font-size:var(--fs-md);font-weight:800;color:var(--text);}
.chw .cmeta .s{font-size:var(--fs-sm);color:var(--text-soft);margin-top:4px;}
.chw .cdo{padding:14px 22px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:800;
  background:linear-gradient(135deg,var(--grass),var(--grass-deep));color:#fff;box-shadow:var(--shadow-sm);}
.chw .cdo.done{background:var(--grass-soft);color:var(--grass-deep);}
.home-hint{text-align:center;color:var(--text-soft);font-size:var(--fs-sm);margin-top:14px;
  background:var(--sun);color:#5A3D00;padding:12px 18px;border-radius:var(--r-lg);font-weight:700;}

/* ============ 聊天 ============ */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 200px);min-height:420px;}
.chat-head{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r-lg);
  padding:14px 18px;box-shadow:var(--shadow-sm);margin-bottom:14px;}
.chat-head .d{width:56px;height:56px;animation:floaty 3s ease-in-out infinite;}
.chat-head .info .n{font-weight:800;font-size:var(--fs-md);color:var(--teal-deep);}
.chat-head .info .s{font-size:var(--fs-xs);color:var(--text-soft);}
.chat-box{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:12px;}
.msg{max-width:78%;padding:14px 18px;border-radius:22px;font-size:var(--fs-md);font-weight:700;line-height:1.5;
  animation:bounceIn .3s both;}
.msg.bot{align-self:flex-start;background:#fff;color:var(--text);border-bottom-left-radius:6px;box-shadow:var(--shadow-sm);}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--sky),var(--sky-deep));color:#fff;border-bottom-right-radius:6px;}
.chat-input{display:flex;gap:10px;margin-top:12px;align-items:center;}
.chat-input input{flex:1;padding:16px 20px;border:3px solid var(--sky-soft);border-radius:var(--r-pill);
  font-size:var(--fs-md);font-family:inherit;background:#fff;color:var(--text);}
.chat-input .send{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-deep));
  color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);flex:none;}
.chat-tips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.chat-tips .tip{background:var(--sky-soft);color:var(--sky-deep);padding:8px 14px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:800;}

/* ============ 奖励 ============ */
.reward-hero{display:flex;gap:22px;align-items:center;background:linear-gradient(135deg,var(--sun),var(--sun-deep));
  color:#5A3D00;border-radius:var(--r-xl);padding:30px;box-shadow:var(--shadow);margin-bottom:22px;}
.reward-hero .big{font-size:84px;animation:floaty 3s ease-in-out infinite;}
.reward-hero .t{font-size:var(--fs-xl);font-weight:800;}
.reward-hero .s{font-size:var(--fs-md);margin-top:6px;}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.badge{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:22px;text-align:center;
  border:3px solid var(--line);}
.badge .bi{font-size:56px;filter:grayscale(1);opacity:.4;}
.badge.got{border-color:var(--gold);background:linear-gradient(180deg,#FFF8E6,#FFF);}
.badge.got .bi{filter:none;opacity:1;animation:pop .4s both;}
.badge .bn{font-size:var(--fs-sm);font-weight:800;margin-top:10px;color:var(--text);}
.badge .bs{font-size:var(--fs-xs);color:var(--text-soft);margin-top:4px;}

/* 庆祝 */
.celebrate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;pointer-events:none;}
.celebrate .card{background:#fff;border-radius:var(--r-xl);padding:30px 44px;box-shadow:var(--shadow-lg);
  text-align:center;animation:pop .4s both;}
.celebrate .big{font-size:80px;animation:floaty 1.4s ease-in-out infinite;}
.celebrate .t{font-size:var(--fs-xl);font-weight:800;color:var(--gold);margin-top:8px;}
.celebrate .s{font-size:var(--fs-md);color:var(--text-soft);margin-top:6px;}

@media (max-width:760px){
  .islands{grid-template-columns:repeat(2,1fr);}
  .badges{grid-template-columns:repeat(2,1fr);}
  .course-view{flex-direction:column;}
  .home-hero{flex-direction:column;text-align:center;}
}

/* PWA 在线更新横幅 */
.sw-update{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(180%);
  display:flex;align-items:center;gap:10px;background:#1fb6b6;color:#fff;padding:10px 14px;border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);z-index:90;transition:transform .32s cubic-bezier(.2,.8,.2,1);font-weight:800;font-size:16px;}
.sw-update.show{transform:translateX(-50%) translateY(0);}
.sw-update button{background:#fff;color:#1fb6b6;border:none;border-radius:12px;padding:6px 14px;font-weight:800;cursor:pointer;font-size:15px;}

/* ========== V2 学拼音 / 练笔顺 / 更新提示 ========== */
.btn-quiz{background:#19c2c2;color:#fff;border:none;border-radius:999px;padding:10px 20px;
  font-size:var(--fs-md);font-weight:800;cursor:pointer;font-family:inherit;}
.btn-quiz.big{padding:14px 28px;font-size:var(--fs-lg);}
.btn-quiz.alt{background:#3a7bd5;}
.btn-quiz:active{transform:scale(.95);}
.lesson-bar .btn-quiz{margin-left:auto;}
.py-tabs{display:flex;gap:10px;justify-content:center;margin:6px 0 4px;}
.py-tab{background:#fff;border-radius:999px;padding:10px 22px;font-size:var(--fs-md);font-weight:800;
  color:var(--text-soft);cursor:pointer;box-shadow:0 4px 12px rgba(40,90,140,.08);}
.py-tab.cur{background:#19c2c2;color:#fff;}
.py-tip{text-align:center;color:var(--text-soft);font-size:var(--fs-sm);margin-bottom:12px;}
.py-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:0 4px;}
.py-grid.small{grid-template-columns:repeat(4,1fr);}
.py-card{background:#fff;border-radius:18px;padding:12px 6px;text-align:center;cursor:pointer;
  box-shadow:0 6px 16px rgba(40,90,140,.10);border:3px solid transparent;transition:transform .15s;}
.py-card:active{transform:scale(.94);}
.py-card .pl{font-size:42px;font-weight:900;color:#2b6cb0;line-height:1.15;}
.py-card .pw{font-size:var(--fs-sm);color:var(--text-soft);margin-top:2px;}
.py-card.right{border-color:#3ecf8e;background:#eafff4;}
.py-card.wrong{border-color:#ff8a8a;background:#fff0f0;animation:shake .35s;}
@keyframes shake{25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}
.quiz-wrap{text-align:center;padding:10px 20px;}
.quiz-speak{display:inline-block;background:#fff3e6;color:#ff7a4d;font-weight:900;font-size:var(--fs-lg);
  border-radius:999px;padding:14px 34px;cursor:pointer;box-shadow:0 6px 16px rgba(255,138,101,.25);}
.quiz-title{font-size:var(--fs-xl);font-weight:900;margin:16px 0 6px;color:#2b3a4a;}
.quiz-sub{color:var(--text-soft);font-size:var(--fs-md);margin-bottom:14px;}
.quiz-feedback{min-height:34px;font-size:var(--fs-lg);font-weight:800;color:#2fa96e;margin-top:8px;}
.stroke-wrap{text-align:center;padding:6px 12px;}
#glyphSvg{width:min(46vh,340px);height:min(46vh,340px);}
.mini-glyph{width:64px;height:64px;}
.ghost{opacity:1;}
.stroke-status{font-size:var(--fs-lg);font-weight:900;color:#2b3a4a;margin:8px 0;}
.stroke-btns{display:flex;gap:12px;justify-content:center;margin-top:6px;}
.trace-box{position:relative;width:min(60vh,380px);height:min(60vh,380px);margin:0 auto;
  border-radius:14px;overflow:hidden;touch-action:none;}
.trace-box svg{position:absolute;inset:0;width:100%;height:100%;}
#traceCanvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;}