@import "https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;700&display=swap";:root{--page-bg:#f8f4ec;--text-color:#51453c;--heading-color:#2f241c;--muted-text:#847468;--accent-strong:#9b5316;letter-spacing:.01em;color:var(--text-color);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#f28c281f,#0000 30%),linear-gradient(#fffaf0,#f7f2ea 38%,#f3efe7);font:18px/1.55 Trebuchet MS,Aptos,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}#root{width:min(1180px,100% - 24px);min-height:100svh;margin:0 auto}h1,h2,h3,strong{color:var(--heading-color)}h1{margin:.8rem 0 1rem;font-size:clamp(2.5rem,5vw,4.6rem);line-height:1}h2,h3,p{margin:0}h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15}h3{font-size:1.3rem;line-height:1.2}button,input,textarea,select{font:inherit}.app-shell{flex-direction:column;gap:2rem;padding:2rem 0 3rem;display:flex}.hero-panel,.stat-card,.topic-card,.question-card,.question-picker-card,.result-card,.review-card{background:#ffffffe0;border:1px solid #6c52371f;border-radius:24px;box-shadow:0 18px 40px #684f2e14}.hero-panel{background:radial-gradient(circle at 0 0,#f28c2847,#0000 30%),radial-gradient(circle at 100% 100%,#2a9d8f38,#0000 28%),linear-gradient(135deg,#fff8eafa,#f5fffcfa);justify-content:space-between;gap:1.5rem;padding:2rem;display:flex}.hero-copy{max-width:42rem}.eyebrow,.topic-badge,.question-tag{width:fit-content;color:var(--accent-strong);letter-spacing:.08em;text-transform:uppercase;background:#f8e8cee6;border-radius:999px;padding:.4rem .75rem;font-size:.85rem;display:inline-flex}.topic-badges{flex-wrap:wrap;gap:.5rem;display:flex}.category-badge{background:color-mix(in srgb, var(--topic-color) 18%, white);width:fit-content;color:var(--heading-color);border-radius:999px;padding:.4rem .75rem;font-size:.85rem;font-weight:600;display:inline-flex}.hero-text,.question-note{color:var(--muted-text)}.hero-stats,.topic-grid,.topic-meta,.quiz-topbar,.answers-grid,.feedback-panel,.result-actions,.review-list,.progress-copy,.section-heading,.question-picker-header,.question-selector-grid,.question-header-row,.question-timer__labels,.timeout-badge{display:flex}.hero-stats{flex-wrap:wrap;align-self:flex-end;gap:1rem}.stat-card{min-width:130px;padding:1rem 1.1rem}.stat-card strong,.score-pill{color:var(--heading-color);font-size:1.4rem;display:block}.stat-card span,.topic-meta span,.progress-copy span,.review-card span{color:var(--muted-text)}.topics-section,.quiz-section,.result-section{flex-direction:column;gap:1.5rem;display:flex}.filters-panel{background:#ffffffc7;border:1px solid #6c52371f;border-radius:20px;flex-wrap:wrap;align-items:end;gap:1rem;padding:1.25rem;display:flex}.filter-field{flex-direction:column;flex:260px;gap:.45rem;display:flex}.filter-field span{color:var(--heading-color);font-weight:600}.filter-field input,.filter-field select{min-height:52px;color:var(--heading-color);background:#fffdfaf2;border:1px solid #6c52372e;border-radius:14px;outline:none;padding:.85rem 1rem}.filter-field input:focus,.filter-field select:focus{border-color:#f28c28b8;box-shadow:0 0 0 4px #f28c281f}.filter-summary{background:#fff8eaf2;border-radius:16px;flex-direction:column;gap:.2rem;min-width:140px;padding:.9rem 1rem;display:flex}.filter-summary strong{font-size:1.35rem}.filter-summary span{color:var(--muted-text)}.section-heading{justify-content:space-between}.topic-grid,.answers-grid,.review-list,.result-actions,.topic-meta,.quiz-topbar,.feedback-panel{flex-wrap:wrap;gap:1rem}.topic-card,.question-card,.question-picker-card,.result-card,.review-card{padding:1.5rem}.topic-card{flex-direction:column;flex:280px;align-items:flex-start;gap:.9rem;display:flex;position:relative;overflow:hidden}.topic-card:after{content:"";background:color-mix(in srgb, var(--topic-color) 22%, white);z-index:0;pointer-events:none;border-radius:50%;width:148px;height:148px;position:absolute;bottom:-52px;right:-52px}.topic-meta{margin:auto 0 1.2rem}.primary-button,.ghost-button,.answer-button,.question-selector{cursor:pointer;font:inherit;border:none;transition:transform .18s,box-shadow .18s,background-color .18s,border-color .18s,color .18s}.primary-button,.ghost-button{border-radius:16px;padding:.9rem 1.2rem}.primary-button{color:#fff;background:linear-gradient(135deg,#f28c28,#df6c3b);box-shadow:0 14px 28px #d9742f47}.ghost-button{color:var(--heading-color);background:#ffffffd1;border:1px solid #6c523724}.read-button{color:#17506c;background:linear-gradient(135deg,#56a0d329,#74d2c42e);border:1px solid #56a0d342;box-shadow:0 12px 24px #56a0d31f}.primary-button:hover,.ghost-button:hover,.answer-button:hover:not(:disabled),.question-selector:hover:not(:disabled){transform:translateY(-2px)}.quiz-topbar{justify-content:space-between;align-items:center}.quiz-topbar__actions{flex-wrap:wrap;gap:.75rem;display:flex}.progress-block{flex:320px}.progress-copy{justify-content:space-between;margin-bottom:.5rem}.progress-track{background:#57759024;border-radius:999px;height:12px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg,#2a9d8f,#577590);height:100%}.score-pill{background:#fffbf3eb;border-radius:18px;padding:.8rem 1rem}.question-picker-card{flex-direction:column;gap:1rem;display:flex}.question-picker-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem}.question-picker-header h2{margin:.75rem 0 0}.question-selector-grid{flex-wrap:wrap;gap:.85rem}.question-selector{width:56px;height:56px;color:var(--heading-color);background:#fffcf6f5;border:2px solid #6c523724;border-radius:999px;justify-content:center;align-items:center;font-weight:700;display:inline-flex;box-shadow:0 10px 18px #684f2e14}.question-selector.is-active{color:var(--accent-strong);background:#f28c2829;border-color:#f28c28b8}.question-selector.is-hurry{color:#b42318;background:linear-gradient(135deg,#ffe6e6fa,#fff6f0fa);border-color:#d6282880;animation:.65s ease-in-out infinite hurry-bounce;box-shadow:0 0 0 6px #d6282814}.question-selector.is-answered{color:#1c6f65;box-shadow:none;cursor:default;background:#2a9d8f29;border-color:#2a9d8f6b}.question-selector.is-answered-wrong{color:#b42318;box-shadow:none;cursor:default;background:#d6282824;border-color:#d628286b}.question-selector:disabled{opacity:1}.question-card--empty{text-align:center}.question-card--form{flex-direction:column;gap:1rem;display:flex}.question-card--modal{width:min(920px,100vw - 2rem);max-height:calc(100vh - 2rem);position:relative;overflow:auto}.question-card--modal.is-celebrating{border-color:#2a9d8f70;animation:.68s cubic-bezier(.16,1,.3,1) celebrate-pop,1.4s ease-out celebrate-glow;box-shadow:0 22px 48px #684f2e1a,0 0 0 10px #2a9d8f1f,0 0 42px #f9c74f47}.question-card--modal.is-failing{border-color:#d6282875;animation:.68s fail-shake,1.2s ease-out fail-glow;box-shadow:0 22px 48px #684f2e1a,0 0 0 10px #d6282821,0 0 38px #dc262629}.question-form{background:#fffbf3d1;border:1px solid #6c52371a;border-radius:20px;flex-direction:column;gap:1rem;padding:1.1rem;display:flex}.question-form__prompt{flex-direction:column;gap:.55rem;display:flex}.question-form__prompt h2{margin:0}.question-form__meta{color:#8a4b16;background:#f28c281f;border-radius:999px;width:fit-content;padding:.45rem .8rem;font-weight:700;display:inline-flex}.question-modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#4e3a2761;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.question-modal__toolbar{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.question-modal__close{min-width:96px}.celebration-burst{pointer-events:none;position:absolute;inset:-18px;overflow:hidden}.celebration-burst__ring{opacity:0;border:8px solid #2a9d8f38;border-radius:50%;width:12rem;height:12rem;animation:.86s ease-out forwards celebration-ring;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)scale(.35)}.celebration-burst__ring--late{border-color:#f9c74f47;animation-delay:.12s}.celebration-burst__piece{opacity:0;width:13px;height:24px;transform:translate(-50%, -50%) rotate(var(--piece-rotate)) translateY(0);animation:1.24s cubic-bezier(.16,1,.3,1) forwards confetti-drop;animation-delay:var(--piece-delay);background:linear-gradient(#9be15d,#00c853);border-radius:999px;position:absolute;top:8%;left:50%;box-shadow:0 8px 18px #00c85347}.celebration-burst__piece:nth-child(3n){background:linear-gradient(#f9c74f,#f8961e)}.celebration-burst__piece:nth-child(4n){background:linear-gradient(#90f1ef,#43aa8b)}.celebration-burst__piece:nth-child(5n){background:linear-gradient(#fff,#d8f3dc)}.celebration-burst__piece:nth-child(7n){background:linear-gradient(#ff70a6,#ff9f1c)}.failure-burst{pointer-events:none;position:absolute;inset:0;overflow:hidden}.failure-burst__flash{opacity:0;background:radial-gradient(circle,#ffffffb8,#0000 20%),radial-gradient(circle,#dc262640,#0000 58%);animation:.46s ease-out forwards failure-flash;position:absolute;inset:0}.failure-burst__piece{opacity:0;width:140%;height:22px;transform:translate(-50%, -50%) rotate(calc(var(--piece-index) * 11deg - 104deg)) scaleX(.3);animation:.86s ease-out forwards fail-burst;animation-delay:var(--piece-delay);background:linear-gradient(90deg,#fff0,#f871712e,#dc262647,#fff0);border-radius:999px;position:absolute;top:50%;left:50%}.question-header-row{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.timer-badge{color:#8a4b16;background:linear-gradient(135deg,#ffeecff2,#fffaeef2);border-radius:999px;align-items:center;gap:.45rem;padding:.6rem .9rem;display:inline-flex;box-shadow:0 10px 24px #f28c2829}.timer-badge strong{font-size:1.1rem}.timer-badge__icon{background:#ffffffb8;border-radius:50%;justify-content:center;align-items:center;width:1.7rem;height:1.7rem;font-size:1rem;display:inline-flex}.timer-badge.is-warning{color:#ad1f1f;background:linear-gradient(135deg,#ffd7d7fa,#fff1ecfa);animation:.95s ease-in-out infinite pulse-badge}.question-timer{background:radial-gradient(circle at 100% 0,#2a9d8f2e,#0000 32%),linear-gradient(135deg,#f2fbf7f5,#fffbf3f5);border:1px solid #2a9d8f29;border-radius:20px;margin-bottom:1.25rem;padding:1rem 1.1rem}.question-timer.is-warning{background:radial-gradient(circle at 100% 0,#d6282829,#0000 30%),linear-gradient(135deg,#fff1f1fa,#fff8f0fa);border-color:#d628282e}.question-timer__labels{color:var(--heading-color);justify-content:space-between;gap:1rem;margin-bottom:.65rem}.question-timer__labels span{color:var(--muted-text);font-weight:600}.question-timer.is-warning .question-timer__labels span,.question-timer.is-warning .question-timer__labels strong{color:#b42318}.question-timer__track{background:#2a9d8f24;border-radius:999px;height:16px;position:relative;overflow:hidden}.question-timer__track:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,#ffffff1a,#0000);position:absolute;inset:3px}.question-timer__fill{border-radius:inherit;background:linear-gradient(90deg,#43aa8b,#f9c74f,#f8961e);height:100%;transition:width .9s linear,background .18s;box-shadow:0 8px 18px #43aa8b52}.question-timer.is-warning .question-timer__fill{background:linear-gradient(90deg,#f25f5c,#e5383b,#ba181b);animation:.8s linear infinite warning-stripes;box-shadow:0 10px 22px #d628284d}.timeout-badge{color:#b42318;background:linear-gradient(135deg,#ffe1e1fa,#fff1ecfa);border:1px solid #d6282833;border-radius:999px;align-items:center;gap:.6rem;width:fit-content;margin:0 0 1rem;padding:.7rem 1rem;animation:.4s ease-out timeout-pop;box-shadow:0 12px 28px #d6282824}.timeout-badge__icon{background:#ffffffb8;border-radius:50%;justify-content:center;align-items:center;width:1.9rem;height:1.9rem;display:inline-flex}.answers-grid{margin-top:1.4rem}.answer-button{min-height:88px;color:var(--heading-color);text-align:left;background:#fffcf6eb;border:1px solid #6c52371f;border-radius:18px;flex:280px;align-items:flex-start;gap:.9rem;padding:1rem 1.1rem;font-size:1.08rem;line-height:1.55;display:flex;position:relative;overflow:hidden}.answer-button__label{flex:none;font-size:1.12rem;font-weight:800}.answer-button__text{flex:1;font-size:1.12rem}.answer-button:disabled{cursor:default}.answer-button.is-correct{background:radial-gradient(circle at 12% 18%,#fffffff2,#0000 28%),linear-gradient(135deg,#d1fae5fa,#a7f3d0e0);border-color:#2a9d8fa3;box-shadow:inset 0 1px #ffffff8c,0 20px 34px #2a9d8f3d,0 0 0 5px #2a9d8f1a}.answer-button.is-correct.is-revealed{animation:.72s cubic-bezier(.16,1,.3,1) answer-correct-pop}.answer-button.is-wrong{background:radial-gradient(circle at 12% 18%,#fffc,#0000 30%),linear-gradient(135deg,#fee2e2fa,#fecacae6);border-color:#d6282885;box-shadow:inset 0 1px #ffffff80,0 18px 30px #d6282833,0 0 0 5px #d6282817}.answer-button.is-wrong.is-revealed{animation:.62s answer-wrong-shift}.answer-button.is-muted{opacity:.62;transform:scale(.985)}.feedback-panel{background:#f6f8fbf5;border:1px solid #0000;border-radius:18px;justify-content:space-between;align-items:center;margin-top:1.4rem;padding:1.1rem;animation:.32s ease-out feedback-rise}.feedback-panel.is-success{background:linear-gradient(135deg,#ecfdf5fa,#f6fffafa);border-color:#2a9d8f2e;box-shadow:0 16px 32px #2a9d8f17}.feedback-panel.is-fail{background:linear-gradient(135deg,#fff2f2fa,#fff8f6fa);border-color:#d6282829;box-shadow:0 16px 32px #d6282814}.feedback-panel.is-timeout{background:linear-gradient(135deg,#fff1f1fa,#fff7eefa);border:1px solid #d6282829}.result-summary{font-size:1.1rem}.review-card{flex:280px}.review-card.is-success{border-color:#2a9d8f3d}.review-card.is-fail{border-color:#d6282838}.empty-state{background:#fffcf6c2;border:1px dashed #6c523738;border-radius:20px;padding:1.5rem}@keyframes pulse-badge{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes warning-stripes{0%{filter:saturate()}50%{filter:saturate(1.2)brightness(1.04)}to{filter:saturate()}}@keyframes hurry-bounce{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-3px)scale(1.07)}}@keyframes timeout-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes celebrate-pop{0%{transform:scale(.98)translateY(6px)}30%{transform:scale(1.01)translateY(-3px)}50%{transform:translate(-4px)}65%{transform:translate(4px)}to{transform:scale(1)translate(0)translateY(0)}}@keyframes celebrate-glow{0%{background:#f0fff7fa}45%{background:#dcfce7fa}to{background:#fffffff5}}@keyframes celebration-ring{0%{opacity:0;transform:translate(-50%,-50%)scale(.35)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(1.8)}}@keyframes confetti-drop{0%{opacity:0;transform:translate(-50%, -50%) rotate(var(--piece-rotate)) translateY(-8px) scale(.6)}15%{opacity:1}38%{opacity:1}to{opacity:0;transform:translate(-50%, -50%) rotate(calc(var(--piece-rotate) + 260deg)) translateY(430px) translateX(calc((var(--piece-index) - 17) * 13px)) scale(1)}}@keyframes fail-shake{0%{transform:translate(0)}14%{transform:translate(-12px)rotate(-.4deg)}28%{transform:translate(12px)rotate(.4deg)}44%{transform:translate(-10px)rotate(-.25deg)}62%{transform:translate(8px)rotate(.2deg)}78%{transform:translate(-4px)}to{transform:translate(0)rotate(0)}}@keyframes fail-glow{0%{background:#fff4f4fa}40%{background:#fee2e2fa}to{background:#fffffff5}}@keyframes failure-flash{0%{opacity:0;transform:scale(.86)}24%{opacity:1}to{opacity:0;transform:scale(1.18)}}@keyframes fail-burst{0%{opacity:0;transform:translate(-50%, -50%) rotate(calc(var(--piece-index) * 11deg - 104deg)) scaleX(.18)}18%{opacity:1}to{opacity:0;transform:translate(-50%, -50%) rotate(calc(var(--piece-index) * 11deg - 104deg)) scaleX(1.18)}}@keyframes answer-correct-pop{0%{filter:saturate();transform:scale(.94)}38%{filter:saturate(1.28)brightness(1.04);transform:scale(1.075)}68%{transform:scale(.99)}to{filter:saturate();transform:scale(1)}}@keyframes answer-wrong-shift{0%{transform:translate(0)}18%{transform:translate(-10px)}36%{transform:translate(9px)}55%{transform:translate(-7px)}74%{transform:translate(4px)}to{transform:translate(0)}}@keyframes feedback-rise{0%{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=900px){.app-shell{gap:1.2rem;padding-top:1rem}.hero-panel{flex-direction:column;padding:1.4rem}.hero-stats{align-self:stretch}.stat-card{flex:120px}.feedback-panel,.quiz-topbar,.progress-copy,.section-heading,.filters-panel,.question-picker-header,.question-header-row,.question-timer__labels{flex-direction:column;align-items:flex-start}.progress-block,.filter-field,.filter-summary{width:100%}.filters-panel{gap:.85rem;padding:1rem}.filter-field{flex:none}.filter-field input,.filter-field select{min-height:48px;padding:.75rem .9rem}.filter-summary{min-width:0;padding:.8rem .9rem}.question-selector{width:52px;height:52px}.timer-badge{justify-content:center;align-self:stretch}}@media (width<=640px){.filters-panel{border-radius:18px}.filter-field span{font-size:.98rem}.filter-field input,.filter-field select{border-radius:12px;min-height:46px}.question-selector-grid{gap:.65rem}.question-selector{width:48px;height:48px}.question-timer{padding:.9rem}.question-card--modal{width:calc(100vw - 1rem);max-height:calc(100vh - 1rem);padding:1rem}.question-modal-backdrop{padding:.5rem}}.topic-actions{z-index:1;flex-wrap:wrap;gap:.75rem;width:100%;margin-top:auto;display:flex;position:relative}.topic-actions .primary-button,.topic-actions .ghost-button{text-align:center;flex:calc(50% - .375rem);justify-content:center;min-height:56px}.reading-section{flex-direction:column;gap:1.5rem;display:flex}.reading-hero,.reading-card{background:#ffffffe6;border:1px solid #6c52371f;border-radius:28px;box-shadow:0 18px 40px #684f2e14}.reading-hero{background:radial-gradient(circle at top right, color-mix(in srgb, var(--topic-color) 24%, white), transparent 32%), linear-gradient(135deg, #fff9effa, #f5fafffa);padding:1.8rem}.reading-hero__badges,.reading-hero__actions{flex-wrap:wrap;gap:.75rem;display:flex}.reading-hero h1{margin:1rem 0 .8rem}.reading-pill{color:#1f6f66;letter-spacing:.04em;text-transform:uppercase;background:#2a9d8f24;border-radius:999px;width:fit-content;padding:.4rem .75rem;font-size:.85rem;font-weight:700;display:inline-flex}.reading-card{padding:1.6rem}.reading-state{border-radius:20px;padding:1.25rem}.reading-state--loading{background:#fff8eaf2}.reading-state--error{background:#fff1f1f5;border:1px solid #d6282824}.reading-article{flex-direction:column;gap:1rem;display:flex}.reading-block{background:#fffcf6f0;border:1px solid #6c523714;border-radius:20px;margin:0;padding:1rem 1.1rem;font-size:1.02rem;line-height:1.75}.reading-block b,.reading-block strong{font-weight:800}.reading-block.is-highlight{background:linear-gradient(135deg,#f28c281a,#2a9d8f14);border-color:#f28c282e;font-weight:600}.reading-block.is-arabic{color:#b42318;text-align:center;direction:rtl;unicode-bidi:plaintext;background:linear-gradient(135deg,#ffebebfa,#fff7f0fa);border-color:#b4231833;font-family:Noto Naskh Arabic,serif;font-size:1.45rem;font-weight:700;line-height:2}.reading-inline-arabic{color:#b42318;direction:rtl;unicode-bidi:isolate;font-size:1.58em;font-weight:700}@media (width<=900px){.topic-actions,.reading-hero__badges,.reading-hero__actions{flex-direction:column;align-items:stretch}.topic-actions .primary-button,.topic-actions .ghost-button{flex:none;min-height:52px;padding:.85rem 1rem}}