:root{--ink:#193b3a;--teal:#176b60;--teal-dark:#0c5148;--cream:#f8f6ee;--paper:#fffef9;--muted:#647774;--line:#dce4dc;--gold:#eab654;--coral:#c45538}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Segoe UI,Arial,sans-serif;line-height:1.6}header{max-width:1320px;margin:auto;padding:25px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:750;font-size:19px;line-height:1.2}.brand small{display:block;color:var(--muted);font-size:11px;font-weight:500;margin-top:5px;letter-spacing:1px}.brand-mark{width:48px;height:48px;display:grid;place-items:center;background:var(--teal);color:white;border-radius:15px;font:32px Georgia,serif}a{color:var(--teal)}nav{display:flex;align-items:center;gap:20px;font-size:14px}nav a{text-decoration:none;font-weight:600}nav form{margin:0}main{max-width:1200px;margin:0 auto;padding:45px 35px 75px;min-height:75vh}footer{padding:24px 40px;max-width:1320px;margin:auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}h1{font-size:clamp(30px,4vw,48px);line-height:1.15;font-weight:720;letter-spacing:-1.5px;margin:13px 0 20px}h2{font-size:22px;line-height:1.3;font-weight:650;margin:12px 0}p{margin:10px 0 20px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750;color:var(--teal)}.muted,small{color:var(--muted)}button,.button{border:0;border-radius:9px;padding:13px 21px;font:600 14px Segoe UI,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:15px;cursor:pointer;text-decoration:none;line-height:1.3;transition:background .15s,transform .15s}button:hover,.button:hover{transform:translateY(-1px)}.primary{background:var(--teal);color:white}.primary:hover{background:var(--teal-dark)}.secondary{background:#e9efe4;color:var(--ink);border:1px solid #d1dccf}.link-button{padding:5px;background:none;color:var(--teal)}button:disabled{opacity:.45;cursor:default;transform:none}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:45px;align-items:center;padding:10px 0 45px}.hero h1{font-size:58px}.hero p{font-size:18px;color:var(--muted);max-width:450px}.hero-art{border-radius:90px 90px 20px 20px;background:#e5ecde;aspect-ratio:1.5;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.hero-art:before{content:'';width:110px;height:110px;border-radius:50%;position:absolute;top:22px;right:30px;background:var(--gold)}.hero-art span{font:90px Georgia,serif;z-index:1;color:var(--teal)}.hero-art small{z-index:1}.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:22px;margin:20px 0 35px;gap:20px}.stats div{padding:0 20px;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats strong{display:block;font-size:32px;line-height:1.3}.stats span{font-size:13px;color:var(--muted);display:block;margin-top:7px}.stats strong small{font-size:18px}.stats.five{grid-template-columns:repeat(5,1fr)}.stats.five div{padding:0 9px}.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.tile{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:box-shadow .2s}.tile:hover{box-shadow:0 8px 24px #193b3a0a}.tile p{font-size:14px;color:var(--muted);flex-grow:1}.tile-link{font-size:13px;font-weight:650;color:var(--teal)}.icon{display:inline-grid;place-items:center;width:42px;height:42px;background:#f4e8cb;color:#8a6323;border-radius:12px;font-size:13px;font-weight:750}.review-banner{display:flex;align-items:center;justify-content:space-between;gap:30px;background:#e7eddf;border-radius:16px;padding:26px 30px;margin-top:30px}.review-banner p{margin-bottom:0;font-size:14px}.panel{background:var(--paper);border:1px solid var(--line);padding:30px;border-radius:16px}.page-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:28px}.page-heading p{color:var(--muted);max-width:750px}.auth{max-width:450px;margin:35px auto}.auth h1{font-size:38px}.auth button{width:100%;margin-top:14px}label{display:block;font-size:13px;font-weight:650;margin-bottom:16px}input,select,textarea{display:block;margin-top:6px;border:1px solid #c7d4ca;background:white;padding:12px;border-radius:8px;width:100%;color:var(--ink);font:15px Segoe UI,sans-serif}textarea{min-height:85px;resize:vertical}input[lang=ar],textarea[lang=ar]{font-size:24px}.toggle{display:flex;align-items:center;gap:9px;font-weight:500}.toggle input{width:18px;height:18px;margin:0;accent-color:var(--teal)}.filter-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;margin:20px 0 28px}.filter-bar label{flex:1;min-width:170px;margin:0}.filter-bar button{min-height:46px}.notice{padding:16px 20px;border-radius:10px;background:#ebefdd;color:var(--ink);font-size:14px;margin:18px 0}.notice.error{background:#fae6df;color:#8b2f22}.notice.success{background:#e0f0df}.practice{max-width:960px;margin:auto}.practice-top{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);gap:15px}.progress-track{height:5px;border-radius:4px;background:#dce6da;margin:13px 0 22px;overflow:hidden}#progress-fill{height:100%;background:var(--teal);transition:width .2s}.learning-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--paper);min-height:420px}.card-image{padding:25px;background:white;display:flex;flex-direction:column;justify-content:center;align-items:center}.card-image img{width:100%;height:300px;object-fit:contain}.card-image small{font-size:10px;display:block;max-width:280px;text-align:center;padding-top:15px}.card-content{padding:40px 32px;display:flex;flex-direction:column;align-items:flex-start}.card-content h2{font-size:40px;margin-bottom:4px}.card-content>p{color:var(--muted);font-size:14px}.audio-button{margin:12px 0 20px}.card-content .arabic{color:var(--ink);font-size:34px;width:100%;text-align:left}.arabic{font-size:34px;line-height:1.8;font-family:Segoe UI,Arial,sans-serif}.practice-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:auto}.card-navigation{display:flex;align-items:center;justify-content:space-between;padding:22px 0;font-size:13px;color:var(--muted)}#daily-quiz{max-width:960px;margin:20px auto}.empty{text-align:center;padding:60px 35px}.category-grid,.journey-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.category-grid .tile{min-height:160px}.word-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.mini-card{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-decoration:none}.mini-card img{width:100%;height:140px;object-fit:contain;background:white;border-radius:8px}.mini-card h2{font-size:18px}.mini-card small{font-size:11px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper);margin:24px 0}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{font-size:10px;text-transform:uppercase;letter-spacing:.7px;background:#edf1e6;color:var(--muted);padding:15px 14px;white-space:nowrap}td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:middle}td small{display:block;font-size:11px}.table-image{width:55px;height:55px;object-fit:contain;background:white;border-radius:7px}.word-link{font-size:15px;font-weight:650;text-decoration:none}.badge{display:inline-block;border-radius:30px;padding:4px 10px;font-size:11px;background:#e4efdf}.badge.draft{background:#f4e8cb;color:#876222}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.asset-panel{margin-bottom:24px}.editor-picture{display:block;width:100%;height:260px;object-fit:contain;background:white;margin:12px 0;border-radius:10px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:15px}.record-buttons{display:flex;gap:10px}audio{max-width:100%;margin:10px 0}.asset-panel .learning-card{display:flex;flex-direction:column}.asset-panel .card-image img{height:200px}.asset-panel .card-content{padding:25px}.asset-panel .practice-top{font-size:10px}.asset-panel .practice-actions{display:none}.back-link{display:inline-block;margin-bottom:12px;font-size:13px;text-decoration:none}.children-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.narrow{max-width:760px;margin:auto}.quiz{max-width:760px;margin:auto;text-align:center}.quiz>img{width:260px;height:220px;object-fit:contain;background:white;border-radius:12px;margin:15px auto}.quiz fieldset{border:0;padding:0;margin:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.quiz fieldset label{margin:0;border:1px solid var(--line);background:#f8faf3;border-radius:10px;display:flex;align-items:center;gap:12px;padding:15px;text-align:left;font-size:17px;font-weight:500;cursor:pointer}.quiz fieldset input{width:19px;height:19px;margin:0;accent-color:var(--teal)}.quiz fieldset img{width:130px;height:110px;object-fit:contain}.quiz fieldset label:has(input:checked){border:2px solid var(--teal);padding:14px;background:#e4efdf}.arabic-keyboard{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:20px}.arabic-keyboard button{font-size:23px;padding:7px;width:45px;background:#e9efe4;color:var(--ink)}.arabic-keyboard .wide{width:auto;font-size:13px;padding:12px}#arabic-answer{font-size:30px;text-align:right}#quiz-feedback{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}#letter-feedback span.wrong,#letter-feedback span.extra{color:#c32a27;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}#letter-feedback span.missing{color:#c32a27;text-decoration:underline dotted;text-decoration-thickness:3px;text-underline-offset:5px}#letter-feedback{unicode-bidi:plaintext}#quiz-result h2{font-size:34px}.trend-chart{display:flex;gap:15px;overflow:auto;align-items:stretch}.trend-day{min-width:115px;display:flex;flex-direction:column;gap:7px;padding:15px;background:#f1f4e9;border-radius:10px}.trend-day small{font-size:11px}meter{width:100%;height:20px}progress{width:100%;accent-color:var(--teal)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:15px 25px;background:var(--ink);color:white;border-radius:10px;box-shadow:0 5px 20px #0002;z-index:10;max-width:90vw}[hidden]{display:none!important}summary{cursor:pointer;font-weight:650}
@media(max-width:1000px){.tile-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:44px}.word-grid{grid-template-columns:repeat(3,1fr)}.children-grid{grid-template-columns:1fr 1fr}header{padding:20px;flex-wrap:wrap}nav{gap:14px;flex-wrap:wrap}.stats.five{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){main{padding:30px 18px 50px}h1{letter-spacing:-.7px}.hero{grid-template-columns:1fr;gap:20px}.hero-art{display:none}.hero h1{font-size:42px}.tile-grid,.category-grid,.journey-grid,.children-grid,.editor-grid{grid-template-columns:1fr}.stats{gap:7px;padding:16px 7px}.stats div{padding:0 10px}.stats strong{font-size:24px}.stats span{font-size:11px}.stats.five{grid-template-columns:1fr 1fr}.learning-card{grid-template-columns:1fr}.card-image img{height:210px}.card-content{padding:25px}.card-content h2{font-size:34px}.card-image{padding:20px}.page-heading,.review-banner{align-items:flex-start;flex-direction:column}.word-grid{grid-template-columns:1fr 1fr}.panel{padding:23px}.quiz fieldset{grid-template-columns:1fr}.quiz fieldset label{font-size:16px}footer{padding:22px 18px;gap:15px;flex-wrap:wrap}nav{font-size:12px}nav .link-button{font-size:12px}.brand{font-size:16px}.card-navigation{gap:10px}.card-navigation button{padding:12px}.practice-top{font-size:11px}.filter-bar{flex-direction:column;align-items:stretch}.hero>div>p{font-size:16px}}

.heading-actions{display:flex;flex-direction:column;gap:10px;min-width:200px}.letter-help{text-align:left;font-size:13px;margin:10px 0 20px;padding:12px;border:1px solid var(--line);border-radius:8px}.letter-help p{margin-bottom:5px}
.spelling-inline{font-size:26px;unicode-bidi:plaintext}.spelling-inline .wrong,.spelling-inline .extra{color:#c32a27;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}.spelling-inline .missing{color:#c32a27;text-decoration:underline dotted;text-underline-offset:5px}

.word-examples{margin:1rem 0;padding:.8rem;border:1px solid var(--line,#ddd);border-radius:12px}.word-examples summary{cursor:pointer;font-weight:600}.word-examples audio,.example-editor audio{width:100%;max-width:100%}.example-editor{padding:1rem 0;border-top:1px solid var(--line,#ddd)}.example-editor summary{cursor:pointer;margin-bottom:.8rem}
