:root{
  --honey:#F5A417; --honey-deep:#E08A00; --honey-soft:#FBE3B0;
  --cream:#FFF8EC; --ink:#3A2A17; --ink-soft:#7A6A54;
  --mint:#12B58C; --mint-deep:#0E9A77; --mint-soft:#D6F3EA;
  --coral:#F2603F; --coral-soft:#FBDDD4;
  --card:#FFFFFF; --line:#EFE2CC; --hair:#F1E7D6;
  --font:"Segoe UI Variable","Segoe UI",ui-rounded,-apple-system,system-ui,"Nunito",sans-serif;
}
@media(prefers-color-scheme:dark){:root{
  --cream:#241a10; --ink:#FCEFD9; --ink-soft:#C6B295; --card:#2E2114;
  --line:#4A3722; --hair:#3A2A19; --mint-soft:#123a30; --coral-soft:#3d2018; --honey-soft:#5a4014;
}}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{font-family:var(--font);color:var(--ink);
  background:radial-gradient(120% 60% at 50% -10%,var(--honey-soft),transparent 60%),var(--cream);
  display:flex;justify-content:center;}
#app{width:100%;max-width:460px;min-height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.topbar{display:flex;align-items:center;gap:10px;padding:16px 18px 8px;}
.hex{width:38px;height:42px;display:grid;place-items:center;color:#fff;background:var(--honey);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);font-weight:800;font-size:19px;}
.brand{font-size:20px;font-weight:800;letter-spacing:-.4px;}
.brand span{color:var(--honey-deep);}
.pill{margin-left:auto;font-weight:800;font-size:13px;padding:6px 12px;border-radius:20px;background:var(--coral-soft);color:var(--coral);}
.pill.hide{display:none;}
.logout{font-size:12px;font-weight:800;padding:6px 10px;border-radius:20px;background:var(--honey-soft);color:var(--honey-deep);cursor:pointer;border:none;font-family:inherit;}
.iconbtn{font-size:18px;line-height:1;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--honey-soft);color:var(--honey-deep);cursor:pointer;border:none;font-family:inherit;transition:transform .08s,background .15s;}
.iconbtn:hover{background:var(--honey);color:#fff;} .iconbtn:active{transform:scale(.92);}
.iconbtn.hide{display:none;}
.screen{flex:1;padding:6px 18px 24px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;}
.hide{display:none!important;}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;}
.bubble{background:var(--card);border:1px solid var(--line);border-radius:16px 16px 16px 5px;padding:12px 14px;font-size:14px;line-height:1.55;}
.bubble b{color:var(--honey-deep);}
.btn{background:var(--honey);color:#fff;border:none;font-family:inherit;font-weight:800;font-size:15px;
  padding:15px;border-radius:15px;width:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .08s;}
.btn:active{transform:scale(.97);}
.btn.mint{background:var(--mint);} .btn.coral{background:var(--coral);}
.btn.ghost{background:transparent;color:var(--honey-deep);border:1.5px solid var(--honey);}
.btn.sm{padding:11px;font-size:14px;border-radius:13px;}
.btn:disabled{opacity:.45;cursor:default;}
.row{display:flex;gap:10px;}

.beebee{display:flex;flex-direction:column;align-items:center;gap:6px;}
.beetag{font-size:12px;font-weight:800;color:var(--honey-deep);background:var(--honey-soft);padding:4px 12px;border-radius:20px;}
.beetag.mint{color:var(--mint-deep);background:var(--mint-soft);}

.maptitle{font-size:12px;font-weight:800;color:var(--ink-soft);letter-spacing:.4px;text-transform:uppercase;}
.topic{display:flex;align-items:center;gap:12px;cursor:pointer;}
.thex{width:50px;height:55px;flex:0 0 auto;display:grid;place-items:center;font-size:22px;color:#fff;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
.thex.now{background:var(--honey);} .thex.done{background:var(--mint);} .thex.lock{background:var(--honey-soft);color:var(--ink-soft);}
.topic .lab{font-size:15px;font-weight:800;} .topic .sub{font-size:12px;color:var(--ink-soft);}
.topic.locked{opacity:.55;cursor:default;}

.steps{display:flex;gap:5px;}
.step{flex:1;height:6px;border-radius:4px;background:var(--hair);}
.step.ok{background:var(--mint);} .step.cur{background:var(--honey);}
.stepnum{font-size:12px;font-weight:800;color:var(--honey-deep);letter-spacing:.3px;}
.wimg{height:90px;border-radius:14px;background:var(--honey-soft);display:grid;place-items:center;font-size:42px;margin-bottom:10px;}
.word{font-size:30px;font-weight:800;letter-spacing:-.5px;text-align:center;}
.ipa{font-size:16px;color:var(--mint);font-weight:700;text-align:center;margin-top:2px;}
.mean{font-size:15px;color:var(--ink-soft);text-align:center;margin-top:4px;}
.speeds{display:flex;gap:8px;}
.sp{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 4px;text-align:center;
  font-size:11px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;}
.sp .i{font-size:18px;}
.meter{height:10px;border-radius:6px;background:var(--hair);overflow:hidden;}
.meter>span{display:block;height:100%;background:var(--mint);border-radius:6px;width:0;transition:width .5s;}
.mic{width:74px;height:74px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;
  font-size:30px;margin:0 auto;cursor:pointer;box-shadow:0 0 0 0 var(--coral-soft);transition:box-shadow .3s;border:none;}
.mic.live{box-shadow:0 0 0 12px var(--coral-soft);animation:pulse 1s infinite;}
@keyframes pulse{50%{box-shadow:0 0 0 18px var(--coral-soft);}}
/* Đang thu âm (MediaRecorder): đỏ đậm + nhịp mạnh, báo rõ "bấm để dừng". */
.mic.rec{background:#E5342B;box-shadow:0 0 0 12px rgba(229,52,43,.22);animation:recpulse .9s infinite;}
@keyframes recpulse{50%{box-shadow:0 0 0 20px rgba(229,52,43,.10);transform:scale(1.04);}}
/* Đang nhận diện (upload/transcribe): mờ nhẹ + con quay để không thấy "đơ". */
.mic.loading{opacity:.85;cursor:progress;}
.mic.loading::after{content:"";position:absolute;width:26px;height:26px;border:3px solid rgba(255,255,255,.45);
  border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;}
.mic{position:relative;}
.cmic.rec{background:#E5342B;animation:recpulse .9s infinite;}
.cmic.loading{opacity:.7;cursor:progress;}
.opt{background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:13px 15px;font-size:15px;font-weight:700;cursor:pointer;text-align:left;width:100%;font-family:inherit;}
.opt.good{border-color:var(--mint);background:var(--mint-soft);color:var(--mint-deep);}
.opt.bad{border-color:var(--coral);background:var(--coral-soft);color:var(--coral);}
input.txt{width:100%;font-family:inherit;font-size:18px;font-weight:700;text-align:center;padding:13px;border-radius:13px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);}
input.txt:focus{outline:none;border-color:var(--honey);}
.heard{font-size:13px;color:var(--ink-soft);text-align:center;}
.heard b{color:var(--ink);}
.vnbox{background:var(--mint-soft);border-radius:14px;padding:14px;}
.vnbox .k{font-size:10.5px;font-weight:800;color:var(--mint-deep);text-transform:uppercase;letter-spacing:.4px;}
.vnbox .t{font-size:18px;font-weight:800;margin-top:4px;}
.fix{font-size:13px;color:var(--ink-soft);}
.fix .r{color:var(--mint-deep);font-weight:800;} .fix .w{color:var(--coral);text-decoration:line-through;}
.center{text-align:center;} .muted{color:var(--ink-soft);font-size:13px;}
.big{font-size:26px;font-weight:800;} .h1{font-size:22px;font-weight:800;letter-spacing:-.4px;}
.warn{background:var(--coral-soft);color:var(--coral);border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:600;line-height:1.5;}
.stat{background:var(--honey-soft);border-radius:14px;padding:14px;text-align:center;flex:1;}
.stat .v{font-size:24px;font-weight:800;color:var(--honey-deep);} .stat .l{font-size:11px;color:var(--ink-soft);font-weight:700;margin-top:2px;}
.grow{flex:1;}
.gtag{background:var(--mint-soft);color:var(--mint-deep);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:800;display:inline-block;}
.gtitle{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-top:8px;}
.formula{background:var(--honey-soft);border-radius:14px;padding:13px;text-align:center;font-size:16px;font-weight:800;color:var(--honey-deep);}
.ex{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;}
.ex .en{font-weight:700;font-size:14px;} .ex .vi{font-size:12px;color:var(--ink-soft);}
.ex .play{margin-left:auto;color:var(--honey-deep);font-size:18px;cursor:pointer;}
.dots{display:flex;gap:5px;}
.dots span{width:8px;height:8px;border-radius:50%;background:var(--hair);}
.dots span.ok{background:var(--mint);} .dots span.cur{background:var(--honey);}

/* ====== AUTH ====== */
.field{display:flex;flex-direction:column;gap:4px;}
.field .lbl{font-size:12.5px;font-weight:800;color:var(--ink-soft);}
input.txt.left{text-align:left;font-size:15px;}
.linkline{text-align:center;font-size:13px;color:var(--ink-soft);}
.linkline a{color:var(--honey-deep);font-weight:800;cursor:pointer;text-decoration:none;}
.errmsg{font-size:13px;color:var(--coral);font-weight:700;text-align:left;min-height:1px;}
.okmsg{font-size:13px;color:var(--mint-deep);font-weight:700;text-align:left;}

/* ====== REMINDER BANNER (nhắc học trong app) ====== */
.reminder{display:flex;align-items:center;gap:10px;background:var(--mint-soft);border:1px solid var(--mint);
  border-radius:14px;padding:11px 12px;font-size:13px;line-height:1.45;color:var(--ink);}
.reminder .rico{font-size:20px;flex:0 0 auto;}
.reminder .rtxt{flex:1;}
.reminder .rtxt b{color:var(--mint-deep);}
.reminder .rclose{flex:0 0 auto;background:transparent;border:none;color:var(--ink-soft);font-size:15px;font-weight:800;
  cursor:pointer;padding:2px 6px;border-radius:8px;font-family:inherit;}

/* ====== CHAT (Trò chuyện với Cô Bee) ====== */
/* Avatar lớn của Cô Bee trên màn chat — đổi trạng thái talk/listen/idle. */
.chatbee{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0 4px;}
.chatbee .avatar{transition:transform .2s;}
.chatbee.talk .avatar{animation:beePulse 1s ease-in-out infinite;}
.chatbee.listen .avatar{animation:beeBob 1.4s ease-in-out infinite;}
.chatbee .statetag{font-size:11.5px;font-weight:800;color:var(--honey-deep);background:var(--honey-soft);padding:3px 12px;border-radius:20px;}
.chatbee.talk .statetag{color:var(--mint-deep);background:var(--mint-soft);}
.chatbee.listen .statetag{color:var(--coral);background:var(--coral-soft);}
@keyframes beePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@keyframes beeBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.chatwrap{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0;}
.chatlog{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:4px 2px;}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:88%;}
.msg.me{align-self:flex-end;flex-direction:row-reverse;}
.msg .av{flex:0 0 auto;}
.mbub{padding:11px 14px;border-radius:16px 16px 16px 5px;font-size:14px;line-height:1.5;background:var(--card);border:1px solid var(--line);}
.msg.me .mbub{border-radius:16px 16px 5px 16px;background:var(--honey);color:#fff;border-color:var(--honey);}
.mbub .corr{margin-top:8px;padding:8px 10px;background:var(--mint-soft);border-radius:10px;font-size:12.5px;color:var(--mint-deep);font-weight:700;}
.typing{font-size:13px;color:var(--ink-soft);font-style:italic;padding:2px 4px;}
.chatbar{display:flex;gap:8px;align-items:center;}
.chatbar input.txt{flex:1;text-align:left;font-size:15px;padding:12px;}
.cmic{width:48px;height:48px;flex:0 0 auto;border-radius:50%;background:var(--coral);color:#fff;border:none;font-size:20px;cursor:pointer;display:grid;place-items:center;}
.cmic.live{animation:pulse 1s infinite;}
.csend{width:48px;height:48px;flex:0 0 auto;border-radius:50%;background:var(--mint);color:#fff;border:none;font-size:20px;cursor:pointer;display:grid;place-items:center;}

/* Bảng thu âm kiên nhẫn của chat — hiện transcript trực tiếp + nút Xong/Huỷ. */
.chatrec{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1.5px solid var(--coral);
  border-radius:16px;padding:12px;}
.chatrec .reclive{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;color:var(--ink);}
.chatrec .reclive b{color:var(--honey-deep);}
.chatrec .recdot{flex:0 0 auto;width:12px;height:12px;margin-top:3px;border-radius:50%;background:var(--coral);
  animation:pulse 1s infinite;}
.chatrec .rectext{flex:1;}
.chatrec .recbtns{display:flex;gap:10px;}
.chatrec .recbtns .btn{padding:11px;font-size:14px;}

/* ====== SPINNER (đăng ký/đăng nhập) ====== */
.spin{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  display:inline-block;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ====== PHẢN HỒI NÚT (bấm / đang tải giọng) ====== */
.sp{transition:transform .08s,background .12s;} .sp:active{transform:scale(.95);}
.opt:active{transform:scale(.99);}
.mic:active{transform:scale(.95);}
[data-speak]{transition:transform .08s;}
[data-speak]:active{transform:scale(.96);}
[data-speak].speaking{opacity:.75;}
.btn.speaking,.sp.speaking{opacity:.75;pointer-events:none;}
.ex .play.speaking{opacity:.6;}

/* ====== ĐIỀU HƯỚNG TỪ (Ôn lại) ====== */
.wordnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.wnav{background:var(--card);border:1.5px solid var(--line);color:var(--ink);font-family:inherit;font-weight:800;
  border-radius:10px;padding:6px 11px;font-size:15px;cursor:pointer;line-height:1;}
.wnav:disabled{opacity:.35;cursor:default;}
.wnav.list{margin-left:auto;font-size:12.5px;color:var(--honey-deep);border-color:var(--honey);}
.wpos{font-size:12.5px;font-weight:800;color:var(--ink-soft);}
.reviewtag{font-size:11px;font-weight:800;color:var(--mint-deep);background:var(--mint-soft);padding:3px 9px;border-radius:20px;}
.wordlist{display:flex;flex-wrap:wrap;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;}
.wchip{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);
  font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;}
.wchip.done{background:var(--mint-soft);border-color:var(--mint);color:var(--mint-deep);}
.wchip.cur{background:var(--honey);border-color:var(--honey);color:#fff;}

/* ====== CHAT: gợi ý tiếng Việt + nghe lại ====== */
.chathint{font-size:12px;line-height:1.45;color:var(--mint-deep);background:var(--mint-soft);
  border-radius:11px;padding:8px 11px;}
.chathint b{color:var(--mint-deep);}
.msg.replayable{cursor:pointer;}
.msg.replayable .mbub{position:relative;}
.msg.replayable .replayico{margin-left:6px;font-size:12px;opacity:.55;}
.msg.replayable:hover .replayico{opacity:1;}
.msg.replayable.speaking .mbub{box-shadow:0 0 0 2px var(--mint) inset;}

/* ====== PWA: chip cài đặt + modal ====== */
.installchip{position:absolute;right:14px;bottom:14px;z-index:40;
  background:var(--honey);color:#fff;border:none;font-family:inherit;font-weight:800;font-size:13px;
  padding:9px 14px;border-radius:22px;cursor:pointer;box-shadow:0 6px 20px rgba(245,164,23,.4);}
.installchip:active{transform:scale(.96);}
.imodal-back{position:fixed;inset:0;z-index:60;background:rgba(30,20,8,.5);display:flex;align-items:flex-end;
  justify-content:center;padding:14px;animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.imodal{width:100%;max-width:430px;background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 -10px 40px rgba(0,0,0,.18);}
.imodal .ihead{display:flex;align-items:center;gap:12px;}
.imodal .ititle{font-size:18px;font-weight:800;}
.imodal .isub{font-size:12.5px;color:var(--ink-soft);line-height:1.45;margin-top:2px;}
.imodal .istep{display:flex;align-items:center;gap:12px;background:var(--cream);border:1px solid var(--line);
  border-radius:13px;padding:11px 13px;font-size:13.5px;line-height:1.5;}
.imodal .istep svg{flex:0 0 auto;}
.imodal .istep b{color:var(--honey-deep);}
.imodal .idismiss{text-align:center;font-size:12px;color:var(--ink-soft);cursor:pointer;padding:2px;text-decoration:underline;}