/* General English skills – extends app.css + listen.css (same theme as the Listening Ladder and SpeakFlow) */
.esl-arl{direction:rtl;text-align:right;font-family:"Noto Kufi Arabic",Tahoma,sans-serif;font-size:14px;line-height:1.7;color:#7a4b00;margin-top:3px;font-weight:400}
.esl-arl:empty{display:none}
.esf-mini{width:38px;height:38px;min-width:38px;border-radius:50%;border:none;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 4px 12px rgba(10,25,52,.18);-webkit-tap-highlight-color:transparent}
.esf-mini svg{width:18px;height:18px}
.esf-mini.playing{background:var(--red)}
.esf-pb,.esf-say{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;line-height:1}
.esf-pb svg,.esf-say svg{width:18px;height:18px;flex:0 0 18px}
.esf-pb{border:none;background:var(--navy);color:#fff}
.esf-pb.slow{background:#fff;color:var(--navy);border:1.5px solid #cdd5e6}
.esf-pb.playing{background:var(--red);color:#fff;border-color:var(--red)}
.esf-badge{display:inline-block;font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:#eef1f8;color:#3a4766}
.esf-badge.ok{background:var(--okbg);color:var(--ok)}.esf-badge.mid{background:#fff3d6;color:#9a6a00}.esf-badge.low{background:var(--badbg);color:var(--bad)}
.esf-hints{display:flex;flex-wrap:wrap;gap:6px}
.esf-hints span{padding:5px 11px;border-radius:999px;background:#f1f3f9;font-size:13px;font-weight:600;color:#3a4766}
.esf-score{width:120px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;background:#eef1f8}
.esf-score b{font-size:42px;font-weight:900;line-height:1}
.esf-score small{font-size:12px;font-weight:700;color:var(--mute)}
.esf-score.ok{background:var(--okbg)}.esf-score.ok b{color:var(--ok)}
.esf-score.mid{background:#fff3d6}.esf-score.mid b{color:#9a6a00}
.esf-score.low{background:var(--badbg)}.esf-score.low b{color:var(--bad)}
.esf-switch{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;cursor:pointer}
.esf-switch span{display:inline-flex;align-items:center;gap:6px}.esf-switch svg{width:16px;height:16px}
.esf-switch input{width:18px;height:18px;accent-color:var(--red)}
.esf-checking{display:flex;align-items:center;gap:10px;color:var(--mute);font-weight:600;padding:10px 0}
.esf-checking span{width:18px;height:18px;border-radius:50%;border:3px solid #e3e7f0;border-top-color:var(--red);animation:esfSpin .8s linear infinite}
@keyframes esfSpin{to{transform:rotate(360deg)}}
.esf-bars{display:grid;gap:8px;margin:12px 0}
.esf-bar{display:grid;grid-template-columns:110px 1fr 36px;gap:10px;align-items:center;font-size:14px;font-weight:600}
.esf-bar div{height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.esf-bar i{display:block;height:100%;border-radius:6px}.esf-bar i.ok{background:var(--ok)}.esf-bar i.mid{background:#e0a100}.esf-bar i.low{background:var(--bad)}
.esf-bar b{text-align:right}
.esf-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}.esf-cols ul{margin:6px 0;padding-left:18px}
.esf-cols .ar{display:block;direction:rtl;text-align:right;font-family:"Noto Kufi Arabic",Tahoma,sans-serif;color:#7a4b00;font-size:13.5px}
.esf-sc{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.esf-scm{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.esf-scm div{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:linear-gradient(180deg,#fff,#fafbfe)}
.esf-scm b{display:block;font-size:24px;color:var(--navy)}.esf-scm small{font-size:12px;color:var(--mute);font-weight:600}
.esf-ta{width:100%;min-height:110px;box-sizing:border-box;border:1.5px solid #cdd5e6;border-radius:14px;padding:12px 14px;font:inherit;font-size:16px;line-height:1.5;resize:vertical;background:#fff;color:var(--ink)}
.esf-ta:focus{outline:none;border-color:var(--navy)}
.esf-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.esf-chip{font:inherit;font-size:13px;font-weight:700;border:1px solid #d8e2ff;background:#f3f6ff;color:#2a4fa8;border-radius:999px;padding:5px 11px;cursor:pointer}
.esf-count{font-size:12.5px;color:var(--mute)}
.esg-page{margin:0}
/* level picker */
.esg-levels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;background:#f4f6fb;border-radius:16px;padding:5px}
.esg-levels button{border:none;background:none;border-radius:12px;padding:8px 4px;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--navy)}
.esg-levels b{font-size:17px;font-weight:900}.esg-levels small{font-size:11.5px;color:var(--mute);font-weight:700}
.esg-levels button.on{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(10,25,52,.18)}.esg-levels button.on small{color:#c9d3ea}
@media(max-width:420px){.esg-levels{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* certificate bar */
.esg-certbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px dashed #d7dcea;border-radius:16px;padding:12px 14px;background:#fafbfe;margin-top:10px}
.esg-certbar .ic{width:40px;height:40px;border-radius:12px;background:#eef1f8;color:var(--mute);display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px}
.esg-certbar .ic svg{width:22px;height:22px}
.esg-certbar div{flex:1;min-width:200px}.esg-certbar b{display:block;color:var(--navy)}.esg-certbar small{color:var(--mute);font-size:13.5px}
.esg-certbar.on{border-style:solid;border-color:#f0d58a;background:linear-gradient(180deg,#fffbef,#fff6db)}
.esg-certbar.on .ic{background:var(--red);color:#fff}
.esi-stat svg{width:28px;height:28px;vertical-align:middle}
/* grammar */
.esg-tablewrap{overflow-x:auto;margin-top:12px}
.esg-table{border-collapse:collapse;width:100%;font-size:15px;min-width:320px}
.esg-table th,.esg-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.esg-table th{background:#f3f6ff;color:var(--navy);font-weight:800}
.esg-ex{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #f0f2f7}
.esg-ex:last-child{border-bottom:none}.esg-ex>div{flex:1;min-width:0}.esg-ex b{font-weight:600;color:var(--ink)}
.esf-mini.sm{width:32px;height:32px;min-width:32px}.esf-mini.sm svg{width:15px;height:15px}
.esg-gap{display:inline-block;width:150px;max-width:100%;margin:0 6px;border:none;border-bottom:2px solid var(--navy);background:#f6f8fd;border-radius:6px 6px 0 0;padding:6px 8px;font:inherit;font-weight:700;color:var(--navy)}
.esg-gap:focus{outline:none;background:#eef3ff}
.esg-built{min-height:48px;border:2px dashed #cdd5e6;border-radius:14px;padding:6px;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.esg-words{display:flex;flex-wrap:wrap;gap:6px}
.esg-w{font:inherit;font-weight:700;font-size:15px;border:1.5px solid #cdd5e6;background:#fff;color:var(--navy);border-radius:10px;padding:7px 11px;cursor:pointer}
.esg-w.used{opacity:.3}.esg-w.in{background:var(--navy);color:#fff;border-color:var(--navy)}
.esg-wrong{color:#b3263c;font-size:17px;margin:8px 0;text-decoration:line-through;text-decoration-thickness:1.5px}
.esg-fixin{width:100%;box-sizing:border-box;border:1.5px solid #cdd5e6;border-radius:12px;padding:10px 12px;font:inherit;font-size:16px}
.esg-fixin:focus{outline:none;border-color:var(--navy)}
.esg-review{margin-top:14px;text-align:left;border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:#fafbfe}
.esg-review summary{cursor:pointer;font-weight:800;color:var(--navy)}
.esg-review .ar,.esl-q .ar,.esg-wcard .ar,.esg-cors .ar,.esg-task .ar{display:block;direction:rtl;text-align:right;font-family:"Noto Kufi Arabic",Tahoma,sans-serif;color:#7a4b00;font-size:14px}
/* vocabulary */
.esg-wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:16px}
.esg-wcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 6px 18px rgba(10,25,52,.04)}
.esg-wcard .w{font-size:19px;color:var(--navy)}.esg-wcard .pos{font-size:12.5px;color:var(--mute);font-style:italic}
.esg-wcard .ar{font-size:16px;font-weight:700;margin-top:6px}
.esg-wcard .def{margin:4px 0 6px;font-size:14.5px;color:var(--mute)}
.esg-wcard .esg-ex{border:none;padding:6px 0 0}
mark{background:#fff1bf;color:inherit;border-radius:4px;padding:0 2px}
.esg-flash{display:block;width:100%;min-height:210px;margin-top:12px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#fff,#f6f8fd);cursor:pointer;font:inherit;padding:20px;color:var(--ink)}
.esg-flash .front,.esg-flash .back{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;min-height:170px}
.esg-flash .front b{font-size:34px;color:var(--navy)}.esg-flash .front small{color:var(--mute)}
.esg-flash .back{display:none}.esg-flash.flip .front{display:none}.esg-flash.flip .back{display:flex}
.esg-flash .back .ar{font-family:"Noto Kufi Arabic",Tahoma,sans-serif;color:#7a4b00;font-size:24px;font-weight:700}
.esg-flash .back em{color:var(--mute);font-size:15px}
.esg-gapline{font-size:18px;margin:10px 0 0;font-weight:500}
.esg-blank{display:inline-block;min-width:70px;border-bottom:2px solid var(--navy);color:transparent}
/* reading */
.esg-text{margin-top:12px;font-size:17.5px;line-height:1.75;color:var(--ink);position:relative}
.esg-p{border-radius:12px;padding:4px 8px;margin:0 -8px 6px;transition:background .2s}
.esg-p p{margin:0}.esg-p.now{background:#fff6dc}
.esg-text .esl-arl{display:none}.esg-text.ar-on .esl-arl{display:block}
.esg-gl{font:inherit;border:none;background:none;padding:0;color:var(--navy);font-weight:700;border-bottom:2px dotted var(--red);cursor:pointer;line-height:inherit}
.esi-card{position:relative}
.esg-pop{position:absolute;z-index:30;width:230px;background:var(--navy);color:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 12px 30px rgba(10,25,52,.3);display:flex;flex-direction:column;gap:3px}
.esg-pop .ar{font-family:"Noto Kufi Arabic",Tahoma,sans-serif;font-size:17px;color:#ffe2a8;direction:rtl;text-align:right}
.esg-pop small{color:#c9d3ea}
.esg-row3{display:flex;flex-wrap:wrap;gap:8px}.esg-row3 .esl-opt{flex:0 1 auto}
/* writing */
.esg-task{background:#f3f6ff;border:1px solid #d8e2ff;border-radius:16px;padding:12px 16px;margin:12px 0 0}
.esg-task p{margin:0 0 6px;font-size:16.5px;font-weight:600;color:var(--navy)}.esg-task ul{margin:6px 0 0;padding-left:20px}
.esg-ta{min-height:220px}
.esf-count.good{color:var(--ok);font-weight:700}.esf-count.over{color:#9a6a00;font-weight:700}
.esg-model,.esg-mytext{line-height:1.75;font-size:16px;margin:8px 0}
.esg-cor{background:#fde2e6;border-radius:4px;padding:0 2px;color:#7a1f2e}.esg-cor sup{font-size:10px;font-weight:800;color:var(--bad);margin-left:1px}
.esg-cors{padding-left:22px}.esg-cors li{margin-bottom:10px}
.esg-cors .o{color:#b3263c;text-decoration:line-through}.esg-cors .f{color:#1d7a46;font-weight:800}
/* more skills */
.esg-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.esg-more a{display:flex;flex-direction:column;gap:2px;text-decoration:none;border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:#fafbfe;color:var(--navy)}
.esg-more a:hover{border-color:#f3b8c4;background:#fff}.esg-more small{color:var(--mute)}
@media(max-width:600px){.esf-cols{grid-template-columns:1fr}.esg-text{font-size:16.5px}}
.esg-page .esi-btn svg,.esg-cmodal .esi-btn svg{width:18px;height:18px;flex:0 0 18px;vertical-align:middle}
.esg-page .esi-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.esg-pop[hidden]{display:none!important}
.es-ielts svg:not([width]){max-width:100%}
.esl-q{margin-bottom:12px}