:root{--g:#1da15b;--g2:#117a42;--soft:#eaf8f0;--bg:#f5f7f5;--card:#fff;--text:#172019;--muted:#6b756e;--line:#e2e9e4}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
button,input{font:inherit}.app{max-width:1120px;margin:auto;padding:20px 18px 100px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.brand{display:flex;gap:12px;align-items:center}
.logo{width:54px;height:54px;border-radius:17px;background:linear-gradient(135deg,#68d89a,#15884d);display:grid;place-items:center;color:white;font-weight:900;line-height:.9}
.brand h1{margin:0;font-size:23px}.brand p{margin:3px 0 0;color:var(--muted);font-size:13px}.pill{background:var(--soft);color:var(--g2);padding:8px 12px;border-radius:999px;font-weight:800;font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 10px 28px rgba(25,64,40,.05)}
.hero{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}.heroMain,.heroSide,.panel{padding:24px}
.heroMain{background:linear-gradient(145deg,#fff,#eefaf3)}.hero h2{font-size:35px;line-height:1.08;margin:10px 0}.hero p{color:var(--muted);line-height:1.6}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.btn{border:0;border-radius:14px;padding:13px 18px;font-weight:800;cursor:pointer}.primary{background:var(--g);color:white}.secondary{background:white;border:1px solid var(--line)}
.metric{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.metric:last-child{border:0}.metric span{color:var(--muted)}.metric b{font-size:20px}
.section{display:flex;justify-content:space-between;align-items:center;margin:28px 0 14px}.section h2{margin:0}.section span{color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.module{padding:18px;text-align:left;cursor:pointer}.icon{width:46px;height:46px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:24px}.module h3{margin:12px 0 5px}.module p{color:var(--muted);font-size:14px;min-height:42px}.bar{height:8px;border-radius:99px;background:#edf1ee;overflow:hidden;margin:14px 0}.bar i{display:block;height:100%;background:var(--g)}
.learn{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}.wordcard,.exercise{padding:22px}.picture{height:220px;border-radius:20px;background:linear-gradient(145deg,#e3f7eb,#fbfdfc);display:grid;place-items:center;font-size:110px}
.speaker{display:block;margin:14px auto 0;border:0;background:var(--soft);width:48px;height:48px;border-radius:50%;font-size:22px}.word{text-align:center;font-size:42px;font-weight:900;color:var(--g2);margin-top:12px}.phon,.trans{text-align:center;color:var(--muted)}.trans{font-size:18px;margin-top:4px}.grammar,.example{margin-top:16px;background:#f8faf8;border:1px solid var(--line);border-radius:14px;padding:14px;line-height:1.5;color:#55615a}.example b,.example span{display:block}.example span{margin-top:5px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:18px}.stepItem{background:#edf1ee;color:var(--muted);padding:8px;border-radius:12px;display:flex;gap:7px;align-items:center}.stepItem b{width:24px;height:24px;border-radius:50%;background:white;display:grid;place-items:center;font-size:12px}.stepItem.active{background:var(--soft);color:var(--g2);font-weight:800}.stepItem.active b,.stepItem.done b{background:var(--g);color:white}
.stepLabel{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input{width:100%;padding:15px;border:1px solid #dce5df;border-radius:14px;font-size:18px;outline:none}.input:focus{border-color:var(--g)}
.feedback{margin-top:13px;padding:13px;border-radius:14px;display:none}.feedback.ok{display:block;background:#eaf8ef;color:#126f3e}.feedback.bad{display:block;background:#fff0f0;color:#a33a3a}
.options{display:grid;gap:10px}.option{padding:14px;border:1px solid var(--line);border-radius:14px;background:white;text-align:left}.complete{width:82px;height:82px;margin:auto;border-radius:50%;background:var(--g);color:white;display:grid;place-items:center;font-size:42px;font-weight:900}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{padding:18px}.stat b{display:block;font-size:28px}.stat span{color:var(--muted);font-size:13px}
.modeGrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.mode{padding:22px;border:1px solid var(--line);background:white;border-radius:20px;text-align:left}.mode.selected{border-color:#7bd2a1;background:#f1fbf5}.mode .big{font-size:34px}.mode b,.mode span{display:block}.mode span{color:var(--muted);font-size:14px;margin-top:5px}
.onboard{min-height:90vh;display:grid;place-items:center}.onboardCard{max-width:720px;padding:35px;text-align:center}.onboardCard .logo{margin:auto;width:78px;height:78px;font-size:24px}.onboardCard h1{font-size:38px;margin:18px 0 8px}.onboardCard>p{color:var(--muted);margin-bottom:24px}
.bottom{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(760px,calc(100% - 24px));background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:20px;padding:8px;display:grid;grid-template-columns:repeat(5,1fr);box-shadow:0 18px 42px rgba(28,67,43,.16)}
.nav{border:0;background:transparent;padding:9px;border-radius:13px;color:var(--muted);font-size:12px;font-weight:700}.nav.active{background:var(--soft);color:var(--g2)}
@media(max-width:820px){.hero,.learn{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.app{padding:14px 12px 95px}.hero h2{font-size:29px}.grid,.modeGrid{grid-template-columns:1fr}.heroMain,.heroSide,.panel,.wordcard,.exercise{padding:17px}.picture{height:180px;font-size:88px}.stepLabel{font-size:10px}}

.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.inline-pill{display:inline-block;margin-top:12px}.step-kicker{font-size:12px;font-weight:900;color:var(--g2);letter-spacing:.04em}.answer-model{font-size:22px;color:var(--g2)}
.listen-big{width:100%;padding:16px;border:1px solid #b9dfca;border-radius:16px;background:var(--soft);color:var(--g2);font-weight:900;margin:8px 0 16px}
.center{text-align:center}.center-actions{justify-content:center}.reward-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.reward-grid>div{border:1px solid var(--line);background:#f8faf8;border-radius:16px;padding:16px;text-align:center}.reward-grid b,.reward-grid span{display:block}.reward-grid b{font-size:22px}.reward-grid span{font-size:13px;color:var(--muted);margin-top:4px}
.lesson-list{display:grid;gap:10px}.lesson-row{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:white;border:1px solid var(--line);border-radius:16px;padding:14px 16px;text-align:left}.lesson-row-icon{width:42px;height:42px;border-radius:13px;background:var(--soft);display:grid;place-items:center;font-size:22px}.lesson-row b,.lesson-row small{display:block}.lesson-row small{color:var(--muted);margin-top:3px}.status-done{color:var(--g2);font-weight:800}.status-open{color:var(--muted);font-weight:800}
.reading-card,.test-card,.practice-card,.result-card{padding:24px}.reading-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.small-speaker{margin:0}.reading-text{font-size:25px;line-height:1.7;margin:20px 0}.reading-text mark{background:#dff4e8;color:var(--g2);padding:1px 4px;border-radius:5px}.translation-toggle{border:0;background:transparent;color:var(--g2);font-weight:800;padding:0}.translation-box{margin-top:14px;background:#f8faf8;border:1px solid var(--line);border-radius:14px;padding:15px;line-height:1.6;color:var(--muted)}.hidden{display:none}
.test-progress{height:8px;background:#edf1ee;border-radius:999px;overflow:hidden;margin-bottom:22px}.test-progress i{display:block;height:100%;background:var(--g)}.result-card{max-width:680px;margin:40px auto;text-align:center}.result-ring{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:var(--soft);color:var(--g2);font-size:34px;font-weight:900}
.practice-picture{height:170px;font-size:82px;margin-bottom:18px}.dictionary-search{margin-bottom:16px}.dictionary-foot{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}.mini-speak{border:0;background:var(--soft);border-radius:10px;padding:7px}.progress-panel{margin-top:16px}.big-bar{height:12px}.settings-separator{height:1px;background:var(--line);margin:26px 0}
@media(max-width:560px){.reading-text{font-size:20px}.reward-grid{grid-template-columns:1fr}.lesson-row{grid-template-columns:auto 1fr}.lesson-row>span:last-child{grid-column:2}.top-actions{gap:5px}.top-actions .pill{padding:7px 9px;font-size:11px}}

button,.option,.speaker,.listen-big,.nav,.lesson-row,.module,.mode{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  pointer-events:auto;
  position:relative;
  z-index:1;
}
.options{position:relative;z-index:2}
.option:active,.speaker:active,.listen-big:active{transform:scale(.985)}
.option[disabled]{opacity:.7;pointer-events:none}

.option.answer-correct{background:#e8f8ef!important;border-color:#4fbd7d!important;color:#126f3e!important;font-weight:900}
.option.answer-wrong{background:#fff0f0!important;border-color:#e27c7c!important;color:#9e3030!important}
.test-next{margin-top:4px}
.speech-error{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:9999;background:#172019;color:white;padding:12px 16px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.22);max-width:calc(100% - 32px);text-align:center}
.js-speak{touch-action:manipulation}

.cursive-block{
  margin-top:16px;
  background:#f8faf8;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
}
.cursive-title,
.copy-cursive-label,
.dictionary-cursive-label{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:6px;
  letter-spacing:.02em;
}
.cursive-sample,
.copy-cursive,
.dictionary-cursive{
  font-family:"Segoe Script","Brush Script MT","Lucida Handwriting","Apple Chancery",cursive;
  font-size:34px;
  line-height:1.25;
  color:var(--g2);
}
.copy-cursive-wrap{
  margin-top:14px;
  padding:12px 14px;
  background:#f8faf8;
  border:1px dashed #bddcc9;
  border-radius:14px;
}
.copy-cursive{
  position:relative;
  padding-bottom:4px;
}
.copy-cursive::after{
  content:"";
  display:block;
  margin-top:4px;
  border-bottom:2px solid #dbe7df;
}
.dictionary-cursive{
  font-size:28px;
  margin-top:2px;
  margin-bottom:10px;
}
@media(max-width:560px){
  .cursive-sample,.copy-cursive,.dictionary-cursive{font-size:28px}
}

.picture-frame{
  position:relative;
  background:linear-gradient(180deg,#f5fbf7,#eef8f1);
  overflow:hidden;
}
.word-image{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:2;
  padding:18px;
}
.picture-emoji-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:96px;
  opacity:.18;
  z-index:1;
}
.dictionary-image-wrap{
  width:100%;
  height:128px;
  border-radius:16px;
  background:linear-gradient(180deg,#f5fbf7,#eef8f1);
  overflow:hidden;
  margin-bottom:12px;
}
.dictionary-image{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:10px;
}
.trace-lines{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.trace-line{
  height:54px;
  border-bottom:2px solid #d7e6dc;
  border-top:1px dashed #e1ece5;
  background:
    linear-gradient(to bottom, transparent 0 46%, rgba(182,205,192,.5) 46% 49%, transparent 49% 100%);
  border-radius:10px;
  position:relative;
}
.trace-ghost{
  position:absolute;
  left:12px;
  top:6px;
  font-family:"Segoe Script","Brush Script MT","Lucida Handwriting","Apple Chancery",cursive;
  font-size:34px;
  line-height:1.1;
  color:rgba(17,122,66,.28);
  letter-spacing:.02em;
}
.copy-cursive{
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  display:inline-block;
  min-width:140px;
}
.onboardCard p,.hero p,.exercise p{
  max-width:unset;
}
@media(max-width:560px){
  .dictionary-image-wrap{height:110px}
  .trace-line{height:50px}
  .trace-ghost{font-size:28px;top:9px}
}

.language-heading{margin:24px 0 10px;font-size:16px}
.language-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 22px}
.lang-btn{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 10px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--text)}
.lang-btn span{font-size:20px}.lang-btn b{font-size:13px}.lang-btn.active{border-color:#72cf9b;background:var(--soft);color:var(--g2)}
@media(max-width:700px){.language-selector{grid-template-columns:1fr 1fr}}

.fala-toast{
  position:fixed;left:50%;top:18px;transform:translateX(-50%) translateY(-6px);
  background:#172019;color:#fff;padding:12px 16px;border-radius:14px;z-index:9999;
  box-shadow:0 12px 30px rgba(0,0,0,.18);opacity:0;transition:.2s ease;
  max-width:calc(100% - 32px);text-align:center
}
.fala-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.mode-switch-btn{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
.mode-switch-btn.selected{
  border-color:#43b978!important;
  background:#eefaf3!important;
  box-shadow:0 0 0 3px rgba(29,161,91,.10);
}
.mode-status{
  margin-top:14px;
  padding:11px 13px;
  border-radius:12px;
  background:#f5f8f6;
  color:var(--g2);
  font-weight:800;
}

.mode-profile-note{
  margin-top:10px;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}