/* dashboard */
.hero{
  background:linear-gradient(135deg,#4F7BE0,#7B61C9); color:#fff; border-radius:24px;
  padding:26px 22px; display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  box-shadow:var(--shadow); margin-bottom:16px;
}
.hero h1{margin:.1em 0; font-size:1.6rem}
.hero .owl{width:84px; height:84px}
.mission{background:linear-gradient(135deg,#FFF3E4,#FFE8D9); border:2px solid #FFD9B8}
.mission.done{background:linear-gradient(135deg,#E4F8EE,#D6F2E4); border-color:#A8E0C4}
.rbx-card{background:#1b1b22; color:#fff; border-radius:20px; padding:20px; box-shadow:var(--shadow); border:2px solid #33333f}
.rbx-logo{font-family:"Baloo 2",sans-serif; font-weight:700; letter-spacing:.5px; font-size:1.2rem}
.rbx-timer{font-family:"Baloo 2",monospace; font-size:2.6rem; font-weight:700; color:#7CFF9B; text-align:center; margin:6px 0}
.rbx-card .muted{color:#9a9aa5}
.streak{display:inline-flex; align-items:center; gap:6px; background:#fff; border:2px solid var(--acc); color:var(--acc); font-weight:900; border-radius:999px; padding:6px 14px}
.level-card{cursor:pointer; transition:transform .12s}
.level-card:hover{transform:translateY(-3px)}
.level-head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.badge{background:#EEF3FF; color:var(--pri-d); font-weight:700; border-radius:999px; padding:3px 12px; font-size:.8rem; white-space:nowrap}
.badge.gold{background:#FFF1D6; color:#B5791F}
.bar{height:12px; background:#F0EADF; border-radius:999px; overflow:hidden; margin-top:8px}
.bar>i{display:block; height:100%; background:linear-gradient(90deg,var(--acc),var(--warn)); border-radius:999px; transition:width .5s}
.stars{color:#E8A33D; font-size:1.1rem; letter-spacing:2px}
/* curriculum */
.unit{cursor:default}
.unit .lessons{margin-top:10px; display:grid; gap:8px}
.lrow{display:flex; align-items:center; gap:10px; background:#FBF7F0; border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; cursor:pointer}
.lrow.ready:hover{border-color:var(--pri); background:#F2F6FF}
.lrow .dot{width:12px; height:12px; border-radius:50%; flex:none}
.dot.ok{background:var(--good)} .dot.ready{background:var(--pri)} .dot.soon{background:#D8D2C6}
.pill{font-size:.72rem; font-weight:700; border-radius:999px; padding:2px 10px; margin-left:auto; white-space:nowrap}
.pill.ready{background:#E4EDFF; color:var(--pri-d)}
.pill.soon{background:#F1EDE4; color:#9A937F}
.pill.exam{background:#FFE9E2; color:#C4532F}
.focus-list{margin:8px 0 0; padding-left:20px; color:var(--soft); font-size:.92rem}
/* teach slides */
.slide-art{background:linear-gradient(160deg,#FDFBFF,#F2F6FF); border:2px solid #E4E9FA; border-radius:18px; padding:14px; margin-bottom:14px; overflow:hidden}
.slide-art svg{width:100%; max-height:250px; display:block; margin:auto}
.dots{display:flex; gap:8px; justify-content:center; margin:12px 0}
.dots i{width:10px; height:10px; border-radius:50%; background:#E0D8C8; cursor:pointer; transition:.2s}
.dots i.cur{background:var(--acc); transform:scale(1.35)}
.step-tag{display:inline-block; background:#EEF3FF; color:var(--pri-d); font-weight:700; border-radius:999px; padding:3px 12px; font-size:.8rem; margin-bottom:8px}
.math-eq{font-family:"Baloo 2","Noto Sans TC",serif; font-size:1.35rem; font-weight:700; color:var(--pri-d); text-align:center; margin:10px 0; letter-spacing:1px}
.kbox{background:#FFF7E8; border-left:6px solid var(--warn); border-radius:12px; padding:12px 16px; margin:12px 0}
.kbox.blue{background:#EEF3FF; border-color:var(--pri)}
.kbox.green{background:#E9F8F0; border-color:var(--good)}
.slide-nav{display:flex; gap:10px; justify-content:space-between; margin-top:14px; flex-wrap:wrap}
/* quiz */
.qtag{display:inline-block; background:#F1EDE4; color:#9A937F; font-weight:700; border-radius:999px; padding:3px 12px; font-size:.78rem; margin-bottom:8px}
.ans-input{width:100%; font-size:1.4rem; font-family:"Baloo 2",sans-serif; text-align:center; padding:14px; border:2.5px solid var(--line); border-radius:16px; outline:none}
.ans-input:focus{border-color:var(--pri)}
.opt{display:block; width:100%; text-align:left; background:#FBF7F0; border:2px solid var(--line); border-radius:14px; padding:14px 16px; margin:8px 0; font-size:1.05rem; cursor:pointer; min-height:52px}
.opt:hover{border-color:var(--pri)}
.opt.picked-ok{border-color:var(--good); background:#E9F8F0}
.opt.picked-bad{border-color:var(--bad); background:#FDEEEE}
.fb{border-radius:14px; padding:14px 16px; margin-top:12px}
.fb.ok{background:#E9F8F0; border:2px solid #A8E0C4}
.fb.no{background:#FDEEEE; border:2px solid #F2B8B8}
.fb .k{font-weight:900}
.solbox{background:#FFF7E8; border:2px dashed var(--warn); border-radius:14px; padding:14px 16px; margin-top:12px}
/* song player */
.song-card{background:linear-gradient(135deg,#2B2B3A,#4a3a6b); color:#fff; border-radius:20px; padding:20px; box-shadow:var(--shadow)}
.lyric{padding:8px 12px; border-radius:12px; margin:4px 0; opacity:.55; transition:.25s; font-weight:700}
.lyric small{display:block; font-weight:400; opacity:.85}
.lyric.cur{opacity:1; background:rgba(255,255,255,.14); transform:scale(1.03); box-shadow:0 0 0 2px rgba(255,200,120,.55)}
.note-float{display:inline-block; margin:0 4px}
/* exam */
.exam-timer{font-family:"Baloo 2",monospace; font-size:1.6rem; font-weight:700; color:var(--bad); text-align:center}
/* qa */
.qa-pass{color:var(--good); font-weight:900}
.qa-fail{color:var(--bad); font-weight:900}
.qa-table{width:100%; border-collapse:collapse; font-size:.85rem}
.qa-table td,.qa-table th{border-bottom:1px solid var(--line); padding:6px 8px; text-align:left}
/* confetti */
.confetti{position:fixed; top:-12px; width:10px; height:14px; z-index:99; pointer-events:none; border-radius:2px}
/* ===== 120-min session mode ===== */
.sesbar{
  position:sticky; top:64px; z-index:45; background:#2B2B3A; color:#fff;
  border-radius:16px; padding:10px 16px; margin-bottom:14px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.ses-pills{display:flex; gap:6px; flex-wrap:wrap}
.ses-pill{font-size:.75rem; font-weight:700; border-radius:999px; padding:3px 10px; background:#45455a; color:#b9b9c9; white-space:nowrap}
.ses-pill.cur{background:var(--acc); color:#fff}
.ses-pill.done{background:#2FA97C; color:#fff}
.ses-clock{margin-left:auto; text-align:right; line-height:1.15}
.ses-clock b{font-family:"Baloo 2",monospace; font-size:1.5rem}
.ses-clock small{display:block; font-size:.68rem; color:#b9b9c9}
.ses-btn{background:#45455a; color:#fff; border:none; border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer; min-height:40px}
.break-wrap{text-align:center; padding:26px 10px}
.breath{
  width:130px; height:130px; border-radius:50%; margin:16px auto;
  background:radial-gradient(circle at 35% 35%, #8FB6E8, #4F7BE0);
  animation:kBreath 6s ease-in-out infinite;
}
@keyframes kBreath{0%,100%{transform:scale(.75)} 50%{transform:scale(1.18)}}
@media(max-width:640px){ .sesbar{top:58px} .ses-clock b{font-size:1.2rem} }

/* voice diagnostic toast */
.vtoast{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:999;background:#FFF6EC;border:2px solid #F2A65A;border-radius:14px;padding:14px 18px;max-width:92vw;box-shadow:0 8px 30px rgba(0,0,0,.18);font-size:15px;line-height:1.55;color:#5B3A1E;animation:kFade .3s ease}
.vtoast .btn{margin-top:8px}

/* ===== AI 問答（問老師） ===== */
.ask-fab{
  position:fixed; right:16px; bottom:18px; z-index:998;
  background:var(--pri,#4F7BE0); color:#fff; border:none; border-radius:999px;
  padding:13px 20px; font-size:1rem; font-weight:800; cursor:pointer;
  box-shadow:0 8px 24px rgba(60,80,180,.35); min-height:48px;
}
.ask-fab:active{transform:scale(.95)}
.ask-drawer{
  position:fixed; right:12px; bottom:78px; z-index:999;
  width:min(400px, calc(100vw - 24px)); max-height:min(560px, calc(100vh - 120px));
  background:#fff; border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.25);
  display:flex; flex-direction:column; overflow:hidden; animation:kFade .25s ease;
}
.ask-drawer.hidden{display:none}
.ask-head{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:var(--pri,#4F7BE0); color:#fff; font-size:1rem;
}
.ask-head .owl{width:30px; height:30px}
.ask-close{margin-left:auto; background:rgba(255,255,255,.2); color:#fff; border:none; border-radius:8px; width:32px; height:32px; font-size:1rem; cursor:pointer}
.ask-msgs{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; min-height:200px}
.ask-msg .who{display:block; font-size:.7rem; color:#999; margin-bottom:2px}
.ask-msg.me{text-align:right}
.ask-msg .bubble{
  display:inline-block; max-width:88%; text-align:left; line-height:1.5; font-size:.93rem;
  background:#F1F4FF; border-radius:14px; padding:9px 12px; color:#333;
}
.ask-msg.me .bubble{background:var(--pri,#4F7BE0); color:#fff}
.ask-input{display:flex; gap:6px; padding:10px; border-top:1px solid var(--line,#e8e8ef)}
.ask-input input{flex:1; border:1.5px solid var(--line,#e8e8ef); border-radius:12px; padding:10px 12px; font-size:.95rem; min-height:44px}
.ask-mic{
  width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line,#e8e8ef);
  background:#fff; font-size:1.1rem; cursor:pointer; flex:none;
}
.ask-mic.on{background:#FFE3E3; border-color:#E05656; animation:kPulse 1.2s ease-in-out infinite}
@keyframes kPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,86,86,.35)} 50%{box-shadow:0 0 0 8px rgba(224,86,86,0)}}
@media(max-width:640px){ .ask-drawer{bottom:74px} }

/* 聲音診斷中心 */
.vt-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:12px 0}
.vt-grid .btn{min-height:52px; font-size:.95rem}
.vt-log{
  background:#101C2E; color:#D6E6FF; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.78rem; border-radius:12px; padding:10px 12px; max-height:220px; overflow:auto;
  line-height:1.6; word-break:break-all; -webkit-user-select:text; user-select:text;
}