/* ===== 学习工作台 · 植物大战僵尸主题 ===== */
:root{
  --lawn-1:#8ed14f;
  --lawn-2:#6fbf3a;
  --lawn-dark:#4e9e2a;
  --sun:#ffd83d;
  --sun-deep:#ffb300;
  --soil:#a9743b;
  --zombie:#9b9b9b;
  --panel:#fffdf5;
  --ink:#2f3b22;
  --ink-soft:#5d6b48;
  --pink:#ff8fb1;
  --blue:#5ec8ff;
  --purple:#b388ff;
  --shadow:0 8px 24px rgba(60,90,20,.18);
  --radius:18px;
  --nav-w:88px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Comic Sans MS",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, #c8f08a 0, transparent 40%),
    radial-gradient(circle at 80% 90%, #aee572 0, transparent 45%),
    linear-gradient(160deg,#bfe98a,#7cc24a 55%,#5fae37);
  background-attachment:fixed;
  overflow:hidden;
  user-select:none;
}
.app{display:flex;height:100dvh;}

/* ---------- 飘落阳光 ---------- */
.sun-layer{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.sun-fall{
  position:absolute;top:-40px;font-size:22px;animation:fall linear forwards;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
@keyframes fall{to{transform:translateY(110vh) rotate(220deg);opacity:.2;}}

/* ---------- 左侧导航 ---------- */
.sidebar{
  width:var(--nav-w);flex:0 0 var(--nav-w);
  background:linear-gradient(180deg,#3c7d22,#2c5e18);
  display:flex;flex-direction:column;align-items:center;
  padding:10px 6px;gap:6px;z-index:5;
  box-shadow:4px 0 16px rgba(0,0,0,.25);
}
.brand{display:flex;flex-direction:column;align-items:center;color:#fff;margin-bottom:4px;}
.brand-logo{font-size:30px;animation:wobble 3s ease-in-out infinite;}
.brand-text{font-size:11px;font-weight:800;line-height:1.1;text-align:center;margin-top:2px;text-shadow:0 1px 2px rgba(0,0,0,.4);}
@keyframes wobble{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%;flex:1;overflow-y:auto;}
.nav-list::-webkit-scrollbar{width:0;}
.nav-item{
  width:100%;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;
  border-radius:14px;padding:8px 2px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;font-weight:700;transition:.18s;position:relative;
}
.nav-item .nav-ico{font-size:22px;}
.nav-item:hover{background:rgba(255,255,255,.25);transform:translateY(-2px);}
.nav-item.active{
  background:var(--sun);color:#5a3d00;
  box-shadow:0 4px 12px rgba(255,184,0,.6);
}
.nav-item .badge{
  position:absolute;top:2px;right:6px;background:var(--pink);color:#fff;
  font-size:9px;min-width:15px;height:15px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;padding:0 3px;
}
.nav-footer{display:flex;flex-direction:column;gap:6px;width:100%;}

/* ---------- 主区 ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;z-index:3;}
.topbar{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:rgba(255,253,245,.92);backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,.12);z-index:4;
}
.hamburger{display:none;border:0;background:transparent;font-size:24px;cursor:pointer;color:var(--ink);}
.topbar-title{font-size:20px;font-weight:900;flex:1;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.sun-counter{
  display:flex;align-items:center;gap:4px;background:var(--sun);
  color:#7a5200;font-weight:900;padding:6px 12px;border-radius:20px;
  box-shadow:0 3px 8px rgba(255,184,0,.5);font-size:16px;
}
.sun-emoji{animation:spin 6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.base-status{
  border:0;cursor:pointer;background:#e9f7d8;color:var(--lawn-dark);
  font-weight:800;padding:6px 12px;border-radius:20px;font-size:13px;
}
.base-status.danger{background:#ffe0e0;color:#c0392b;animation:pulse 1s infinite;}
@keyframes pulse{50%{transform:scale(1.06);}}

.content{flex:1;overflow-y:auto;padding:18px;scroll-behavior:smooth;}
.content::-webkit-scrollbar{width:8px;}
.content::-webkit-scrollbar-thumb{background:rgba(80,120,30,.4);border-radius:8px;}

/* ---------- 通用卡片 ---------- */
.card{
  background:var(--panel);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);margin-bottom:16px;border:3px solid #fff;
}
.card.plant{border-color:#d8f0b0;}
.card h2{margin:0 0 12px;font-size:20px;display:flex;align-items:center;gap:8px;}
.card h3{margin:14px 0 8px;font-size:16px;color:var(--lawn-dark);}
.muted{color:var(--ink-soft);font-size:14px;}
.row{display:flex;flex-wrap:wrap;gap:10px;}
.center{text-align:center;}

/* ---------- 按钮 ---------- */
.btn{
  border:0;cursor:pointer;border-radius:14px;padding:12px 18px;
  font-size:15px;font-weight:800;color:#fff;background:var(--lawn-2);
  box-shadow:0 4px 0 var(--lawn-dark);transition:.12s;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lawn-dark);}
.btn.sun{background:var(--sun);color:#7a5200;box-shadow:0 4px 0 var(--sun-deep);}
.btn.blue{background:var(--blue);box-shadow:0 4px 0 #2a9bdc;}
.btn.pink{background:var(--pink);box-shadow:0 4px 0 #e35d88;}
.btn.ghost{background:#eef3e2;color:var(--lawn-dark);box-shadow:0 4px 0 #cfe0b3;}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px;}

/* ---------- 识字 ---------- */
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
.char-cell{
  background:linear-gradient(160deg,#fff,#f3fbe6);border-radius:16px;padding:14px;
  text-align:center;box-shadow:var(--shadow);border:2px solid #e3f0c9;position:relative;
  transition:.15s;
}
.char-cell.done{border-color:#9be36b;background:linear-gradient(160deg,#fff,#e9ffd6);}
.char-cell .big{font-size:46px;font-weight:900;line-height:1;margin:4px 0;}
.char-cell .pinyin{color:var(--lawn-dark);font-weight:700;font-size:14px;}
.char-cell .word{color:var(--ink-soft);font-size:13px;margin-top:4px;}
.char-cell .tick{position:absolute;top:6px;right:8px;font-size:18px;opacity:0;}
.char-cell.done .tick{opacity:1;}
.char-actions{display:flex;gap:6px;justify-content:center;margin-top:8px;}

/* ---------- 古诗 ---------- */
.poem-toolbar{margin-bottom:10px;}
.poem-search{
  width:100%;padding:12px 16px;border-radius:14px;border:2px solid #e3f0c9;
  font-size:15px;font-weight:700;box-shadow:var(--shadow);background:#fff;outline:none;
}
.poem-search:focus{border-color:var(--lawn-2);}
.poem-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.chip{
  border:0;cursor:pointer;border-radius:20px;padding:7px 14px;font-size:13px;font-weight:800;
  background:#eef3e2;color:var(--lawn-dark);transition:.15s;
}
.chip:hover{background:#e1efcf;}
.chip.active{background:var(--lawn-2);color:#fff;box-shadow:0 3px 8px rgba(95,158,55,.5);}
.poem-list{display:grid;gap:10px;}
.poem-item{
  background:#fff;border-radius:14px;padding:10px 12px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;border-left:6px solid var(--lawn-2);cursor:pointer;transition:.12s;
}
.poem-item:hover{transform:translateX(2px);}
.poem-item .poem-thumb{width:54px;height:54px;flex:0 0 54px;border-radius:12px;overflow:hidden;box-shadow:0 2px 6px rgba(60,90,20,.2);}
.poem-item .poem-info{flex:1;min-width:0;}
.poem-item .poem-title{font-weight:800;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.poem-item .poem-author{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.need-badge{background:var(--sun);color:#7a5200;border-radius:8px;padding:1px 6px;font-size:11px;font-weight:900;}
.poem-item .play{background:var(--sun);border:0;border-radius:50%;width:38px;height:38px;font-size:18px;cursor:pointer;flex:0 0 38px;}
.poem-detail{background:#fffef6;border-radius:16px;padding:18px;box-shadow:var(--shadow);white-space:pre-wrap;line-height:2;font-size:17px;}
.poem-detail .pd-art{width:120px;height:120px;margin:0 auto 12px;border-radius:16px;overflow:hidden;box-shadow:0 3px 10px rgba(60,90,20,.2);}
.poem-detail .pt{font-size:22px;font-weight:900;text-align:center;margin-bottom:6px;}
.poem-detail .pa{text-align:center;color:var(--ink-soft);margin-bottom:14px;}

/* ---------- 算术 ---------- */
.num-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;}
.num-cell{background:#fff;border-radius:12px;height:64px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;box-shadow:var(--shadow);cursor:pointer;border:2px solid #eef3e2;}
.num-cell:active{background:var(--sun);}
.quiz-box{background:#fff;border-radius:18px;padding:22px;text-align:center;box-shadow:var(--shadow);}
.quiz-q{font-size:54px;font-weight:900;margin:10px 0;color:var(--lawn-dark);letter-spacing:4px;}
.quiz-input{font-size:32px;width:120px;text-align:center;border:3px solid var(--lawn-2);border-radius:12px;padding:6px;font-weight:900;}
.quiz-feedback{font-size:18px;font-weight:800;min-height:26px;margin-top:10px;}
.tip-box{background:#fff8e1;border-left:6px solid var(--sun);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.7;}
.think-card{background:#fff;border-radius:14px;padding:14px;box-shadow:var(--shadow);}
.think-card .q{font-weight:800;font-size:16px;margin-bottom:8px;}

/* ---------- 英语 / 拼音 ---------- */
.word-card{background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);text-align:center;border-top:6px solid var(--blue);}
.word-card .en{font-size:34px;font-weight:900;color:var(--blue);}
.word-card .cn{color:var(--ink-soft);margin-top:4px;}
.pinyin-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;}
.py-cell{background:#fff;border-radius:12px;padding:10px;text-align:center;box-shadow:var(--shadow);cursor:pointer;border:2px solid #eef3e2;}
.py-cell .py{font-size:24px;font-weight:900;color:var(--purple);}
.py-cell .ex{font-size:13px;color:var(--ink-soft);}
.py-ex{background:#f6f0ff;border-left:6px solid var(--purple);border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.8;}

/* ---------- 控笔训练 ---------- */
.video-box{background:#000;border-radius:16px;overflow:hidden;aspect-ratio:9/16;max-width:360px;margin:0 auto;}
.video-box video,.video-box iframe{width:100%;height:100%;border:0;display:block;}
.trace-wrap{background:#fff;border-radius:16px;padding:12px;box-shadow:var(--shadow);text-align:center;}
#traceCanvas{width:100%;max-width:420px;border:2px dashed var(--lawn-2);border-radius:12px;background:#fffdf5;touch-action:none;}
.trace-tools{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap;}

/* ---------- 错本题 ---------- */
.wrong-item{background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);border-left:6px solid var(--pink);margin-bottom:10px;display:flex;align-items:center;gap:10px;}
.wrong-item .wi-main{flex:1;}
.wrong-item .wi-cat{font-size:12px;color:var(--ink-soft);}
.wrong-item .wi-q{font-weight:800;font-size:16px;}
.wrong-item .wi-a{font-size:13px;color:var(--pink);}

/* ---------- 运动饮食 ---------- */
.plan-card{background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);border-top:6px solid var(--lawn-2);}
.food-tag{display:inline-block;background:#eaf7d8;color:var(--lawn-dark);border-radius:12px;padding:6px 12px;margin:4px;font-weight:700;font-size:13px;}
.ex-item{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);margin-bottom:8px;}
.ex-item .ex-ico{font-size:26px;}

/* ---------- 奖励中心 ---------- */
.reward-hero{background:linear-gradient(160deg,#fff3c4,#ffe07a);border-radius:20px;padding:18px;text-align:center;box-shadow:var(--shadow);margin-bottom:16px;}
.reward-hero .sun-big{font-size:54px;animation:spin 8s linear infinite;}
.reward-list{display:grid;gap:12px;}
.reward-item{background:#fff;border-radius:16px;padding:14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;border:2px solid #ffe9a8;}
.reward-item .r-ico{font-size:34px;}
.reward-item .r-body{flex:1;}
.reward-item .r-name{font-weight:800;font-size:16px;}
.reward-item .r-cost{font-size:13px;color:var(--sun-deep);font-weight:700;}
.reward-item.locked{opacity:.6;}
.base-bar{height:18px;background:#e9f7d8;border-radius:10px;overflow:hidden;margin:10px 0;}
.base-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--lawn-2),var(--sun));width:0;transition:.5s;}

/* ---------- 打卡日历 ---------- */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-cell{aspect-ratio:1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;font-weight:800;background:#fff;box-shadow:var(--shadow);position:relative;}
.cal-cell.today{outline:3px solid var(--sun);}
.cal-cell.done{background:linear-gradient(160deg,#e9ffd6,#bff08a);color:var(--lawn-dark);}
.cal-cell.miss{background:#fff0f0;color:#c0392b;}
.cal-cell .sun-mini{font-size:11px;}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.cal-week span{text-align:center;font-size:12px;font-weight:800;color:var(--ink-soft);}
.stat-pills{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;}
.stat-pill{background:#fff;border-radius:14px;padding:10px 16px;box-shadow:var(--shadow);text-align:center;flex:1;min-width:90px;}
.stat-pill .sp-num{font-size:24px;font-weight:900;color:var(--lawn-dark);}
.stat-pill .sp-label{font-size:12px;color:var(--ink-soft);}
.summary-box{background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);line-height:1.8;font-size:14px;}

/* ---------- 朗读 FAB ---------- */
.speak-fab{
  position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;
  border:0;background:var(--sun);color:#7a5200;font-size:26px;cursor:pointer;
  box-shadow:0 6px 16px rgba(255,184,0,.6);z-index:20;display:none;
}
.speak-fab:active{transform:scale(.92);}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);
  background:rgba(40,60,20,.92);color:#fff;padding:12px 20px;border-radius:24px;
  font-weight:800;z-index:50;opacity:0;pointer-events:none;transition:.3s;max-width:80%;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- 安装横幅 ---------- */
.install-banner{
  position:fixed;left:0;right:0;bottom:0;background:#3c7d22;color:#fff;
  padding:10px 14px;display:flex;align-items:center;gap:10px;z-index:40;font-size:13px;
}
.install-banner[hidden]{display:none;}
.install-banner button{border:0;border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer;}
#installBtn{background:var(--sun);color:#7a5200;}
#installClose{background:transparent;color:#fff;font-size:20px;}

/* ---------- 弹窗 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal{background:#fff;border-radius:20px;padding:22px;max-width:360px;width:100%;text-align:center;box-shadow:var(--shadow);animation:pop .25s;}
@keyframes pop{from{transform:scale(.8);opacity:0;}}
.modal h3{margin:0 0 10px;font-size:20px;}
.modal .big-emoji{font-size:48px;}
.modal .modal-actions{display:flex;gap:10px;justify-content:center;margin-top:14px;}

/* ---------- 响应式：手机端 ---------- */
@media (max-width:640px){
  .hamburger{display:none;}  /* 菜单固定显示，不需要汉堡按钮 */
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:64px!important;
    transform:none!important;transition:none;z-index:10;
    padding:8px 2px;gap:4px;
  }
  .sidebar .brand-text{font-size:9px;}
  .sidebar .nav-ico{font-size:20px;}
  .sidebar .nav-item{padding:6px 1px;font-size:8px;border-radius:10px;}
  .sidebar .nav-label{font-size:8px;}
  .sidebar.open{transform:none!important;}
  .main{width:100%;margin-left:64px;}  /* 主内容右移，不被遮挡 */
  .topbar{padding:8px 8px 8px 8px;}
  :root{--nav-w:64px;}
  .char-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}
  .quiz-q{font-size:42px;}
}

/* ===== 弟子规模块 ===== */
.dz-list{display:flex;flex-direction:column;gap:14px;margin-bottom:14px;}
.dz-sec{padding:18px 18px 16px;}
.dz-head{margin:0 0 12px;font-size:21px;color:var(--lawn-dark);letter-spacing:.5px;
  display:flex;align-items:center;gap:8px;}
.dz-txt{display:flex;flex-wrap:wrap;gap:8px;line-height:1.9;
  font-size:20px;color:var(--ink);font-weight:600;}
.dz-phrase{background:linear-gradient(180deg,#fff7d6,#ffe9a8);
  border:1px solid #f2d27a;border-radius:10px;padding:4px 10px;
  box-shadow:0 2px 0 #e9c463;transition:transform .15s ease;}
.dz-phrase:hover{transform:translateY(-2px) scale(1.04);}
.dz-actions{display:flex;gap:10px;margin:14px 0 0;flex-wrap:wrap;}
.dz-yi{margin-top:14px;padding:14px 16px;background:#f3f8ec;
  border-left:4px solid var(--lawn-2);border-radius:10px;
  font-size:16px;line-height:1.85;color:var(--ink-soft);}
.dz-yi[hidden]{display:none;}
.dz-yi-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;}
.dz-yi-head b{color:var(--lawn-dark);font-size:16px;}
.dz-yi p{margin:0;}

/* ===== 奖励中心·开农场 ===== */
.farm-card{text-align:center;}
.farm-tree{font-size:88px;line-height:1.1;margin:6px 0 2px;
  filter:drop-shadow(0 6px 10px rgba(70,140,40,.35));
  animation: farm-sway 3.2s ease-in-out infinite;transform-origin:bottom center;}
@keyframes farm-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.farm-stage{font-size:20px;font-weight:700;color:var(--lawn-dark);margin-bottom:8px;}
.farm-bar{height:16px;border-radius:10px;background:#e6efd8;overflow:hidden;
  border:1px solid #cfe3b4;margin:6px auto;max-width:320px;}
.farm-bar-fill{height:100%;border-radius:10px;
  background:linear-gradient(90deg,#9ed36a,#5fae3a);transition:width .4s ease;}
.farm-card .quiz-input{text-align:center;}

/* ===== 奖励中心·数据备份 ===== */
.backup-card{border-left:5px solid #4ca64c;background:linear-gradient(180deg,#f3fbf0,#ffffff);}
.backup-card .btn{min-width:118px;}