/* SpeakFlow – extends app.css + listen.css (same theme as the Listening Ladder) */
.esf-page{margin:0}
.esl-daily{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.esl-dstat{border:1px solid var(--line);border-radius:18px;padding:14px 16px;background:linear-gradient(180deg,#fff,#fafbfe)}
.esl-dstat b{display:block;font-size:24px;font-weight:900;color:var(--navy);line-height:1.1}
.esl-dstat small{color:var(--mute);font-size:13px;font-weight:600}
.esl-dstat.fire b{color:var(--red)}
.esl-pill{display:inline-block;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:#eef4ff;color:#2a4fa8;margin-left:6px}
.esl-legend{font-size:13px;color:var(--mute)}.esl-legend span{margin-right:12px}
.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-bub .esl-arl{text-align:right}
.esf-sit{background:#f3f6ff;border:1px solid #d8e2ff;border-radius:14px;padding:10px 14px;margin:0 0 14px;font-size:15px}
.esf-phr{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.esf-ph{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:#fafbfe}
.esf-ph b{display:block;color:var(--navy);font-size:16px}
.esf-ph .ar,.esf-corr .ar,.esi-note .ar{display:block;direction:rtl;text-align:right;font-family:"Noto Kufi Arabic",Tahoma,sans-serif;color:#7a4b00;font-size:14px;margin-top:2px}
.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-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.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-say{border:1.5px solid var(--red);background:#fff;color:var(--red)}
.esf-say.on{background:var(--red);color:#fff;animation:eslPulse 1.2s infinite}
@media (max-width:600px){.esf-acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.esf-pb,.esf-say{padding:0 8px;font-size:13px;height:40px}.esf-ph b{font-size:16px}}
.esf-res{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.esf-res audio,.esf-said-y audio{height:34px;max-width:240px}
.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-said{width:100%;font-size:15px;line-height:1.8}
.esf-said .ok{color:var(--ok);font-weight:700}.esf-said .miss{color:var(--bad);font-weight:700;text-decoration:underline wavy;text-underline-offset:4px}
.esf-mic{display:flex;gap:14px;align-items:center;margin:10px 0}
.esf-rec{width:64px;height:64px;min-width:64px;border-radius:50%;border:none;background:var(--btn,linear-gradient(135deg,#c8102e,#ff4d6d));color:#fff;box-shadow:0 10px 24px rgba(200,16,46,.3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent}
.esf-rec svg{width:28px;height:28px}
.esf-rec.on{animation:eslPulse 1.2s infinite}
.esf-rec.on svg{width:22px;height:22px}
.esf-micr{flex:1;min-width:0}
.esf-meter{height:8px;border-radius:6px;background:var(--line);overflow:hidden;margin-bottom:6px;max-width:340px}
.esf-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#eab308,#ef4444);transition:width .08s}
.esf-curve{width:100%;height:120px;background:#f7f8fc;border-radius:12px;margin-top:10px}
.esf-curve polyline{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.esf-curve .m{stroke:#94a3b8;stroke-dasharray:6 5}.esf-curve .y{stroke:var(--red)}
.esf-leg{font-size:13px;margin-top:4px}.esf-leg span{margin-right:14px;font-weight:700}.esf-leg .m{color:#94a3b8}.esf-leg .y{color:var(--red)}
.esf-mine{background:#fff8f0;border-radius:12px;padding:8px 10px!important}
.esf-bub{max-width:88%;border-radius:16px;padding:10px 14px;margin:8px 0;font-size:15px}
.esf-bub.o{background:#f1f3f9;border-top-left-radius:4px}
.esf-bub.y{margin-left:auto;background:#fff;border:1.5px solid #f3b8c4;border-top-right-radius:4px}
.esf-link{border:none;background:none;color:var(--red);font-weight:700;cursor:pointer;text-decoration:underline;font-size:13px;padding:0}
.esf-model{color:var(--navy);font-weight:700}
.esf-said-y{font-size:15px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.esf-corr{border-left:4px solid var(--red);background:#fafbfe;border-radius:10px;padding:8px 12px;margin:8px 0;font-size:15px}
.esf-chal{border:1px solid var(--line);border-radius:18px;padding:16px;background:linear-gradient(135deg,#fff,#f6f3ff)}
.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-flow{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.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-mets{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.esf-mets div{border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.esf-mets b{display:block;font-size:22px;color:var(--navy)}
.esf-mets small{font-size:12px;color:var(--mute)}
.esf-tl{line-height:2;font-size:15px;background:#f7f8fc;border-radius:12px;padding:10px 12px;margin-top:10px}
.esf-tl .pz{display:inline-block;background:var(--badbg);color:var(--bad);font-weight:800;font-size:12px;border-radius:8px;padding:0 6px}
.esf-tl .fl{color:#b26a00;font-weight:700}
.esf-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:12px}
@media (max-width:600px){.esf-bub{max-width:100%}.esf-score{width:100%}.esf-res audio{max-width:100%}}

/* ===== SpeakFlow Pro ===== */
.esf-tabs{display:flex;gap:6px;overflow-x:auto;padding:4px;margin:0 0 16px;background:#fff;border:1px solid var(--line);border-radius:18px;scrollbar-width:none;position:sticky;top:8px;z-index:20;box-shadow:0 8px 24px rgba(10,25,52,.06)}
.esf-tabs::-webkit-scrollbar{display:none}
.esf-tabs button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:none;background:none;padding:9px 13px;border-radius:13px;font:inherit;font-weight:700;font-size:14px;color:var(--mute);cursor:pointer;white-space:nowrap}
.esf-tabs button svg{width:18px;height:18px}
.esf-tabs button.on{background:var(--navy);color:#fff}
@media (max-width:600px){.esf-tabs{top:4px;border-radius:14px}.esf-tabs button{padding:8px 10px;font-size:13px}.esf-tabs button span{display:none}.esf-tabs button.on span{display:inline}}
.esf-today h2{font-size:22px}
.esf-xp{text-align:right}.esf-xp b{display:inline-flex;align-items:center;gap:4px;font-size:20px;color:#b26a00}.esf-xp b svg{width:18px;height:18px}.esf-xp small{display:block;color:var(--mute);font-size:12px;font-weight:600}
.esf-plan{display:grid;gap:8px}
.esf-pi{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:#fafbfe;border-radius:14px;padding:10px 12px;font:inherit;color:var(--ink);cursor:pointer}
.esf-pi .ck{width:30px;height:30px;min-width:30px;border-radius:9px;background:#eef1f8;color:var(--mute);display:flex;align-items:center;justify-content:center;font-weight:800}
.esf-pi .ck svg{width:18px;height:18px}
.esf-pi.done .ck{background:var(--okbg);color:var(--ok)}.esf-pi.done b{text-decoration:line-through;color:var(--mute)}
.esf-pi small{display:block;color:var(--mute);font-size:12.5px}
.esf-pi:hover{border-color:#f3b8c4;background:#fff}
.esf-board{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.esf-board li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:#fafbfe;border:1px solid var(--line)}
.esf-board li.me{border-color:var(--red);background:#fff4f6}
.esf-board .n{width:26px;height:26px;border-radius:8px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.esf-board li:nth-child(1) .n{background:#d4a017}.esf-board li:nth-child(2) .n{background:#9aa3b5}.esf-board li:nth-child(3) .n{background:#b87333}
.esf-board b{flex:1}.esf-board .x{font-weight:800;color:#b26a00}
.esf-app{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.esf-app h3{display:flex;align-items:center;gap:8px}.esf-app h3 svg{width:20px;height:20px}
.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-sounds{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.esf-snd{position:relative;text-align:left;border:1px solid var(--line);background:#fafbfe;border-radius:16px;padding:12px 14px;font:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:2px}
.esf-snd:hover{border-color:#f3b8c4;background:#fff}.esf-snd.next{border-color:var(--red);box-shadow:0 0 0 3px #ffe4ea}
.esf-snd .ipa{font-size:13px;font-weight:800;color:var(--red)}.esf-snd small{color:var(--mute);font-size:12.5px}
.esf-snd .esf-badge{position:absolute;top:10px;right:10px}
.esf-reads{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.esf-input{flex:1;min-width:200px;height:42px;padding:0 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:15px}
.esf-input:focus{outline:none;border-color:var(--red)}
.esf-pairs{display:grid;gap:8px}
.esf-pair{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.esf-pair .vs{font-size:12px;font-weight:800;color:var(--mute)}
.esf-pw{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;border:1.5px solid #cdd5e6;background:#fff;color:var(--navy);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.esf-pw svg{width:16px;height:16px}.esf-pw.playing{background:var(--navy);color:#fff;border-color:var(--navy)}
.esf-wlist{display:grid;gap:8px}
.esf-wrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;padding:8px 10px;background:#fafbfe}
.esf-wrow .esf-pres{width:100%}
.esf-bigtext{font-size:20px;font-weight:700;color:var(--navy);line-height:1.5;margin:8px 0}
.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-prep{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
.esf-words{display:flex;flex-wrap:wrap;gap:6px}
.esf-wc{position:relative;border:none;border-radius:10px;padding:7px 11px;font:inherit;font-weight:800;font-size:16px;cursor:pointer}
.esf-wc.ok{background:var(--okbg);color:var(--ok)}.esf-wc.mid{background:#fff3d6;color:#9a6a00}.esf-wc.low{background:var(--badbg);color:var(--bad)}
.esf-wc i{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:currentColor}
.esf-iss{border-top:1px dashed var(--line);padding:8px 0 0;margin-top:8px;font-size:15px}
.esf-iss .ar{display:block;direction:rtl;text-align:right;font-family:"Noto Kufi Arabic",Tahoma,sans-serif;color:#7a4b00;font-size:14px}
.esf-scns{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.esf-scn{text-align:left;border:1px solid var(--line);background:#fafbfe;border-radius:16px;padding:12px 14px;font:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:3px}
.esf-scn:hover{border-color:#f3b8c4;background:#fff}.esf-scn b{font-size:16px}.esf-scn small{direction:rtl;text-align:right;font-family:"Noto Kufi Arabic",Tahoma,sans-serif;color:#7a4b00}.esf-scn span{font-size:13px;color:var(--mute)}
.esf-chat #esf-msgs{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.esf-bub{display:block}.esf-bub.o{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.esf-bub.o .tx{flex:1;min-width:150px}.esf-bub.o .esl-arl{width:100%}
.esf-bub.o.hid .tx,.esf-bub.o.hid .esl-arl{filter:blur(5px);user-select:none}
.esf-bub.y{display:flex;flex-direction:column;gap:6px}.esf-bub.y audio{height:32px;max-width:220px}
.esf-fix{background:#effbf4;border-radius:10px;padding:8px 10px;font-size:14px;color:#0b6b3a}
.esf-fix .ar{display:block;direction:rtl;text-align:right;font-family:"Noto Kufi Arabic",Tahoma,sans-serif;color:#7a4b00}
.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-chart{width:100%;max-width:520px;height:auto;margin:10px 0}
.esf-chart .ax{stroke:#e3e7f0;stroke-width:1}.esf-chart .ln{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.esf-chart .dt{fill:#fff;stroke:var(--red);stroke-width:2}.esf-chart text{font-size:10px;font-weight:700;fill:var(--navy)}
.esf-plist{display:grid;gap:8px}
.esf-prow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:#fafbfe}
.esf-prow .ar{display:block;direction:rtl;text-align:right;font-family:"Noto Kufi Arabic",Tahoma,sans-serif;color:#7a4b00;font-size:14px}
.esf-prow small{display:block;font-size:12px}
.esf-del{border:none;background:none;color:var(--mute);cursor:pointer;width:34px;height:34px;border-radius:10px}.esf-del svg{width:18px;height:18px}.esf-del:hover{background:var(--badbg);color:var(--bad)}
.esf-save{border:none;background:none;color:#9aa3b5;cursor:pointer;width:30px;height:30px;padding:4px;border-radius:8px;float:right;margin-left:6px}
.esf-save svg{width:18px;height:18px}.esf-save:hover,.esf-save.saved{color:var(--red);background:#fff4f6}
.esf-save.saved svg{fill:currentColor}.esf-save.in{float:none;width:24px;height:24px;padding:2px;vertical-align:middle}
.esf-games{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.esf-game{text-align:left;border:none;border-radius:20px;padding:18px;color:#fff;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:150px;background:linear-gradient(135deg,#0a1934,#1b1748);box-shadow:0 14px 30px rgba(10,25,52,.18)}
.esf-game:nth-child(2){background:linear-gradient(135deg,#c8102e,#ff4d6d)}.esf-game:nth-child(3){background:linear-gradient(135deg,#7c3aed,#3f6df6)}
.esf-game b{font-size:20px}.esf-game span{font-size:14px;opacity:.9;flex:1}.esf-game small{font-weight:800;opacity:.85}
.esf-timer{height:8px;border-radius:6px;background:var(--line);overflow:hidden;margin:8px 0}.esf-timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--red),#ffb020);transition:width .1s linear}
.esf-duelopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.esf-dopt{height:64px;border-radius:16px;border:2px solid var(--line);background:#fff;font:inherit;font-size:22px;font-weight:800;color:var(--navy);cursor:pointer}
.esf-dopt.right{border-color:var(--ok);background:var(--okbg)}.esf-dopt.wrong{border-color:var(--bad);background:var(--badbg)}
.esl-play svg{width:24px;height:24px}
#esf-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:all .25s;z-index:9999}
#esf-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:600px){.esf-cols{grid-template-columns:1fr}.esf-bar{grid-template-columns:90px 1fr 30px;font-size:13px}.esf-bigtext{font-size:18px}.esf-sounds{grid-template-columns:1fr 1fr}.esf-dopt{font-size:18px}}
/* safety net: never let an icon render unsized */
#es-speakflow .esi-btn svg,#es-speakflow button svg{width:18px;height:18px;flex:0 0 18px;vertical-align:middle}
#es-speakflow .esi-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#es-speakflow h1 svg,#es-speakflow h2 svg,#es-speakflow h3 svg,#es-speakflow h4 svg{width:22px;height:22px;vertical-align:middle}
#es-speakflow .esf-rec svg{width:28px;height:28px;max-width:none;max-height:none}
#es-speakflow .esf-rec.on svg{width:22px;height:22px}
#es-speakflow .esl-play svg{width:24px;height:24px}
/* mouth & tongue diagrams */
.esf-mframes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.esf-mframes.one{grid-template-columns:minmax(0,320px)}
.esf-mframe{margin:0;padding:10px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f7f9fd);text-align:center}
#es-speakflow svg.esf-mouth,svg.esf-mouth{width:100%;height:auto;max-width:260px;max-height:none;display:block;margin:0 auto}
.esf-mouth .skin{fill:#f6dcc8;stroke:#c99a7a;stroke-width:1.5}
.esf-mouth .cav{fill:#7a2f3a;opacity:.18}
.esf-mouth .nasal{fill:#e9c3b0;opacity:.7}
.esf-mouth .palate{fill:none;stroke:#b06b5e;stroke-width:4;stroke-linecap:round}
.esf-mouth .velum{fill:#e7a99a;stroke:#b06b5e;stroke-width:1.5}
.esf-mouth .wall{fill:none;stroke:#c99a7a;stroke-width:3}
.esf-mouth .teeth{fill:#fff;stroke:#9aa3b5;stroke-width:1.2}
.esf-mouth .tongue{fill:#e0566b;stroke:#b73349;stroke-width:1.5}
.esf-mouth .lip{fill:#e98b8f;stroke:#b8555c;stroke-width:1.3}
.esf-mouth .air{fill:none;stroke:#2f6df6;stroke-width:3;stroke-linecap:round;stroke-dasharray:7 6;animation:esfair 1s linear infinite}
.esf-mouth .air.thin{stroke-width:2}
.esf-mouth .airhead{fill:#2f6df6}
.esf-mouth .touch{fill:none;stroke:#f5b400;stroke-width:3;animation:esfpulse 1.4s ease-in-out infinite}
.esf-mouth .voice rect{fill:#c8ccd8}
.esf-mouth .voice.on rect{fill:#7c3aed}
.esf-mouth .voice path{fill:none;stroke:#7c3aed;stroke-width:2.2;stroke-linecap:round;animation:esfbuzz .5s ease-in-out infinite alternate}
@keyframes esfair{to{stroke-dashoffset:-13}}
@keyframes esfpulse{50%{opacity:.35}}
@keyframes esfbuzz{to{opacity:.3}}
.esf-mframe figcaption{margin-top:6px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px}
.esf-mframe figcaption b{font-size:20px;color:var(--navy)}
.esf-mframe figcaption small{width:100%;color:var(--mute);font-size:12.5px}
.esf-msteps{margin:14px 0 0;padding-left:20px}.esf-msteps li{margin-bottom:10px}
.esf-mkey{font-size:12.5px;color:var(--mute);margin:8px 0 0;font-family:"Noto Kufi Arabic",Tahoma,sans-serif}
@media (max-width:520px){.esf-mframes{gap:8px}.esf-mframe{padding:6px}}
@media (prefers-reduced-motion:reduce){.esf-mouth *{animation:none!important}}
/* accent switch, own text, fix mistakes */
.esf-acc{display:inline-flex;align-items:center;gap:4px;margin-top:12px;padding:4px;border-radius:999px;background:#f1f3f9;font-size:13px;font-weight:700}
.esf-acc span{padding:0 8px;color:var(--mute)}
.esf-acc button{font:inherit;cursor:pointer;border:0;background:none;padding:6px 14px;border-radius:999px;color:var(--navy)}
.esf-acc button.on{background:var(--navy);color:#fff}
.esf-owntext{width:100%;box-sizing:border-box;min-height:96px;resize:vertical;font:inherit;line-height:1.6;margin-bottom:8px}
.esf-mcats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.esf-mcats button{font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy)}
.esf-mcats button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.esf-mlist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.esf-mrow{font:inherit;text-align:left;cursor:pointer;display:flex;gap:10px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--line);background:#fff;color:inherit}
.esf-mrow span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.esf-mrow s{color:var(--bad);font-size:13.5px}.esf-mrow b{color:#0f7a43;font-size:14.5px}
.esf-wr{margin:12px 0;display:grid;gap:6px}
.esf-wr .w,.esf-wr .r{display:flex;align-items:center;gap:8px;font-size:19px}
.esf-wr .w{color:var(--bad)}.esf-wr .r{color:#0f7a43}
.esf-wr svg{width:20px;height:20px}
.esf-dans{margin-top:8px;padding:10px 12px;border-radius:12px;background:#e9f9ef;display:flex;align-items:center;gap:8px}
.esf-mres{margin-top:8px;padding:10px 12px;border-radius:12px;font-size:14.5px}
.esf-mres.ok{background:#e9f9ef;color:#0e5e33}.esf-mres.bad{background:#fff4f6;color:#8c1c33}
.esf-mres svg{width:16px;height:16px;vertical-align:middle}
.esf-ownrow{padding-top:14px;padding-bottom:14px}
#es-speakflow .hidden{display:none!important}
@media (max-width:640px){.esf-mlist{grid-template-columns:1fr}}