/* English for Malaysia — style.css */
:root{
  --green:#0e7c66; --green-d:#0a5d4c; --green-l:#e6f4f0;
  --ink:#16241f; --muted:#5b6b65; --line:#d7e3de;
  --gold:#c98a1b; --bg:#f6f9f8; --card:#ffffff;
  --ok:#1f9d57; --warn:#c0532a; --low:#b22;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  padding-bottom:74px;
}
body[data-font="large"]{font-size:118%;}

/* topbar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;
  background:var(--green);color:#fff;padding:12px 14px;box-shadow:0 2px 8px rgba(0,0,0,.12);}
.topbar__back{background:rgba(255,255,255,.18);border:0;color:#fff;font-size:24px;line-height:1;
  width:38px;height:38px;border-radius:10px;cursor:pointer;}
.topbar__title{flex:1;margin:0;font-size:18px;font-weight:700;}
.topbar__flag{font-size:16px;opacity:.95;}

.sec-warn{background:#fff4e2;color:#7a4a12;border-bottom:1px solid #f0d9af;
  padding:9px 14px;font-size:13px;}

.main{max-width:760px;margin:0 auto;padding:14px;}
.screen__hint,.home__intro{color:var(--muted);font-size:14px;margin:6px 2px 14px;}

/* topic grid */
.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(min-width:620px){.topic-grid{grid-template-columns:1fr 1fr 1fr;}}
.topic{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;
  cursor:pointer;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.topic:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(14,124,102,.14);border-color:var(--green);}
.topic__icon{font-size:30px;}
.topic__name{font-weight:700;font-size:15px;color:var(--green-d);}
.topic__desc{font-size:12px;color:var(--muted);min-height:30px;}
.topic__bar{display:block;width:100%;height:6px;background:var(--green-l);border-radius:6px;overflow:hidden;margin-top:4px;}
.topic__bar i{display:block;height:100%;background:var(--green);border-radius:6px;}
.topic__count{font-size:11px;color:var(--muted);}

/* learn card */
.learn__progress{text-align:center;color:var(--muted);font-size:13px;font-weight:600;margin-bottom:8px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 18px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);}
.card__vi{margin:0 0 10px;color:var(--muted);font-size:15px;}
.card__en{margin:0 0 8px;font-size:27px;font-weight:800;color:var(--ink);letter-spacing:.2px;}
body[data-font="large"] .card__en{font-size:32px;}
.card__ipa{margin:0 0 6px;font-size:19px;color:var(--green-d);font-weight:600;
  font-family:"Charis SIL","Doulos SIL","Segoe UI",serif;}
.card__mean{margin:8px 0 0;background:var(--green-l);border:1px solid #cfe9e0;color:#13564a;
  padding:9px 12px;border-radius:10px;font-size:14.5px;line-height:1.55;}
.card__tip{margin:6px 0 0;background:#fff8e8;border:1px solid #f0e0b8;color:#7a5a14;
  padding:7px 10px;border-radius:10px;font-size:13px;}

.voice-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px;}
.voice-pick button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 4px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;}
.voice-pick button.active{background:var(--green);color:#fff;border-color:var(--green);}
.voice-pick.ready button{border-color:var(--green-l);}
.card__actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.btn{border:0;border-radius:12px;padding:13px 16px;font-size:15px;font-weight:700;cursor:pointer;flex:1;min-width:120px;}
.btn--listen{background:var(--green);color:#fff;}
.btn--slow{background:var(--green-l);color:var(--green-d);}
.btn--mic{background:#fff;color:var(--green-d);border:2px solid var(--green);width:100%;margin-top:12px;padding:14px;border-radius:14px;}
.btn--mic.rec{background:var(--warn);color:#fff;border-color:var(--warn);animation:pulse 1.1s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

.check-result{margin-top:14px;border-radius:14px;padding:13px 14px;border:1px solid var(--line);background:#fafdfb;}
.check-result.good{border-color:#bfe6cd;background:#f0fbf4;}
.check-result.ok{border-color:#f0dcae;background:#fdf7ea;}
.check-result.low{border-color:#f0c7c0;background:#fdf1ee;}
.check-score{font-weight:800;font-size:16px;margin-bottom:8px;}
.check-result.good .check-score{color:var(--ok);}
.check-result.ok .check-score{color:var(--warn);}
.check-result.low .check-score{color:var(--low);}
.check-words{font-size:16px;line-height:1.9;}
.check-words .w-ok{background:#d8f3e1;color:#0b5d32;padding:1px 6px;border-radius:6px;}
.check-words .w-no{background:#f7d9d2;color:#8a2c18;padding:1px 6px;border-radius:6px;text-decoration:line-through;}
.check-heard{margin-top:8px;font-size:12px;color:var(--muted);font-style:italic;}

.card__tools{display:flex;gap:10px;margin-top:16px;}
.chip{flex:1;border:1px solid var(--line);background:#fff;border-radius:20px;padding:9px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;}
.chip.on{background:var(--green);color:#fff;border-color:var(--green);}

.nav-arrows{display:flex;gap:12px;margin-top:16px;}
.arrow{flex:1;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;font-size:15px;font-weight:700;color:var(--green-d);cursor:pointer;}
.arrow:active{background:var(--green-l);}

/* QA */
.qa{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;}
.qa__q{margin:0 0 4px;font-weight:700;color:var(--green-d);}
.qa__vi{margin:0 0 8px;font-size:13px;color:var(--muted);}
.qa__a{margin:0 0 4px;font-size:17px;font-weight:600;}
.qa__ipa{margin:0 0 8px;font-size:15px;color:var(--green-d);font-family:"Charis SIL",serif;}
.mini-listen{background:var(--green-l);color:var(--green-d);border:0;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;font-size:13px;}

/* saved */
.saved{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:10px;position:relative;}
.saved__en{margin:0 0 3px;font-weight:700;font-size:17px;}
.saved__ipa{margin:0 0 3px;color:var(--green-d);font-size:14px;font-family:"Charis SIL",serif;}
.saved__vi{margin:0;color:var(--muted);font-size:13px;}
.saved .mini-listen{position:absolute;top:12px;right:12px;}
.empty-note{color:var(--muted);text-align:center;margin-top:40px;font-size:14px;}

/* settings */
.setting-row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;}
.setting-row>label{display:block;font-weight:700;margin-bottom:9px;font-size:14px;}
.seg{display:flex;gap:8px;flex-wrap:wrap;}
.seg button{flex:1;min-width:90px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px;font-weight:600;cursor:pointer;font-size:14px;color:var(--muted);}
.seg button.active{background:var(--green);color:#fff;border-color:var(--green);}
.setting-note{color:var(--muted);font-size:12.5px;margin:9px 2px 0;line-height:1.6;}

/* toast */
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:#16241f;color:#fff;
  padding:11px 16px;border-radius:12px;font-size:13.5px;z-index:50;max-width:88%;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.25);}

/* bottom nav */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:#fff;border-top:1px solid var(--line);z-index:30;}
.bottom-nav__item{flex:1;border:0;background:none;padding:9px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;color:var(--muted);}
.bottom-nav__item span{font-size:21px;}
.bottom-nav__item b{font-size:11px;font-weight:600;}
.bottom-nav__item.active{color:var(--green);}