:root{
  --bg:#F6F2EA;
  --card:#FFFFFF;
  --teal:#1C7D74;
  --teal-deep:#125B54;
  --teal-soft:#DCEEEC;
  --ink:#23302F;          /* 深，護眼高對比 */
  --ink-soft:#566463;
  --line:#E4DDD0;
  --star:#F5A623;
  --star-soft:#FDF0D6;
  --grow:#3FA776;
  --grow-soft:#E3F4EB;
  --correct:#2E9E68;
  --correct-soft:#E1F4EA;
  --wrong:#E1604F;
  --wrong-soft:#FBE8E5;
  --hi:#E8852B;
  --radius:18px;
  --shadow:0 4px 16px rgba(28,125,116,.10);
  --shadow-lift:0 10px 30px rgba(28,125,116,.18);
  --disp:'Fredoka',sans-serif;
  --eng:'Nunito',sans-serif;
  --zh:'Noto Sans TC',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--ink);font-family:var(--zh);
  font-size:18px;line-height:1.85;font-weight:500;        /* 護眼：大、深、不細 */
  -webkit-font-smoothing:antialiased;padding-bottom:40px;
  overscroll-behavior:contain;
}
.eng{font-family:var(--eng);}
.wrap{max-width:780px;margin:0 auto;padding:0 18px;}
.hide{display:none!important;}

/* ===== 登入鎖 ===== */
#lock{position:fixed;inset:0;background:linear-gradient(160deg,var(--teal),var(--teal-deep));
  display:flex;align-items:center;justify-content:center;z-index:200;flex-direction:column;gap:18px;color:#fff;padding:24px;}
#lock h1{font-family:var(--disp);font-size:34px;font-weight:700;}
#lock p{opacity:.85;font-size:15px;}
#lock input{font-size:20px;padding:13px 18px;border-radius:14px;border:none;text-align:center;width:240px;font-family:var(--zh);}
#lock button{background:var(--star);color:#3a2a00;border:none;font-family:var(--disp);font-weight:600;
  font-size:18px;padding:12px 36px;border-radius:30px;cursor:pointer;}
#lock .err{color:#FFD9D2;font-size:14px;min-height:20px;}

/* ===== HUD 頂部狀態列 ===== */
header{position:sticky;top:0;z-index:50;
  background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff;
  padding:14px 0 16px;box-shadow:0 3px 14px rgba(18,91,84,.3);}
.hud{display:flex;align-items:center;gap:12px;}
.hud .title{font-family:var(--disp);font-weight:600;font-size:17px;margin-right:auto;letter-spacing:.3px;}
.hud .title small{display:block;font-size:11px;opacity:.8;font-weight:400;font-family:var(--zh);}
.chip{background:rgba(255,255,255,.18);border-radius:30px;padding:6px 13px;font-family:var(--disp);
  font-weight:600;font-size:15px;display:flex;align-items:center;gap:5px;white-space:nowrap;}
.chip.star{background:var(--star);color:#4a3500;}
.lvbar-wrap{margin-top:12px;}
.lvbar-top{display:flex;justify-content:space-between;font-size:12.5px;opacity:.92;margin-bottom:5px;}
.lvbar{height:9px;background:rgba(255,255,255,.25);border-radius:9px;overflow:hidden;}
.lvbar i{display:block;height:100%;background:var(--star);border-radius:9px;transition:width .5s ease;}
.backbtn{background:rgba(255,255,255,.16);border:none;color:#fff;font-family:var(--zh);font-size:14px;
  padding:7px 14px;border-radius:30px;cursor:pointer;display:none;align-items:center;gap:4px;}
.backbtn.show{display:inline-flex;}
.backbtn:active{transform:scale(.96);}

/* ===== 通用 ===== */
.view{display:none;animation:fade .35s ease;}
.view.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.sec-title{font-family:var(--disp);font-weight:600;font-size:23px;color:var(--teal-deep);margin:24px 0 6px;}
.sec-desc{color:var(--ink-soft);font-size:15px;margin-bottom:16px;font-weight:400;}
.btn{font-family:var(--zh);font-size:16px;font-weight:600;padding:12px 22px;border-radius:30px;border:none;cursor:pointer;transition:.18s;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-deep);}
.btn-ghost{background:var(--card);color:var(--teal-deep);border:2px solid var(--teal-soft);}
.btn-star{background:var(--star);color:#4a3500;}
.btn-ask{background:var(--star-soft);color:#9A6B12;border:2px solid #F0D89A;}

/* ===== 首頁主選單 ===== */
.hero{text-align:center;padding:26px 0 6px;}
.hero .en{font-family:var(--disp);font-weight:600;font-size:27px;color:var(--teal-deep);}
.hero .zh{color:var(--ink-soft);font-size:15px;margin-top:3px;font-weight:400;}
.hero .tag{display:inline-block;margin-top:12px;background:var(--star-soft);color:#9A6B12;font-size:14px;
  padding:6px 15px;border-radius:30px;font-weight:600;}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;}
.mcard{background:var(--card);border-radius:var(--radius);padding:22px 18px;cursor:pointer;
  box-shadow:var(--shadow);border:2px solid transparent;transition:.2s;display:flex;flex-direction:column;gap:7px;}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--teal-soft);}
.mcard .ico{font-size:30px;}
.mcard h3{font-size:18px;font-weight:700;color:var(--teal-deep);}
.mcard p{font-size:13.5px;color:var(--ink-soft);font-weight:400;line-height:1.6;}
.shopcard{grid-column:1/-1;background:linear-gradient(120deg,var(--star-soft),#fff);}
.mom-link{text-align:center;margin-top:18px;}
.mom-link button{background:none;border:none;color:var(--ink-soft);font-size:13px;cursor:pointer;text-decoration:underline;font-family:var(--zh);}

/* ===== 複習：tabs ===== */
.tabs{display:flex;gap:8px;margin:16px 0 20px;flex-wrap:wrap;}
.tab{background:var(--card);border:2px solid var(--line);color:var(--ink-soft);padding:9px 18px;
  border-radius:30px;font-family:var(--zh);font-size:15px;font-weight:600;cursor:pointer;}
.tab.active{background:var(--teal);color:#fff;border-color:var(--teal);}
.subview{display:none;}
.subview.active{display:block;animation:fade .3s ease;}
.hl-w{font-family:var(--eng);background:var(--wrong-soft);color:var(--wrong);padding:1px 6px;border-radius:5px;font-weight:700;}

/* vocab */
.vsearch{width:100%;padding:13px 18px;border:2px solid var(--line);border-radius:30px;font-family:var(--zh);
  font-size:16px;margin-bottom:16px;background:var(--card);color:var(--ink);font-weight:500;}
.vsearch:focus{outline:none;border-color:var(--teal);}
.vcard{background:var(--card);border-radius:14px;padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow);border-left:5px solid var(--teal);}
.vcard .top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.vcard .word{font-family:var(--disp);font-weight:600;font-size:24px;color:var(--teal-deep);}
.vcard .pos{background:var(--teal-soft);color:var(--teal-deep);font-size:12px;padding:2px 9px;border-radius:20px;font-weight:600;}
.vcard .phon{font-family:var(--eng);color:var(--ink-soft);font-size:15px;}
.vcard .zh{font-size:17px;margin-top:3px;font-weight:600;}
.vcard .ex{background:var(--bg);border-radius:10px;padding:11px 14px;margin-top:10px;font-size:15px;}
.vcard .ex .en{font-family:var(--eng);}
.vcard .ex .cn{color:var(--ink-soft);font-size:14px;display:block;margin-top:2px;font-weight:400;}
.vcard .usage{margin-top:9px;font-size:14px;color:#8a6d2a;background:var(--star-soft);border-radius:10px;padding:9px 13px;line-height:1.7;}
.vcard .usage b{color:#6d5316;}

/* grammar */
.gblock{background:var(--card);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:var(--shadow);}
.gblock h4{font-size:18px;color:var(--teal-deep);font-weight:700;margin-bottom:8px;}
.gblock .plain{background:var(--star-soft);border-radius:10px;padding:11px 14px;font-size:15px;color:#7a560f;margin:10px 0;line-height:1.8;font-weight:400;}
.gblock .plain b{color:#5e420a;font-weight:700;}
.gblock .tip{font-size:14px;color:var(--ink-soft);margin-top:10px;font-weight:400;}
.betable{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px;}
.betable td{border:1px solid var(--line);padding:10px 12px;}
.betable .now{font-family:var(--eng);color:var(--ink-soft);}
.betable .arrow{text-align:center;color:var(--teal);font-weight:700;}
.betable .past{font-family:var(--eng);color:var(--teal-deep);font-weight:700;}
.betable .note{font-size:12.5px;color:var(--ink-soft);font-family:var(--zh);}
.timeline{margin:18px 6px;}
.tl-line{height:4px;background:linear-gradient(90deg,var(--teal) 55%,var(--line));border-radius:4px;}
.tl-pts{display:flex;justify-content:space-between;margin-top:-9px;}
.tl-pt{text-align:center;flex:1;}
.tl-dot{width:16px;height:16px;border-radius:50%;background:var(--teal);margin:0 auto;border:3px solid #fff;box-shadow:0 0 0 2px var(--teal);}
.tl-pt.now .tl-dot{background:var(--star);box-shadow:0 0 0 2px var(--star);}
.tl-lab{font-size:13px;color:var(--ink-soft);margin-top:7px;}
.tl-val{font-family:var(--disp);font-size:16px;color:var(--teal-deep);font-weight:600;}
.tl-pt.now .tl-val{color:#C68A12;}
.edgrid,.prongrid{display:grid;gap:10px;margin-top:12px;}
.edgrid{grid-template-columns:1fr 1fr;}
.prongrid{grid-template-columns:1fr 1fr 1fr;}
.edcell,.proncell{background:var(--bg);border-radius:10px;padding:12px;border-top:3px solid var(--teal);}
.edcell .rule{font-size:13px;color:var(--ink-soft);margin-bottom:6px;}
.edcell .pair{font-family:var(--eng);font-size:16px;}
.edcell .pair b{color:var(--correct);}
.proncell{text-align:center;}
.proncell .ipa{font-family:var(--eng);font-weight:700;color:var(--teal-deep);font-size:20px;}
.proncell .when{font-size:12px;color:var(--ink-soft);margin:5px 0;}
.proncell .egs{font-family:var(--eng);font-size:14px;}
.sentrow{margin-bottom:14px;}
.sentrow .label{font-size:14px;color:var(--ink-soft);margin-bottom:6px;font-weight:400;}
.blocks{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-family:var(--eng);font-size:17px;}
.blk{padding:5px 12px;border-radius:9px;font-weight:700;}
.blk-s{background:#DCEAEC;color:#256570;}
.blk-v{background:var(--correct-soft);color:#256B45;}
.blk-t{background:var(--star-soft);color:#9A6B12;}
.blk-x{background:var(--wrong-soft);color:#B5402F;}
.blk-plain{color:var(--ink);font-weight:500;padding:5px 2px;}
.sentcn{font-size:13.5px;color:var(--ink-soft);margin-top:5px;font-weight:400;}

/* phrases */
.pcard{background:var(--card);border-radius:14px;padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow);}
.pcard .ph{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--teal-deep);}
.pcard .pm{font-size:15px;color:var(--ink-soft);margin-bottom:8px;}
.pcard .pe{background:var(--bg);border-radius:10px;padding:10px 13px;font-size:15px;}
.pcard .pe .cn{color:var(--ink-soft);font-size:13.5px;display:block;font-weight:400;}
.pcard .pos{margin-top:9px;font-size:14px;color:#256570;background:var(--teal-soft);border-radius:10px;padding:9px 13px;line-height:1.7;}

/* ===== 測驗 ===== */
.grouppick{display:grid;gap:12px;}
.gpick{background:var(--card);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow);cursor:pointer;
  border:2px solid transparent;display:flex;align-items:center;gap:14px;transition:.2s;}
.gpick:hover{border-color:var(--teal-soft);transform:translateY(-2px);}
.gpick .lvtag{font-family:var(--disp);font-size:13px;padding:4px 11px;border-radius:20px;font-weight:600;}
.lv1{background:var(--correct-soft);color:#256B45;}
.lv2{background:var(--star-soft);color:#9A6B12;}
.lv3{background:var(--wrong-soft);color:#B5402F;}
.gpick h4{font-size:18px;color:var(--teal-deep);}
.gpick small{color:var(--ink-soft);font-weight:400;}
.quiz-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.combo{font-family:var(--disp);font-size:15px;color:var(--hi);font-weight:600;min-width:74px;}
.progress-wrap{flex:1;background:var(--line);height:11px;border-radius:11px;overflow:hidden;}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--teal),var(--correct));width:0;transition:width .4s;border-radius:11px;}
.progress-txt{font-family:var(--disp);font-size:15px;color:var(--teal-deep);font-weight:600;}
.qcard{background:var(--card);border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow);margin-top:12px;}
.qtext{font-family:var(--eng);font-size:19px;line-height:1.7;margin-bottom:16px;}
.qtext .cn{display:block;font-family:var(--zh);font-size:14px;color:var(--ink-soft);margin-top:6px;font-weight:400;}
.opt{display:block;width:100%;text-align:left;background:var(--bg);border:2px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:10px;font-family:var(--eng);font-size:17px;cursor:pointer;transition:.16s;color:var(--ink);font-weight:600;}
.opt:hover:not(:disabled){border-color:var(--teal);background:var(--teal-soft);}
.opt:disabled{cursor:default;}
.opt .ol{font-weight:700;color:var(--teal);margin-right:8px;}
.opt.correct{background:var(--correct-soft);border-color:var(--correct);}
.opt.wrong{background:var(--wrong-soft);border-color:var(--wrong);}
.feedback{margin-top:14px;border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.75;display:none;font-weight:400;}
.feedback.show{display:block;animation:fade .3s;}
.feedback.ok{background:var(--correct-soft);border-left:5px solid var(--correct);}
.feedback.no{background:var(--wrong-soft);border-left:5px solid var(--wrong);}
.feedback .ftag{font-weight:700;display:block;margin-bottom:4px;}
.feedback.ok .ftag{color:#256B45;}
.feedback.no .ftag{color:#B5402F;}
.star-pop{display:inline-block;background:var(--star);color:#4a3500;font-family:var(--disp);font-weight:600;
  padding:3px 12px;border-radius:20px;margin-left:8px;animation:pop .4s ease;}
@keyframes pop{0%{transform:scale(0);}60%{transform:scale(1.25);}100%{transform:scale(1);}}
.qactions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.done-card{text-align:center;background:var(--card);border-radius:var(--radius);padding:34px 22px;box-shadow:var(--shadow);}
.done-card .big{font-size:54px;}
.done-card .msg{color:var(--ink-soft);margin:8px 0 20px;font-weight:400;}

/* ===== 閱讀 ===== */
.readlist{display:grid;gap:12px;}
.rpick{background:var(--card);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow);cursor:pointer;border:2px solid transparent;transition:.2s;}
.rpick:hover{border-color:var(--teal-soft);transform:translateY(-2px);}
.rpick h4{font-size:18px;color:var(--teal-deep);}
.rpick small{color:var(--ink-soft);font-weight:400;}
.passage{background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
  font-family:var(--eng);font-size:17px;line-height:2;white-space:pre-wrap;}
.passage .vhint{font-family:var(--zh);font-size:13.5px;color:var(--ink-soft);margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-weight:400;}
.trans{display:none;background:var(--teal-soft);border-radius:14px;padding:18px;margin-top:14px;white-space:pre-wrap;font-size:15.5px;line-height:1.9;color:var(--teal-deep);}
.trans.show{display:block;}

/* ===== 商店 ===== */
.shop-head{background:linear-gradient(120deg,var(--star),#F7B84B);border-radius:var(--radius);padding:18px 22px;color:#4a3500;margin-bottom:16px;}
.shop-head .bal{font-family:var(--disp);font-size:30px;font-weight:700;}
.shop-head .lv{font-size:14px;font-weight:600;opacity:.9;}
.rcard{background:var(--card);border-radius:14px;padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;}
.rcard .info{flex:1;}
.rcard h4{font-size:17px;color:var(--ink);}
.rcard small{color:var(--ink-soft);font-weight:400;font-size:13px;display:block;}
.rcard .meta{font-size:12.5px;color:var(--ink-soft);margin-top:4px;font-weight:400;}
.rcard .cost{font-family:var(--disp);font-weight:600;color:var(--hi);font-size:17px;white-space:nowrap;}
.rcard .cost s{color:var(--ink-soft);font-size:13px;font-weight:400;}
.rcard.locked{opacity:.55;}
.lockbadge{background:var(--line);color:var(--ink-soft);font-size:12px;padding:5px 12px;border-radius:20px;white-space:nowrap;}

/* ===== 媽媽後台 ===== */
.admin-sec{background:var(--card);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow);}
.admin-sec h4{font-size:17px;color:var(--teal-deep);margin-bottom:12px;}
.frow{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;align-items:center;}
.frow label{font-size:14px;color:var(--ink-soft);min-width:84px;font-weight:400;}
.frow input{flex:1;min-width:100px;border:2px solid var(--line);border-radius:10px;padding:9px 12px;font-family:var(--zh);font-size:15px;}
.frow input:focus{outline:none;border-color:var(--teal);}
.adm-reward{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;}
.adm-reward .r1{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.adm-reward .rn{font-weight:700;}
.smallbtn{font-size:13px;padding:6px 12px;border-radius:20px;border:none;cursor:pointer;font-family:var(--zh);}
.sb-edit{background:var(--teal-soft);color:var(--teal-deep);}
.sb-del{background:var(--wrong-soft);color:var(--wrong);}
.sb-give{background:var(--correct);color:#fff;}
.redeem-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;}
.tag-pending{background:var(--star-soft);color:#9A6B12;font-size:12px;padding:3px 9px;border-radius:20px;}
.tag-given{background:var(--correct-soft);color:#256B45;font-size:12px;padding:3px 9px;border-radius:20px;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.stat-cell{background:var(--bg);border-radius:12px;padding:14px;text-align:center;}
.stat-cell .n{font-family:var(--disp);font-size:24px;color:var(--teal-deep);font-weight:700;}
.stat-cell .l{font-size:12.5px;color:var(--ink-soft);font-weight:400;}

/* ===== 問 AI ===== */
.sop{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px;}
.sop h4{color:var(--teal-deep);font-size:17px;margin-bottom:14px;}
.sop-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;font-size:15px;line-height:1.7;font-weight:400;}
.sop-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;font-family:var(--disp);font-weight:600;display:flex;align-items:center;justify-content:center;}
.quick{display:flex;flex-wrap:wrap;gap:8px;}
.quick-btn{background:var(--star-soft);color:#9A6B12;border:2px solid #F0D89A;border-radius:30px;padding:10px 16px;font-family:var(--zh);font-size:14px;font-weight:600;cursor:pointer;}
.quick-btn:active{transform:scale(.96);}
.copy-toast{display:none;margin-top:12px;background:var(--correct-soft);color:#256B45;border-radius:10px;padding:11px 14px;font-size:14px;font-weight:600;}
.copy-toast.show{display:block;animation:fade .25s;}

@media(max-width:560px){
  body{font-size:17px;}
  .menu{grid-template-columns:1fr;}
  .edgrid,.prongrid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .hud .title{font-size:15px;}
}