:root{
  --blue:#1e50a2; --blue-dark:#173f80; --ink:#14213d; --muted:#5b6b82;
  --line:#dde4ee; --bg:#f6f8fb; --card:#ffffff; --hl:#ffe08a; --hl-border:#f2b705;
  --green:#1d9d61; --green-bg:#e5f6ee; --red:#d64545; --red-bg:#fdecec;
  --gold:#f2b705; --radius:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background:var(--bg); color:var(--ink); min-height:100vh; display:flex; flex-direction:column;}
#topbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; flex-wrap:wrap;}
.brand{font-weight:800; font-size:1.15rem; letter-spacing:.2px; color:var(--blue-dark); text-decoration:none;}
.brand span{color:var(--gold);}
#topnav{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
#topnav a{color:var(--ink); text-decoration:none; font-weight:600; font-size:.92rem;}
#topnav a:hover{color:var(--blue);}
.langToggle{display:flex; background:#eef2f8; border:1px solid var(--line); border-radius:999px; padding:3px;}
.langToggle button{border:0; background:transparent; padding:6px 12px; border-radius:999px; font:inherit; font-size:.85rem; font-weight:700; color:var(--muted); cursor:pointer; min-height:34px;}
.langToggle button.on{background:var(--blue); color:#fff;}
.btn{display:inline-block; border:0; border-radius:12px; cursor:pointer; background:var(--blue); color:#fff; font:inherit; font-weight:700; font-size:.98rem; padding:12px 18px; min-height:48px; text-align:center; text-decoration:none;}
.btn:active{background:var(--blue-dark);}
.btn.gold{background:var(--gold); color:var(--ink);}
.btn.ghost{background:#fff; color:var(--blue-dark); border:2px solid var(--line);}
.btn.small{min-height:40px; padding:8px 14px; font-size:.9rem;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
#progressWrap{height:8px; background:#e3eaf3;}
#progressBar{height:100%; width:0%; background:linear-gradient(90deg,#f2b705,#f6c945); transition:width .35s ease;}
main{flex:1; width:100%; max-width:760px; margin:0 auto; padding:20px 16px 34px;}
h1{font-size:1.6rem; line-height:1.25; margin:.2em 0 .2em;}
h2{font-size:1.25rem; margin:1.1em 0 .4em;}
.subtitle{color:var(--muted); font-size:1.02rem; margin:0 0 16px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px; box-shadow:0 2px 10px rgba(20,33,61,.05); margin-bottom:16px;}
.hero{background:linear-gradient(135deg, var(--blue-dark), var(--blue)); color:#fff; border-radius:var(--radius); padding:26px 22px; margin-bottom:18px; position:relative; overflow:hidden;}
.hero h1{color:#fff; margin-top:0;}
.hero p{color:#dbe6f7; max-width:52ch;}
.hero .btn{margin-right:8px; margin-top:6px;}
.hero .pico{position:absolute; right:10px; bottom:0; width:110px; opacity:.95;}
.levelRow{display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line);}
.levelRow:last-child{border-bottom:0;}
.levelBadge{flex:0 0 auto; width:52px; height:52px; border-radius:14px; background:#eaf1fb; color:var(--blue-dark); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.05rem;}
.levelBadge.locked{background:#eef1f5; color:var(--muted);}
.lvlStats{margin-top:5px; font-size:.86rem; color:var(--muted); line-height:1.45;}
.chip{display:inline-block; font-size:.75rem; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--green-bg); color:var(--green); margin-left:8px; vertical-align:middle;}
.chip.soon{background:#eef1f5; color:var(--muted);}
.chip.free{background:#fff4d1; color:#8a6400;}
.unitCard{border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px; background:#fff;}
.unitCard.locked{opacity:.62;}
.lessonRow{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-top:1px dashed var(--line);}
.lessonRow a{color:var(--blue-dark); font-weight:600; text-decoration:none;}
.doneMark{color:var(--green); font-weight:800;}
/* player */
.stage{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 18px; min-height:210px; box-shadow:0 2px 10px rgba(20,33,61,.05); position:relative;}
.stage .langTag{font-size:.75rem; font-weight:800; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-bottom:10px;}
.stage .runText{font-size:1.42rem; line-height:1.55; font-weight:600;}
.stage .runText .w{border-radius:6px; padding:0 2px; transition:background .12s;}
.stage .runText .w.on{background:var(--hl); box-shadow:0 0 0 1.5px var(--hl-border);}
.stage .picoStage{position:absolute; right:12px; bottom:10px; width:64px; opacity:.9;}
.controls{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0;}
.controls button{flex:1 1 auto; min-width:96px; border:2px solid var(--line); background:#fff; border-radius:12px; font:inherit; font-weight:700; font-size:.92rem; padding:12px 8px; min-height:50px; cursor:pointer; color:var(--ink);}
.controls button.primary{background:var(--blue); border-color:var(--blue); color:#fff;}
.controls button:active{transform:scale(.98);}
.teacherToggle{display:flex; background:#eef2f8; border:1px solid var(--line); border-radius:999px; padding:3px;}
.teacherToggle button{border:0; background:transparent; padding:8px 12px; border-radius:999px; font:inherit; font-size:.85rem; font-weight:600; color:var(--muted); cursor:pointer; min-height:38px;}
.teacherToggle button.on{background:var(--blue); color:#fff;}
.practice{border:1px dashed var(--line); border-radius:14px; padding:14px; margin-top:6px; background:#fbfcfe;}
.practice h3{margin:0 0 8px; font-size:1rem;}
.scoreGrid{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.scoreBox{background:#eef4fd; border-radius:10px; padding:8px 12px; font-weight:700; font-size:.92rem;}
.wordScores{margin-top:8px; font-size:.95rem; line-height:1.7;}
.wordScores .bad{color:var(--red); font-weight:700;}
.wordScores .good{color:var(--green); font-weight:700;}
/* exercises */
.exCard{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px; box-shadow:0 2px 10px rgba(20,33,61,.05);}
.exPrompt{font-size:1.5rem; font-weight:800; text-align:center; margin:10px 0 4px;}
.exListen{display:block; margin:6px auto 16px;}
.optBtn{display:block; width:100%; text-align:left; border:2px solid var(--line); background:#fff; border-radius:14px; padding:15px 16px; font:inherit; font-size:1.05rem; font-weight:600; margin-bottom:10px; cursor:pointer; min-height:54px;}
.optBtn.sel{border-color:var(--blue); background:#eaf1fb;}
.optBtn.right{border-color:var(--green); background:var(--green-bg);}
.optBtn.wrong{border-color:var(--red); background:var(--red-bg);}
.feedback{border-radius:14px; padding:14px 16px; font-weight:700; margin:12px 0; display:none;}
.feedback.ok{display:block; background:var(--green-bg); color:var(--green);}
.feedback.no{display:block; background:var(--red-bg); color:var(--red);}
.picoReact{display:none; margin:12px auto; width:min(300px, 80vw); border-radius:14px; overflow:hidden;}
.picoReact.show{display:block;}
.picoReact video{width:100%; display:block;}
/* forms and tables */
label{display:block; font-weight:700; margin:12px 0 6px;}
input[type=text], input[type=email], input[type=password]{width:100%; border:2px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; min-height:50px; background:#fff;}
.err{background:var(--red-bg); color:var(--red); border-radius:12px; padding:12px 14px; font-weight:600; display:none; margin:12px 0;}
.err.show{display:block;}
table{width:100%; border-collapse:collapse; font-size:.92rem;}
th, td{border-bottom:1px solid var(--line); padding:9px 8px; text-align:left; vertical-align:top;}
th{color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em;}
.priceGrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px;}
.priceCard{border:2px solid var(--line); border-radius:var(--radius); padding:18px; background:#fff;}
.priceCard.hot{border-color:var(--gold);}
.priceCard .amount{font-size:1.7rem; font-weight:800; color:var(--blue-dark);}
.qBlock{border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px; background:#fff;}
.qBlock .qText{font-weight:700; margin-bottom:10px;}
.radioOpt{display:block; border:2px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:8px; cursor:pointer; font-weight:600;}
.radioOpt.sel{border-color:var(--blue); background:#eaf1fb;}
.bigScore{font-size:2.2rem; font-weight:800; color:var(--blue-dark); text-align:center;}
.center{text-align:center;}
.muted{color:var(--muted);}
footer{background:#fff; border-top:1px solid var(--line); padding:18px 16px; margin-top:10px;}
.footInner{max-width:760px; margin:0 auto; display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; font-size:.9rem;}
.footNote{color:var(--muted); max-width:46ch;}
@media (max-width:560px){ .stage .runText{font-size:1.24rem;} .hero .pico{display:none;} }