.arapcaCumleAction{display:flex;justify-content:flex-end;gap:9px;margin:12px 0 0;padding-top:12px;border-top:1px solid #eadfd5;direction:ltr;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.arapcaCumleAction .readBtn{display:inline-flex;align-items:center;justify-content:center;margin:0}
.arapcaCumleBtn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid #0f766e;border-radius:10px;background:#f0fdfa;color:#115e59;font-weight:800;cursor:pointer}
.arapcaCumleBtn:hover,.arapcaCumleBtn:focus-visible{background:#ccfbf1;outline:3px solid rgba(13,148,136,.18)}
body.arapcaCumleModalOpen{overflow:hidden}
.arapcaCumleModal{position:fixed;inset:0;z-index:2400;display:flex;align-items:center;justify-content:center;padding:20px}
.arapcaCumleModal[hidden]{display:none}
.arapcaCumleOverlay{position:absolute;inset:0;background:rgba(15,23,42,.68);backdrop-filter:blur(3px)}
.arapcaCumlePanel{position:relative;z-index:1;width:min(1050px,100%);max-height:94vh;overflow:auto;border-radius:22px;background:#fffaf4;box-shadow:0 28px 80px rgba(15,23,42,.38)}
.arapcaCumleClose{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;background:#7c2d12;color:#fff;font-size:27px;line-height:1;cursor:pointer}
.arapcaCumleHeader{padding:25px 70px 20px 25px;background:linear-gradient(135deg,#134e4a,#0f766e);color:#fff}
.arapcaCumleHeader>span{font-size:.78rem;font-weight:900;letter-spacing:.12em;color:#99f6e4}
.arapcaCumleHeader h3{margin:5px 0 4px;font-size:clamp(1.35rem,3vw,2rem)}
.arapcaCumleHeader p{margin:0;color:#ccfbf1}
.arapcaCumleSentences{display:grid;grid-template-columns:1.2fr .9fr 1fr;gap:12px;padding:18px 22px 0}
.arapcaCumleSentences p{margin:0;padding:14px 16px;border:1px solid #d9cec3;border-radius:13px;background:#fff}
.arapcaCumleSentences p:first-child{font-family:"Noto Naskh Arabic","Segoe UI",serif;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.7;text-align:right;color:#7c2d12}
.arapcaCumleSentences p:not(:first-child){display:flex;flex-direction:column;justify-content:center;color:#1e293b;font-weight:700}
.arapcaCumleSentences .arapcaCumleSentencePron{background:#f0fdfa;color:#115e59}
.arapcaCumleSentences span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b}
.arapcaCumleSummary{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 22px}
.arapcaCumleSummary>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:12px;background:#fef3c7;color:#78350f}
.arapcaCumleSummary small{font-weight:700}.arapcaCumleSummary strong{text-align:right}
.arapcaCumleSection{padding:5px 22px 15px}
.arapcaCumleSection h4,.arapcaCumleExplanation h4,.arapcaCumleComparison h4{margin:0 0 9px;color:#172033}
.arapcaCumleSection h4 span{font-size:.82rem;font-weight:500;color:#64748b}
.arapcaCumleFlow{display:flex;gap:10px;overflow-x:auto;padding:2px 1px 10px}
.arapcaCumleGroup{position:relative;flex:1 0 175px;min-width:0;padding:13px;border:2px solid #cbd5e1;border-radius:14px;background:#fff;text-align:right;box-shadow:0 5px 14px rgba(15,23,42,.06)}
.arapcaCumleGroup:not(:last-child)::after{content:"←";position:absolute;left:-18px;top:50%;z-index:2;color:#64748b;font-weight:900;transform:translateY(-50%)}
.arapcaCumleOrder{position:absolute;top:8px;left:8px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e2e8f0;color:#475569;font:800 .75rem/1 system-ui}
.arapcaCumleGroup small{display:block;margin-left:26px;font-weight:900;color:#475569}
.arapcaCumleGroup>b{display:block;margin:6px 0 2px;font-family:"Noto Naskh Arabic","Segoe UI",serif;font-size:1.8rem;line-height:1.5;color:#172033}
.arapcaCumlePron{display:block;margin:2px 0 5px;color:#9a3412;font-size:.9rem;font-weight:700;direction:ltr;text-align:left}
.arapcaCumlePron em{font-style:normal;color:#64748b}
.arapcaCumleGroup>strong{display:block;color:#334155}
.arapcaCumleGroup>p{margin:7px 0 0;color:#64748b;font-size:.88rem;line-height:1.45}
.arapcaCumleGroup.role-subject{border-color:#3b82f6}.arapcaCumleGroup.role-subject small{color:#1d4ed8}
.arapcaCumleGroup.role-predicate{border-color:#f59e0b}.arapcaCumleGroup.role-predicate small{color:#b45309}
.arapcaCumleGroup.role-verb{border-color:#ef4444}.arapcaCumleGroup.role-verb small{color:#b91c1c}
.arapcaCumleGroup.role-object{border-color:#a855f7}.arapcaCumleGroup.role-object small{color:#7e22ce}
.arapcaCumleGroup.role-preposition{border-color:#14b8a6}.arapcaCumleGroup.role-preposition small{color:#0f766e}
.arapcaCumleGroup.role-adverb{border-color:#ec4899}.arapcaCumleGroup.role-adverb small{color:#be185d}
.arapcaCumleGroup.role-adjective{border-color:#84cc16}.arapcaCumleGroup.role-adjective small{color:#4d7c0f}
.arapcaCumleGroup.role-connector{border-color:#64748b}.arapcaCumleGroup.role-connector small{color:#475569}
.arapcaCumleSecondary{margin:0 22px 15px;padding:15px;border:1px dashed #94a3b8;border-radius:15px;background:#f8fafc}
.arapcaCumleExplanation,.arapcaCumleComparison{margin:0 22px 14px;padding:14px 16px;border-radius:14px}
.arapcaCumleExplanation{border-left:5px solid #0f766e;background:#ecfdf5}
.arapcaCumleComparison{border-left:5px solid #d97706;background:#fffbeb}
.arapcaCumleExplanation p,.arapcaCumleComparison p{margin:0;line-height:1.65;color:#334155}
.arapcaCumleComparison aside{margin-top:10px;padding-top:10px;border-top:1px solid #f3d18a;color:#7c2d12;font-weight:650}
.arapcaCumleLegend{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 22px}
.arapcaCumleLegend span{padding:7px 10px;border-radius:999px;background:#e2e8f0;color:#475569;font-size:.82rem}
.arapcaCumleLegend b{color:#172033}
@media(max-width:720px){.arapcaCumleModal{padding:0}.arapcaCumlePanel{width:100%;max-height:100vh;border-radius:0}.arapcaCumleHeader{padding:20px 58px 17px 15px}.arapcaCumleSentences{grid-template-columns:1fr;padding:12px 12px 0}.arapcaCumleSummary{grid-template-columns:1fr;padding:10px 12px}.arapcaCumleSection{padding-left:12px;padding-right:12px}.arapcaCumleFlow{display:grid;overflow:visible}.arapcaCumleGroup{width:100%;flex-basis:auto}.arapcaCumleGroup:not(:last-child)::after{content:"↓";left:50%;top:auto;bottom:-20px;transform:translateX(-50%)}.arapcaCumleSecondary{margin-left:12px;margin-right:12px}.arapcaCumleExplanation,.arapcaCumleComparison{margin-left:12px;margin-right:12px}.arapcaCumleLegend{padding-left:12px;padding-right:12px}.arapcaCumleAction{display:grid;grid-template-columns:1fr 1fr}.arapcaCumleAction .readBtn,.arapcaCumleBtn{justify-content:center;width:100%;margin:0}}