/* English Secrets – Listening Path (extends app.css) */
.esl-ar{direction:rtl;text-align:right;font-family:"Noto Kufi Arabic","Plus Jakarta Sans",Tahoma,sans-serif;line-height:1.9;background:#fff8f0;border:1px solid #f2dfb0;border-radius:14px;padding:14px 18px;margin-top:12px}
.esl-tech ul{padding-left:20px}.esl-tech li{margin:4px 0}
.esl-stage{border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:14px;background:#fff}
.esl-stage.lock{opacity:.6}
.esl-stage .h{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.esl-stage h3{margin:0;font-size:19px}
.esl-lessons{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:14px}
.esl-lesson{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:#fafbfe;border-radius:14px;padding:10px 12px;color:var(--ink);font-size:14px;width:100%}
.esl-lesson:not(:disabled):hover{border-color:#f3b8c4;background:#fff}
.esl-lesson:disabled{cursor:not-allowed;opacity:.55}
.esl-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;background:#eef1f8;color:var(--mute)}
.esl-ico.done{background:var(--okbg);color:var(--ok)}.esl-ico.next{background:var(--btn);color:#fff}
.esl-lesson small{display:block;color:var(--mute);font-size:12px}
.esl-progress{height:8px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:10px}
.esl-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--pink))}
.esl-steps{display:flex;gap:6px;margin:6px 0 18px;flex-wrap:wrap}
.esl-steps span{padding:7px 14px;border-radius:999px;background:#eef1f8;font-weight:700;font-size:14px;color:var(--mute)}
.esl-steps span.on{background:var(--navy);color:#fff}.esl-steps span.done{background:var(--okbg);color:var(--ok)}
.esl-block{border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:14px}
.esl-player{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.esl-play{width:54px;height:54px;border-radius:50%;border:none;background:var(--btn);color:#fff;font-size:20px;box-shadow:0 8px 22px rgba(200,16,46,.3);display:flex;align-items:center;justify-content:center}
.esl-play:disabled{background:#c9cfdd;box-shadow:none;cursor:not-allowed}
.esl-play.playing{animation:eslPulse 1.2s infinite}
@keyframes eslPulse{0%{box-shadow:0 0 0 0 rgba(255,77,109,.5)}100%{box-shadow:0 0 0 14px rgba(255,77,109,0)}}
.esl-speed{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.esl-speed button{border:none;background:#fff;padding:7px 11px;font-weight:700;font-size:13px;color:var(--mute)}
.esl-speed button.on{background:var(--navy);color:#fff}
.esl-q{margin:12px 0}
.esl-q .qt{font-weight:600;margin-bottom:6px}
.esl-q input[type=text]{width:100%;max-width:340px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit}
.esl-q input[type=text]:focus{outline:none;border-color:var(--pink)}
.esl-opts{display:flex;flex-direction:column;gap:6px}
.esl-opt{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;background:#fff;max-width:520px}
.esl-opt input{width:auto;margin:0}
.esl-opt.sel{border-color:var(--navy)}
.esl-q.ok input[type=text],.esl-opt.right{border-color:var(--ok);background:var(--okbg)}
.esl-q.bad input[type=text],.esl-opt.wrong{border-color:var(--bad);background:var(--badbg)}
.esl-fb{font-size:14px;margin-top:6px;font-weight:600}
.esl-fb.ok{color:var(--ok)}.esl-fb.bad{color:var(--bad)}
.esl-script{background:#f7f8fc;border-radius:12px;padding:12px 14px;margin-top:10px;font-size:15px}
.esl-script b{color:var(--red)}
.esl-score{font-family:Inter,sans-serif;font-size:54px;font-weight:900;color:var(--navy);line-height:1}
.esl-result{text-align:center;padding:10px 0}
.esl-levelbar{display:flex;gap:6px;margin:18px auto;max-width:460px}
.esl-levelbar div{flex:1;height:12px;border-radius:6px;background:var(--line)}
.esl-levelbar div.on{background:linear-gradient(90deg,var(--red),var(--pink))}
.esl-guest{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#eef4ff;border:1px solid #cddcff;border-radius:14px;padding:12px 16px;margin-bottom:18px;font-size:14px}
.esl-soon{display:inline-block;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:#fff3d6;color:#9a6a00}
.esl-ar ul{padding:0 20px 0 0}