@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
/* Lernap unified visual theme — chrome only; English educational content stays LTR. */
:root{--purple:#6650e6;--plight:#eee8ff;--coral:#fb796b;--yellow:#ffbd59;--mint:#8fdec9;--text:#17183e;--muted:#615c77;--paper:#faf7ff;--border:#ebe5f6}
html{background:#e9ddf8}body{background:#e9ddf8;color:var(--text);font-family:Vazirmatn,Tahoma,sans-serif}
#app{max-width:460px;background:linear-gradient(155deg,#fff5ec 0%,#faf5ff 29%,#fbf8ff 100%);box-shadow:0 12px 55px #35225c1c}
header{direction:rtl;padding:20px 18px 12px;background:linear-gradient(160deg,#fff5ed,#f2e7ff);border-bottom:1px solid #ffffff8c}
header .brand{direction:ltr;font-family:Arial,sans-serif;font-weight:900;color:#342273}
.circle{background:#fffdffdb;border:1px solid #e9deef}
#lesson{direction:rtl;text-align:right}
#lesson .eyebrow{font-family:Vazirmatn,Tahoma,sans-serif;letter-spacing:0;font-size:12px;color:#6a50cf}
#lesson .page-title{color:#231c4b;font-family:Vazirmatn,Tahoma,sans-serif;font-weight:900;line-height:1.5;letter-spacing:0;font-size:clamp(23px,6vw,29px)}
#lesson>.muted{font-family:Vazirmatn,Tahoma,sans-serif;color:#615b78;font-size:13px;line-height:1.9}
#lesson .back,.lernap-home-link{display:inline-flex;align-items:center;gap:8px;background:#eee7ff;color:#5b43c7;border:0;border-radius:16px;padding:10px 15px;margin-bottom:16px;font-size:12px;font-weight:800;box-shadow:none}
#lesson #stage-list{display:flex;gap:9px;overflow-x:auto;padding:7px 0 14px;scrollbar-width:thin;direction:rtl;scroll-snap-type:x proximity}
#lesson #stage-list .step{scroll-snap-align:start;flex:0 0 auto;min-width:105px;max-width:150px;border:1px solid #e7e0f6;background:#fffdfd;border-radius:19px;padding:10px 12px;box-shadow:0 4px 12px #3925680d;text-align:right;gap:6px}
#lesson #stage-list .step.current{background:#f1ecff;border-color:#9d8cf2;box-shadow:0 4px 18px #6650e62a}
#lesson #stage-list .step.done{background:#f0fbf6;border-color:#c4eadb}
#lesson #stage-list .step .step-details strong{font-family:Vazirmatn,Tahoma,sans-serif;font-size:12px}
#lesson #stage-list .step .step-details small{font-family:Vazirmatn,Tahoma,sans-serif;font-size:10px;white-space:normal}
#lesson .section-card,#lesson #activity{border:1px solid #f0e8ff;background:#fffefa;border-radius:25px;box-shadow:0 10px 26px #35216414;padding:17px 15px;overflow:hidden}
#lesson #activity .cta,#lesson #activity .purple,#lesson #activity .vc-primary{background:linear-gradient(110deg,#5135d5,#7954ef);border:none;border-radius:16px;color:white;box-shadow:0 5px 13px #6650e62b;font-family:Vazirmatn,Tahoma,sans-serif;font-weight:800}
#lesson #activity button{touch-action:manipulation}
#lesson #activity .vc-root{direction:ltr}
#lesson #activity .vc-guide,#lesson #activity .vc-feedback p,#lesson #activity .vc-hint,#lesson #activity .vc-composer-title,#lesson #activity .vc-error{direction:rtl;text-align:right;font-family:Vazirmatn,Tahoma,sans-serif}
#lesson #activity .vc-user{direction:ltr}
#lesson #activity .vc-question,#lesson #activity .vc-transcript,#lesson #activity .vc-suggestion{direction:ltr;text-align:left;font-family:Arial,sans-serif}
#lesson #activity .vc-composer{text-align:center;background:#fffefd;border-radius:24px}
#lesson #activity .vc-composer-title,#lesson #activity .vc-hint{text-align:center}
#lesson #activity .vc-mic{background:linear-gradient(130deg,#5e43dc,#8767f5);box-shadow:0 5px 20px #6d53e24d}
#lesson #activity .vc-ai-bubble,#lesson #activity .vc-feedback{background:#f2eeff}
#lesson #activity .vc-user-bubble{background:#e0f7ed}
/* Keep English questions, transcripts, grammar examples and quiz material readable. */
#lesson #activity :is(.dialogue,.transcript,.english,.sentence,[lang="en"],.grammar-example,.quiz-question){direction:ltr;text-align:left}
#lesson #activity :is(input,textarea){max-width:100%}
@media(max-width:380px){#lesson #stage-list .step{min-width:94px;padding:8px}#lesson .section-card,#lesson #activity{padding:14px 12px}}