:root{--green:#0f6b5b;--deep:#084d42;--mint:#e2f4ed;--yellow:#f7c94b;--ink:#16302a;--muted:#63746f;--line:#dce8e3;--paper:#fff;--bg:#f4f8f6;--red:#b43b3b;--shadow:0 18px 50px rgba(16,74,61,.12);font-family:"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;color:var(--ink)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% 0,#dff5ec 0,transparent 28%),var(--bg)}
button,input{font:inherit}
.appbar{height:66px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(16px,env(safe-area-inset-left));position:sticky;top:0;z-index:8;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-size:1.16rem}
.brand span,.mascot{display:grid;place-items:center;background:var(--green);color:#fff;font-weight:1000}
.brand span{width:38px;height:38px;border-radius:13px}
.icon-button{width:42px;height:42px;border:0;border-radius:14px;background:var(--mint);color:var(--deep);font-weight:900;cursor:pointer}
main{width:min(820px,calc(100% - 28px));margin:24px auto 90px}
.loading,.empty{min-height:60vh;display:grid;place-content:center;text-align:center;color:var(--muted)}
.mascot{width:76px;height:76px;border-radius:26px;font-size:2rem;margin:auto;box-shadow:var(--shadow)}
h1{font-size:clamp(1.55rem,5vw,2.35rem);margin:0 0 8px;line-height:1.35}
h2{margin:0}
.muted{color:var(--muted);line-height:1.75}
.hero{background:linear-gradient(135deg,var(--deep),var(--green));color:#fff;padding:26px;border-radius:26px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:170px;height:170px;border:32px solid rgba(255,255,255,.08);border-radius:50%;left:-70px;bottom:-100px}
.hero p{color:#d8eee7;margin:4px 0}
.picker,.course-list,.lesson-list,.report-list{display:grid;gap:13px;margin-top:20px}
.choice-card,.course-card,.lesson-card,.report-card{width:100%;border:1px solid var(--line);background:#fff;border-radius:20px;padding:18px;text-align:right;color:var(--ink);box-shadow:0 8px 24px rgba(19,65,54,.05)}
button.choice-card,button.course-card,button.lesson-card{cursor:pointer}
.course-card{display:grid;grid-template-columns:55px 1fr auto;align-items:center;gap:14px}
.course-icon{width:55px;height:55px;border-radius:18px;background:var(--mint);display:grid;place-items:center;color:var(--green);font-weight:1000}
.course-card strong,.lesson-card strong{display:block;font-size:1.05rem}
.course-card small,.lesson-card small{color:var(--muted)}
.locked-course{cursor:default;text-decoration:none;opacity:.82;background:#f8faf9}
.locked-course .locked-icon{filter:grayscale(.45)}
.locked-course .lock{font-size:1.15rem}
.arrow{font-size:1.3rem;color:var(--green)}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:28px 2px 12px}
.section-title span{color:var(--muted);font-size:.85rem}
.book-lesson-list{display:grid;gap:20px}
.term-list{display:grid;gap:30px}
.term-section{display:grid;gap:14px}
.term-heading{display:flex;justify-content:space-between;align-items:center;padding:0 3px}
.term-heading h2{font-size:1.32rem}
.term-heading span{color:var(--muted);font-size:.84rem}
.book-lesson-section{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 10px 30px rgba(19,65,54,.06)}
.book-lesson-head{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.book-lesson-badge{background:var(--mint);color:var(--deep);border-radius:999px;padding:7px 11px;font-size:.78rem;font-weight:900;white-space:nowrap}
.book-lesson-title h2{font-size:1.22rem;line-height:1.5}
.book-lesson-title p{margin:3px 0 0;color:var(--muted);font-size:.9rem;text-align:right}
.book-lesson-progress{min-width:58px;border-radius:13px;background:#f0f5f3;color:var(--green);padding:8px 10px;text-align:center;font-weight:900}
.book-lesson-meta{margin:13px 0 0;color:var(--muted);line-height:1.75}
.book-lesson-section .lesson-list{margin-top:14px}
.progress{height:8px;border-radius:99px;background:#e7eeeb;overflow:hidden;margin-top:12px}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green),#35a382)}
.lesson-card{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.lesson-card.done{border-color:#9bd3bd;background:#f6fffb}
.status-dot{width:36px;height:36px;border-radius:50%;background:#eef3f1;display:grid;place-items:center}
.done .status-dot{background:var(--green);color:#fff}
.player-top{display:grid;gap:12px}
.player-progress{display:flex;gap:6px}
.player-progress span{height:7px;flex:1;border-radius:99px;background:#dfe8e4}
.player-progress span.active,.player-progress span.done{background:var(--green)}
.activity-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(20px,6vw,38px);min-height:430px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:stretch;justify-content:center;text-align:center;margin-top:16px}
.activity-kind{font-size:.78rem;font-weight:900;color:var(--green);margin:0 0 8px}
.activity-card h2{font-size:clamp(1.8rem,8vw,3.2rem);line-height:1.35}
.translation{font-size:1.2rem;color:var(--muted);margin:8px 0 24px}
.word-explanation{background:#fff7d9;border:1px solid #efd887;border-radius:16px;padding:13px 15px;margin:0 auto 14px;text-align:right;line-height:1.8;width:min(100%,560px)}
.word-explanation strong{display:block;color:#6a5100;margin-bottom:3px}
.word-explanation p{margin:0;color:#594b20}
.audio-button{width:94px;height:94px;border-radius:50%;border:0;background:var(--green);color:#fff;font-size:2.1rem;margin:15px auto;box-shadow:0 12px 25px rgba(15,107,91,.25);cursor:pointer}
.repeat-count{color:var(--muted);font-size:.9rem}
.options,.word-bank,.answer-zone{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.option,.token{border:2px solid var(--line);background:#fff;border-radius:15px;padding:13px 18px;color:var(--ink);font-weight:800;cursor:pointer}
.option:hover,.option.selected,.token.selected{border-color:var(--green);background:var(--mint)}
.picture-option{width:min(210px,45%);padding:10px}
.picture-option img{width:100%;aspect-ratio:1.25;object-fit:contain;border-radius:10px;background:#f5f7f6}
.answer-zone{min-height:62px;border:2px dashed #bfd2ca;border-radius:17px;padding:10px}
.answer-zone,.word-bank{direction:ltr}
.activity-card h2{unicode-bidi:plaintext}
.token{unicode-bidi:isolate}
.answer-zone:empty:before{content:"اضغط الكلمات بالترتيب";color:var(--muted);align-self:center}
.text-answer{width:100%;max-width:460px;margin:24px auto 0;border:2px solid var(--line);border-radius:16px;padding:15px;text-align:center;font-size:1.15rem}
.actions{display:flex;gap:10px;margin-top:30px}
.primary,.secondary{border:0;border-radius:15px;padding:14px 18px;font-weight:900;cursor:pointer}
.primary{background:var(--green);color:#fff;flex:1}
.primary:disabled{opacity:.42;cursor:not-allowed}
.secondary{background:var(--mint);color:var(--deep)}
.feedback{border-radius:16px;padding:14px;margin-top:18px;font-weight:800}
.feedback.good{background:#dcf5e9;color:#11633f}
.feedback.bad{background:#fde9e7;color:#9c322d}
.source-step{padding:20px;border-radius:20px;background:#fff7d9;color:#644f09;line-height:1.9}
.report-card{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.report-card strong{font-size:1.4rem;color:var(--green)}
.report-card div{background:#f6f9f7;padding:12px;border-radius:14px}
.report-card span{display:block;color:var(--muted);font-size:.78rem}
.login-needed a{display:inline-block;background:var(--green);color:#fff;text-decoration:none;border-radius:14px;padding:13px 20px;margin-top:12px}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#102d25;color:#fff;padding:12px 18px;border-radius:13px;z-index:20;box-shadow:var(--shadow)}
.notebook-task{width:100%}
.notebook-icon{font-size:3rem;margin-bottom:6px}
.notebook-lines{display:grid;gap:9px;margin:18px auto;width:min(100%,520px)}
.notebook-line{background:repeating-linear-gradient(#fff 0,#fff 34px,#c9ddd5 35px);border:1px solid var(--line);border-radius:12px;min-height:48px;padding:10px 14px;text-align:left;font:800 1.12rem/1.5 "Trebuchet MS",Arial,sans-serif}
.notebook-note{background:#fff7d9;color:#644f09;border-radius:13px;padding:10px;font-weight:800}
@media(max-width:560px){main{margin-top:16px}
.hero{padding:22px;border-radius:22px}
.book-lesson-section{padding:16px;border-radius:20px}
.book-lesson-head{grid-template-columns:auto 1fr;gap:10px}
.book-lesson-progress{grid-column:1/-1;justify-self:stretch}
.course-card{grid-template-columns:48px 1fr auto;padding:15px}
.course-icon{width:48px;height:48px}
.activity-card{min-height:390px;border-radius:23px;padding:20px}
.actions{position:sticky;bottom:10px}
.primary,.secondary{box-shadow:0 8px 18px rgba(18,69,57,.12)}
.report-card{grid-template-columns:1fr}
.picture-option{width:46%}
}