/* دروس الإنجليزية — بعد site.css و program.css و lesson.css و article.css */
.en-head{display:grid; gap:10px; margin-bottom:22px}
.en-head h1{font-size:clamp(26px,3.8vw,40px); margin:0; color:var(--text); line-height:1.4}
.en-head .en-sub{font-size:18px; color:var(--blue-400); font-weight:700; margin:0}
.en-head p{color:var(--text-mute); font-size:17px; line-height:1.9; margin:0; max-width:760px}
.en-tools{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.en-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-border); color:var(--text-mute); font-size:13px; font-weight:700}
.en-sec{margin:26px 0; padding:22px 24px; border-radius:20px}
.en-sec > h2{font-size:21px; margin:0 0 14px; color:var(--text); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.en-sec > h2 .n{width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; background:linear-gradient(135deg,var(--blue-500),var(--purple-500)); color:#fff}
.en-sec > h2 .sp{flex:1}
.en-grammar{color:var(--text-mute); line-height:2; font-size:16px}
.en-grammar table{width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:15px; display:block; overflow-x:auto}
.en-grammar th{background:rgba(59,130,246,.16); color:var(--text); padding:8px 12px; text-align:start}
.en-grammar td{padding:8px 12px; border-bottom:1px solid var(--glass-border)}
.en-grammar td[dir=ltr]{text-align:left}
.en-grammar b{color:var(--text)}
.en-grammar ul{margin:0 0 12px; padding-inline-start:22px}
.en-grammar li[dir=ltr]{text-align:right}

.en-say{flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-border-strong); background:var(--glass); color:var(--blue-400); cursor:pointer; font-size:13px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s}
.en-say:hover,.en-say:focus-visible{background:rgba(59,130,246,.2); outline:none}
.en-say.on{background:var(--blue-500); color:#fff}
.en-dialogue{display:grid; gap:8px}
.en-line{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; align-items:start; padding:10px 12px; border-radius:14px; background:var(--glass); border:1px solid transparent; transition:border-color .2s}
.en-line.now{border-color:var(--blue-400)}
.en-line .en-say{grid-row:span 2}
.en-line .who{font-size:12px; font-weight:800; color:var(--purple-400)}
.en-line .en{direction:ltr; text-align:left; font-size:18px; color:var(--text); line-height:1.7; font-family:inherit}
.en-line .ar{grid-column:2; font-size:15px; color:var(--text-mute); line-height:1.8}
.en-dialogue.hide-ar .ar{filter:blur(6px); user-select:none; transition:filter .2s}
.en-dialogue.hide-ar .en-line:hover .ar,.en-dialogue.hide-ar .en-line:focus-within .ar{filter:none}

.en-vocab{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.en-word{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:center; padding:12px 14px; border-radius:14px; background:var(--glass); border:1px solid var(--glass-border)}
.en-word .w{direction:ltr; text-align:left; font-size:19px; font-weight:800; color:var(--text)}
.en-word .ipa{direction:ltr; text-align:left; font-size:13px; color:var(--text-dim); font-family:'JetBrains Mono',monospace}
.en-word .m{font-size:15px; color:var(--blue-400); font-weight:700}
.en-word .ex{grid-column:1/-1; direction:ltr; text-align:left; font-size:13.5px; color:var(--text-mute); display:flex; align-items:center; gap:8px; justify-content:flex-start; margin-top:4px}
.en-word .ex .en-say{width:26px; height:26px; font-size:10px}
.en-word .en-say{grid-row:1 / span 3; grid-column:2}

.en-ex-h{font-size:16px; margin:22px 0 10px; color:var(--text)}
.en-ex-h:first-of-type{margin-top:0}
.en-q{padding:12px 14px; border-radius:14px; background:var(--glass); border:1px solid var(--glass-border); margin-bottom:10px; display:grid; gap:8px}
.en-q .qt{direction:ltr; text-align:left; font-size:17px; color:var(--text)}
.en-q .qa{font-size:14px; color:var(--text-dim)}
.en-opts{display:flex; flex-wrap:wrap; gap:8px; direction:ltr}
.en-opt{font:inherit; font-size:15px; padding:7px 16px; border-radius:10px; border:1px solid var(--glass-border-strong); background:var(--glass-strong); color:var(--text); cursor:pointer}
.en-opt:disabled{cursor:default}
.en-opt.right,.en-q input.right,.en-built.right{border-color:#22c55e; background:rgba(34,197,94,.15)}
.en-opt.wrong,.en-q input.wrong,.en-built.wrong{border-color:#ef4444; background:rgba(239,68,68,.12)}
.en-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.en-q input{flex:1; min-width:0; direction:ltr; font:inherit; font-size:16px; padding:8px 12px; border-radius:10px; border:1px solid var(--glass-border-strong); background:var(--glass-strong); color:var(--text)}
.en-q input:focus{outline:2px solid var(--blue-400)}
.en-check{font:inherit; font-size:14px; font-weight:700; padding:8px 16px; border-radius:10px; border:0; background:linear-gradient(135deg,var(--blue-500),var(--purple-500)); color:#fff; cursor:pointer}
.en-check:disabled{opacity:.5; cursor:default}
.en-pool,.en-built{display:flex; flex-wrap:wrap; gap:6px; direction:ltr; min-height:44px; padding:6px; border-radius:10px}
.en-built{border:1px dashed var(--glass-border-strong)}
.en-chip{font:inherit; font-size:15px; padding:5px 12px; border-radius:8px; border:1px solid var(--glass-border-strong); background:var(--glass-strong); color:var(--text); cursor:pointer}
.en-fb{font-size:14.5px; line-height:1.8; padding:6px 10px; border-radius:8px; border-inline-start:3px solid}
.en-fb.ok{border-color:#22c55e; color:var(--text-mute)}
.en-fb.no{border-color:#ef4444; color:var(--text-mute)}
.en-result{text-align:center; display:grid; gap:8px; justify-items:center}
.en-pct{font-size:56px; font-weight:800; line-height:1.1}
.en-pct.pass{color:#4ade80}
.en-pct.fail{color:#f87171}
.en-pager{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px}
.en-pager a{padding:14px 16px; border-radius:14px; text-decoration:none; color:var(--text); display:grid; gap:2px}
.en-pager a small{color:var(--text-dim)}
.en-pager .next{text-align:left}
.en-note{font-size:14px; color:var(--text-dim)}
.en-card{display:grid; gap:6px; padding:18px 20px; border-radius:18px; text-decoration:none; color:var(--text-mute); transition:transform .2s, border-color .2s}
.en-card:hover{transform:translateY(-3px); border-color:var(--glass-border-strong)}
.en-card .k{display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--purple-400)}
.en-card .k [data-progress].pass{color:#4ade80}
.en-card b{font-size:18px; color:var(--text)}
.en-card .t-en{direction:ltr; text-align:right; color:var(--blue-400); font-size:14px; font-weight:700}
@media (max-width:560px){ .en-sec{padding:16px} .en-pager{grid-template-columns:1fr} .en-pager .next{text-align:right} }
.en-gap{display:inline-block; min-width:52px; border-bottom:2px solid var(--blue-400); color:transparent}
.en-order[data-done] .en-pool{display:none}