@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Amiri:wght@400;700&display=swap");:root{--primary-hue:200;--primary-sat:85%;--primary-light:50%;--primary-50:hsl(var(--primary-hue),var(--primary-sat),95%);--primary-100:hsl(var(--primary-hue),var(--primary-sat),85%);--primary-200:hsl(var(--primary-hue),var(--primary-sat),75%);--primary-300:hsl(var(--primary-hue),var(--primary-sat),65%);--primary-400:hsl(var(--primary-hue),var(--primary-sat),55%);--primary-500:hsl(var(--primary-hue),var(--primary-sat),var(--primary-light));--primary-600:hsl(var(--primary-hue),var(--primary-sat),45%);--primary-700:hsl(var(--primary-hue),var(--primary-sat),35%);--primary-800:hsl(var(--primary-hue),var(--primary-sat),25%);--primary-900:hsl(var(--primary-hue),var(--primary-sat),15%);--accent-hue:280;--accent-sat:75%;--accent-light:55%;--accent-400:hsl(var(--accent-hue),var(--accent-sat),65%);--accent-500:hsl(var(--accent-hue),var(--accent-sat),var(--accent-light));--accent-600:hsl(var(--accent-hue),var(--accent-sat),45%);--success:#1cca5b;--warning:#f59f0a;--error:#ef4343;--bg-primary:#0f131a;--bg-secondary:#171c27;--bg-tertiary:#1e2533;--bg-elevated:#262f40;--text-primary:#fafafa;--text-secondary:#bfbfbf;--text-tertiary:#8c8c8c;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--radius-sm:0.5rem;--radius-md:0.75rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;--shadow-sm:0 2px 8px rgba(0,0,0,.1);--shadow-md:0 4px 16px rgba(0,0,0,.15);--shadow-lg:0 8px 32px rgba(0,0,0,.2);--shadow-xl:0 16px 48px rgba(0,0,0,.25);--glass-bg:hsla(0,0%,100%,.05);--glass-border:hsla(0,0%,100%,.1);--glass-blur:blur(12px);--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:250ms cubic-bezier(0.4,0,0.2,1);--transition-slow:350ms cubic-bezier(0.4,0,0.2,1)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:IBM Plex Sans Arabic,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;min-height:100vh}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,var(--primary-900) 0,transparent 50%),radial-gradient(circle at 80% 70%,var(--accent-600) 0,transparent 50%),radial-gradient(circle at 50% 50%,var(--primary-800) 0,transparent 60%);opacity:.3;z-index:-1;animation:backgroundPulse 20s ease-in-out infinite}@keyframes backgroundPulse{0%,to{opacity:.3}50%{opacity:.5}}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.4;margin-bottom:var(--space-xl)}h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:var(--space-2xl)}.text-gradient{background:linear-gradient(135deg,var(--primary-300),var(--accent-400));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}h2{font-size:clamp(1.5rem,4vw,2.5rem);margin-bottom:var(--space-xl)}h3{font-size:clamp(1.25rem,3vw,1.75rem)}h3,p{margin-bottom:var(--space-lg)}p{line-height:1.9}.arabic-text{font-family:Amiri,serif;font-size:1.5rem;direction:rtl;text-align:right;line-height:2.4;margin-bottom:var(--space-lg)}.container{max-width:1200px;margin:0 auto;padding:0 var(--space-lg)}.glass-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-lg);transition:transform var(--transition-base),opacity var(--transition-base),box-shadow var(--transition-base)}.view-transition{transition:opacity .4s ease-out,transform .4s ease-out}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base);text-decoration:none;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:hsla(0,0%,100%,.2);transform:translate(-50%,-50%);transition:width var(--transition-slow),height var(--transition-slow)}.btn-primary{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;box-shadow:0 4px 16px rgba(0,123,255,.3)}.btn-secondary{background:linear-gradient(135deg,var(--accent-500),var(--accent-600));color:#fff;box-shadow:0 4px 16px rgba(168,85,247,.3)}.btn-outline{background:transparent;border:2px solid var(--primary-500);color:var(--primary-300)}.progress-bar{width:100%;height:8px;background:var(--bg-tertiary)}.progress-bar,.progress-fill{border-radius:var(--radius-full);overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-500),var(--accent-500));transition:width var(--transition-slow)}.progress-fill:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-lg)}.badge-beginner{background:linear-gradient(135deg,#1cca5b,#159d47);color:#fff}.badge-knowledgeable{background:linear-gradient(135deg,#f59f0a,#c47f08);color:#fff}.badge-advanced{background:linear-gradient(135deg,#ef4343,#eb1414);color:#fff}.quiz-option{background:var(--bg-secondary);border:2px solid var(--bg-elevated);border-radius:var(--radius-md);padding:var(--space-xl);margin-bottom:var(--space-lg);cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.quiz-option.selected{border-color:var(--primary-500);background:linear-gradient(135deg,var(--primary-900),var(--bg-tertiary));box-shadow:0 0 20px rgba(0,123,255,.2)}.quiz-option.correct{border-color:var(--success);background:linear-gradient(135deg,rgba(28,202,91,.2),var(--bg-tertiary))}.quiz-option.incorrect{border-color:var(--error);background:linear-gradient(135deg,rgba(239,67,67,.2),var(--bg-tertiary))}.pointer-events-none{pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.fade-in{animation:fadeIn var(--transition-slow) ease-out}.slide-in-right{animation:slideInRight var(--transition-slow) ease-out}.scale-in{animation:scaleIn var(--transition-base) ease-out}@keyframes spin{to{transform:rotate(1turn)}}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}}@media (max-width:768px){:root{--space-xl:1.25rem;--space-2xl:1.75rem;--space-3xl:2.25rem}body{font-size:15px}.container{padding:0 var(--space-md)}.glass-card{padding:var(--space-md)}h1{font-size:2.25rem}h2{font-size:1.75rem}h3{font-size:1.5rem}.arabic-text{font-size:1.15rem;line-height:2.2}.btn{width:100%;padding:var(--space-lg)}.logo-container h1{font-size:1.5rem}}.text-center{text-align:center}.list-none{list-style:none}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-6xl{font-size:3.75rem}.text-8xl{font-size:6rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.text-text-primary{color:var(--text-primary)}.text-text-secondary{color:var(--text-secondary)}.text-text-tertiary{color:var(--text-tertiary)}.text-primary-300{color:var(--primary-300)}.text-primary-400{color:var(--primary-400)}.text-accent-400{color:var(--accent-400)}.text-success{color:var(--success)}.text-error{color:var(--error)}.space-y-2>*+*{margin-top:var(--space-sm)}.space-y-3>*+*{margin-top:var(--space-md)}.space-y-4>*+*{margin-top:var(--space-lg)}.space-y-5>*+*{margin-top:var(--space-xl)}.space-y-6>*+*{margin-top:var(--space-2xl)}.w-full{width:100%}.w-12{width:3rem}.h-12{height:3rem}.min-h-screen{min-height:100vh}.h-full{height:100%}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex-1{flex:1 1}.flex-wrap{flex-wrap:wrap}.relative{position:relative}.absolute{position:absolute}.inset-0{top:0;right:0;bottom:0;left:0}.cursor-pointer{cursor:pointer}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.shadow-md{box-shadow:var(--shadow-md)}.text-right{text-align:right}.mt-1{margin-top:var(--space-xs)}.mt-2{margin-top:var(--space-sm)}.mt-3{margin-top:var(--space-md)}.mt-4{margin-top:var(--space-lg)}.mt-5{margin-top:var(--space-xl)}.mt-6{margin-top:var(--space-2xl)}.mb-1{margin-bottom:var(--space-xs)}.mb-2{margin-bottom:var(--space-sm)}.mb-3{margin-bottom:var(--space-md)}.mb-4{margin-bottom:var(--space-lg)}.mb-5{margin-bottom:var(--space-xl)}.mb-6{margin-bottom:var(--space-2xl)}.mb-8{margin-bottom:var(--space-3xl)}.mb-10{margin-bottom:5rem}.mb-12{margin-bottom:6rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-24{padding-top:6rem}.pt-32{padding-top:8rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-20{padding-top:5rem;padding-bottom:5rem}.mb-16{margin-bottom:8rem}.mt-8{margin-top:var(--space-3xl)}.mt-12{margin-top:6rem}.mt-16{margin-top:8rem}.mt-32{margin-top:16rem}.my-1{margin-top:var(--space-xs);margin-bottom:var(--space-xs)}.my-2{margin-top:var(--space-sm);margin-bottom:var(--space-sm)}.my-3{margin-top:var(--space-md);margin-bottom:var(--space-md)}.my-4{margin-top:var(--space-lg);margin-bottom:var(--space-lg)}.my-5{margin-top:var(--space-xl);margin-bottom:var(--space-xl)}.my-6{margin-top:var(--space-2xl);margin-bottom:var(--space-2xl)}.gap-1{gap:var(--space-xs)}.gap-2{gap:var(--space-sm)}.gap-3{gap:var(--space-md)}.gap-4{gap:var(--space-lg)}.gap-5{gap:var(--space-xl)}.gap-6{gap:var(--space-2xl)}.gap-7{gap:3.5rem}.gap-8{gap:4rem}.gap-9{gap:4.5rem}.gap-10{gap:5rem}.gap-11{gap:5.5rem}.gap-12{gap:6rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}@media (max-width:768px){.grid-cols-2,.grid-cols-3{grid-template-columns:1fr}}.tooltip-container{position:relative;display:block}.tooltip-text{visibility:hidden;width:200px;background-color:var(--bg-elevated);color:var(--text-primary);text-align:center;border-radius:var(--radius-md);padding:var(--space-sm);position:absolute;z-index:100;bottom:125%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity var(--transition-base);box-shadow:var(--shadow-lg);border:1px solid var(--glass-border);pointer-events:none;font-size:.875rem;font-weight:500}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1}.tooltip-text:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:var(--bg-elevated) transparent transparent transparent}.glass-card.disabled{opacity:.6;cursor:not-allowed!important;filter:grayscale(.5);background:hsla(0,0%,100%,.02)}.glass-card.disabled:hover{transform:none;box-shadow:var(--shadow-lg);border-color:var(--glass-border)}.glass-card.disabled .btn{pointer-events:none;background:var(--bg-tertiary)!important;color:var(--text-tertiary)!important;box-shadow:none!important}.selection-none{-moz-user-select:none;user-select:none;-webkit-user-select:none}