/* 视觉基底：暖纸色 / 正楷（霞鹜文楷，本地分片）/ 珊瑚红大按钮 */
:root{
  --ink:#1E2C33; --ink-2:#5B7079; --paper:#FDF8F0; --card:#FFFFFF;
  --mint:#33B98F; --mint-soft:#E2F5EC; --coral:#FF6F61; --coral-soft:#FFE9E5;
  --sun:#FFC24B; --sun-soft:#FFF3D6; --sky:#4FA8E0; --sky-soft:#E6F3FC;
  --line:#E9DFCE; --r:16px;
  --kai:'LXGW WenKai','Kaiti SC','STKaiti','KaiTi','楷体','AR PL UKai CN',serif;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
body{
  font-family:var(--kai);
  background:var(--paper); color:var(--ink); line-height:1.65;
  max-width:430px; margin:0 auto; padding:0 16px 96px;
  background-image:radial-gradient(circle at 15% 8%, #FFF3D6 0 18%, transparent 18%),
                   radial-gradient(circle at 92% 26%, #E2F5EC 0 14%, transparent 14%);
  background-attachment:fixed;
}
h1,h2,h3,.brand,button{font-family:var(--kai);font-weight:400}
header{padding:20px 2px 14px; display:flex; align-items:center; justify-content:space-between}
.brand{font-size:26px; letter-spacing:1px; display:flex; align-items:center; gap:8px}
.brand .mascot{width:34px;height:34px;flex:none}
.chip{font-size:11px; color:var(--ink-2); background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:3px 10px}
.chip b{color:var(--mint)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:var(--coral); color:#fff; border:none; border-radius:14px;
  font-size:19px; letter-spacing:2px; padding:14px 10px; cursor:pointer;
  box-shadow:0 5px 0 #D9564A; transition:transform .08s, box-shadow .08s}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 #D9564A}
.btn[disabled]{opacity:.55; pointer-events:none}
.btn svg{width:22px;height:22px}
.btn.small{font-size:15px; padding:10px; box-shadow:0 4px 0 #D9564A}
.btn.ghost{background:#fff; color:var(--coral); border:1.5px dashed var(--coral); box-shadow:none}
.btn.ghost:active{transform:none}
.btn.mint{background:var(--mint); box-shadow:0 5px 0 #1E8A66}
.hint{font-size:11px; color:var(--ink-2); text-align:center; margin-top:8px}

.card{background:var(--card); border:1.5px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:10px; box-shadow:0 2px 10px rgba(30,44,51,0.05)}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; margin:2px 2px 10px}
.sec-head h2{font-size:19px; letter-spacing:1px}
.sec-head .sub{font-size:12px;color:var(--ink-2)}
section{margin-bottom:20px}

input,select,textarea{
  width:100%; font:inherit; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sky-soft); border-color:var(--sky)}
label{font-size:12px;color:var(--ink-2); display:block; margin-bottom:4px}

/* hero（首页） */
.hero{background:var(--card); border:1.5px solid var(--line); border-radius:20px; padding:16px 16px 12px; margin-bottom:16px; box-shadow:0 4px 14px rgba(30,44,51,0.05)}
.hero-top{display:flex; gap:14px; align-items:center; margin-bottom:12px; flex-wrap:wrap}
.hero-ring{width:56px;height:56px;flex:none;border-radius:50%;
  background:conic-gradient(var(--mint) 0 76%, #EFE7D6 76% 100%);
  display:grid; place-items:center; position:relative}
.hero-ring::after{content:''; position:absolute; inset:7px; background:var(--card); border-radius:50%}
.hero-ring b{position:relative; z-index:1; font-size:15px}
.hero-stats{flex:1 1 200px; min-width:180px; word-break:keep-all}
.hero-stats p{font-size:12px; color:var(--ink-2)}
.hero-stats strong{font-size:17px; display:block; color:var(--ink)}

/* 快捷入口 */
.quick{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px}
.q{background:var(--card); border:1.5px solid var(--line); border-radius:var(--r); padding:12px 4px 9px; text-align:center; cursor:pointer; transition:transform .12s}
.q:hover{transform:translateY(-3px); box-shadow:0 8px 18px rgba(30,44,51,0.08)}
.q .ic{width:40px;height:40px;margin:0 auto 6px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.q span{font-size:13px; font-weight:500}
.i1{background:var(--coral-soft)} .i2{background:var(--sun-soft)} .i3{background:var(--mint-soft)} .i4{background:var(--sky-soft)}

/* 列表行 */
.row{display:flex; gap:12px; align-items:center}
.row .num{width:46px;height:46px;flex:none;border-radius:13px;background:var(--mint-soft);color:#1E8A66;
  display:grid;place-items:center;font-family:var(--kai);font-size:18px}
.row.c2 .num{background:var(--sun-soft);color:#B07E1F}
.row.c3 .num{background:var(--sky-soft);color:#2F7DAD}
.row h3{font-size:16px; margin-bottom:2px}
.row p{font-size:12px;color:var(--ink-2)}
.row .arrow{margin-left:auto;color:#C9BB9E;flex:none}
.badge{display:inline-block;font-size:10px;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:2px}
.b-done{background:var(--mint-soft);color:#1E8A66}
.b-now{background:var(--sun-soft);color:#B07E1F}
.b-todo{background:#F0EADB;color:#9A8C6E}
.tag{flex:none;font-size:11px;font-weight:700;border-radius:8px;padding:5px 8px}
.t-math{background:var(--coral-soft);color:#C24A3F} .t-eng{background:var(--sky-soft);color:#2F7DAD} .t-chn{background:var(--sun-soft);color:#B07E1F} .t-sci{background:var(--mint-soft);color:#1E8A66}

/* 讲解步骤 */
.step{border-left:3px solid var(--sun);padding:0 0 14px 12px;position:relative}
.step h4{font-size:14px}
.step h4 em{font-style:normal;font-size:10px;background:var(--sun-soft);color:#B07E1F;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.step p{font-size:12px;color:var(--ink-2);white-space:pre-wrap}
.step::before{content:'';position:absolute;left:-7.5px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--sun);border:2px solid var(--paper)}

/* 聊天 */
.chat{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;padding:4px 2px}
.bubble{border-radius:12px;padding:9px 12px;font-size:13px;max-width:86%;white-space:pre-wrap}
.b-user{background:var(--mint-soft);align-self:flex-end}
.b-ai{background:var(--sky-soft);align-self:flex-start}
.b-sys{background:#fff;border:1.5px dashed var(--coral);color:var(--coral);align-self:flex-start;font-size:12px}
.chatbar{display:flex;gap:8px;margin-top:10px}
.chatbar input{margin-bottom:0;flex:1}
.chatbar .btn{width:auto;padding:10px 16px;font-size:15px;box-shadow:0 4px 0 #D9564A}

/* 口算 */
.drill-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.timer{font-size:22px;color:var(--coral);font-family:var(--kai)}
.problem{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.problem .pt{flex:1;font-size:16px}
.problem input{width:110px;margin-bottom:0;text-align:center}
.result-ok{color:#1E8A66;font-weight:700}
.result-bad{color:#C24A3F;font-weight:700}
.score-big{font-size:40px;text-align:center;color:var(--coral);font-family:var(--kai)}

/* 底部导航 */
nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;
  background:#fff;border-top:1.5px solid var(--line);display:flex;padding:8px 6px calc(10px + env(safe-area-inset-bottom));z-index:9}
nav a{flex:1;text-align:center;font-size:11px;color:var(--ink-2);text-decoration:none;cursor:pointer}
nav a.act{color:var(--coral)}

/* 登录 */
.login-wrap{min-height:80vh;display:flex;flex-direction:column;justify-content:center}
.login-card{background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:26px 20px;text-align:center; box-shadow:0 6px 20px rgba(30,44,51,0.06)}
.seg{display:flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.seg button{flex:1;border:none;background:#fff;padding:10px;font-size:15px;cursor:pointer;color:var(--ink-2)}
.seg button.act{background:var(--coral);color:#fff}

.soon{text-align:center;padding:60px 20px}
.soon .big{font-size:56px}
.soon h2{margin:12px 0 6px}
.soon p{color:var(--ink-2);font-size:13px}

.err{background:var(--coral-soft);color:#C24A3F;border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:10px}
footer{margin-top:26px;text-align:center;font-size:10px;color:#B9AA8B;line-height:1.9}
.topbar{display:flex;align-items:center;gap:10px;padding:18px 2px 12px}
.back{border:none;background:#EFE7D6;width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;color:var(--ink-2);flex:none}
.crumb{font-size:13px;color:var(--ink-2)}

.pet-progress{height:6px;background:#EFE7D6;border-radius:99px;overflow:hidden;margin:2px 0 12px}
.pet-progress-fill{height:100%;background:linear-gradient(90deg,#33B98F,#5CCBA4);border-radius:99px;transition:width .6s ease}
.hero-stats strong{font-size:18px}

.pet-pick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 2px}
.pet-pick .pp{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:#fff;font-size:24px;cursor:pointer;display:grid;place-items:center;transition:all .12s}
.pet-pick .pp.sel{border-color:var(--mint);background:var(--mint-soft);transform:scale(1.12)}

@keyframes petFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.05)}}
@keyframes petEgg{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes petPop{0%{transform:scale(.15) translateY(-34px);opacity:0}58%{transform:scale(1.2) translateY(4px);opacity:1}78%{transform:scale(.94) translateY(-1px)}100%{transform:scale(1) translateY(0)}}
@keyframes petGlow{0%,100%{box-shadow:inset 0 0 0 3px #fff, 0 0 0 0 rgba(255,194,75,.55)}50%{box-shadow:inset 0 0 0 3px #fff, 0 0 0 14px rgba(255,194,75,0)}}
.pet-glow{animation:petGlow 1.8s ease-in-out infinite}

/* ============ 英语跟读页 ============ */
.en-tabs{display:flex;gap:6px;justify-content:center;margin:6px 0 10px;flex-wrap:wrap}
.en-tab{border:2px solid var(--line);background:#fff;border-radius:20px;padding:5px 12px;font-size:13px;cursor:pointer;transition:all .12s}
.en-tab.sel{border-color:var(--mint);background:var(--mint-soft);font-weight:500;transform:scale(1.04)}
.en-card{background:#fff;border-radius:18px;box-shadow:0 6px 20px rgba(90,80,50,.08);padding:22px 16px;text-align:center;position:relative}
.en-count{font-size:12px;color:var(--ink-2);margin-bottom:2px}
.en-word{font-size:46px;font-weight:700;letter-spacing:1px;line-height:1.25;font-family:'Segoe UI',Arial,sans-serif;color:var(--ink-1)}
.en-zh{font-size:16px;color:var(--ink-2);margin-top:2px}
.en-actions{display:flex;gap:14px;justify-content:center;margin:16px 0 10px}
.en-ic{width:56px;height:56px;border-radius:50%;border:none;background:var(--mint-soft);color:#333;font-size:24px;cursor:pointer;display:grid;place-items:center;transition:all .12s}
.en-ic:active{transform:scale(.92)}
#enRec.rec{background:#FDE8E8;color:#D64545;animation:recPulse 1s ease-in-out infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(214,69,69,.35)}50%{box-shadow:0 0 0 10px rgba(214,69,69,0)}}
.en-status{font-size:14px;color:var(--ink-2);min-height:22px}
.en-score{margin-top:8px;min-height:44px}
.en-score-big{font-size:34px;font-weight:700;color:var(--mint)}
.en-nav{display:flex;gap:10px;justify-content:center;margin-top:12px}

/* ============ 英语课文区 ============ */
.en-intro{background:#FFF6E0;border-radius:12px;padding:10px 14px;font-size:14px;color:#7A5F22;margin:4px 0 10px;line-height:1.6}
.en-text{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.en-line{background:#fff;border-radius:14px;box-shadow:0 3px 10px rgba(90,80,50,.07);padding:9px 14px}
.en-line-top{display:flex;align-items:center;gap:8px}
.en-line-en{font-size:19px;font-weight:600;flex:1;cursor:pointer;font-family:'Segoe UI',Arial,sans-serif;color:var(--ink-1)}
.en-say{width:34px;height:34px;border-radius:50%;border:none;background:var(--mint-soft);font-size:15px;cursor:pointer;flex:none;display:grid;place-items:center}
.en-say:active{transform:scale(.9)}
.en-line-zh{font-size:13px;color:var(--ink-2);margin-top:2px}
.en-divider{text-align:center;color:var(--ink-2);font-size:13px;margin:4px 0 8px;font-weight:500}

/* 课文板块标题 */
.en-sec-title{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:#5C7A52;margin:14px 0 6px;padding-bottom:4px;border-bottom:1px dashed var(--line)}
.en-sec-title:first-child{margin-top:0}

/* —— 能量喂食（宠物成长 v3）—— */
.feed-btn { background: linear-gradient(135deg, #FFC371, #FF9F45); color: #5A3E00; border: none; box-shadow: 0 3px 12px rgba(255,159,69,.35); }
.feed-btn:active { transform: scale(.96); }
.feed-btn:disabled { opacity: .75; }
@keyframes petEat { 0%{transform:scale(1)} 15%{transform:scale(1.22) rotate(-8deg)} 30%{transform:scale(.92) rotate(7deg)} 50%{transform:scale(1.14)} 70%{transform:scale(.96)} 100%{transform:scale(1)} }

/* 点击喇叭/句子的瞬时反馈：按下的瞬间就有视觉，避免因 TTS 加载慢而重复点击 */
.en-say:active, .en-line-en:active, .en-ic:active, .pet-ball:active {
  transform: scale(0.88);
  transition: transform 0.06s ease;
}

/* ============ 09-05 宠物动作增强 ============ */
.pet-pat{animation:petPat .7s cubic-bezier(.28,.84,.42,1) !important}
@keyframes petPat{0%,100%{transform:scale(1) rotate(0)}20%{transform:scale(1.12,.88) rotate(-5deg)}45%{transform:scale(.94,1.12) rotate(5deg)}70%{transform:scale(1.05,.97) rotate(-2deg)}}
.pet-pat-heart{position:absolute;bottom:34%;pointer-events:none;z-index:7;font-size:17px;animation:heartUp 1.35s ease-out forwards}
@keyframes heartUp{0%{transform:translateY(0) scale(.4);opacity:0}20%{opacity:1;transform:translateY(-12px) scale(1.1)}100%{transform:translateY(-72px) scale(.85);opacity:0}}
.pet-egg>svg>g{animation:petEgg 1.8s ease-in-out infinite !important}
.pet-trot>svg{animation:petTrot 4.2s ease-in-out infinite}
@keyframes petTrot{0%,100%{transform:translateX(-7px) rotate(-1.5deg)}50%{transform:translateX(7px) rotate(1.5deg)}}

/* ============ 09-05 奖劸徽章角标 ============ */
.hero-pet{position:relative}
.pet-badges{position:absolute;right:8px;bottom:12px;display:flex;gap:5px;z-index:5;pointer-events:none}
.pet-badges span{background:#fff;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:18px;box-shadow:0 2px 7px rgba(30,44,51,.2);animation:badgePop .55s cubic-bezier(.28,.84,.42,1)}
@keyframes badgePop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1) rotate(0)}}