*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:Space Mono,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.top-0{top:0}.isolate{isolation:isolate}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-20{margin-bottom:5rem}.mb-28{margin-bottom:7rem}.mb-3{margin-bottom:.75rem}.mb-32{margin-bottom:8rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-28{height:7rem}.h-3{height:.75rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-full{height:100%}.max-h-32{max-height:8rem}.min-h-\[80vh\]{min-height:80vh}.min-h-\[90px\]{min-height:90px}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-28{width:7rem}.w-8{width:2rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1280px\]{max-width:1280px}.max-w-\[1440px\]{max-width:1440px}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.-rotate-90{--tw-rotate:-90deg}.-rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-cyan-400\/30{border-color:rgba(34,211,238,.3)}.border-cyan-400\/50{border-color:rgba(34,211,238,.5)}.border-cyan-500\/25{border-color:rgba(6,182,212,.25)}.border-pink-400\/30{border-color:rgba(244,114,182,.3)}.border-pink-500\/25{border-color:rgba(236,72,153,.25)}.border-purple-400{--tw-border-opacity:1;border-color:rgb(192 132 252/var(--tw-border-opacity,1))}.border-purple-400\/30{border-color:rgba(192,132,252,.3)}.border-purple-400\/40{border-color:rgba(192,132,252,.4)}.border-purple-400\/50{border-color:rgba(192,132,252,.5)}.border-purple-500\/20{border-color:rgba(168,85,247,.2)}.border-purple-500\/25{border-color:rgba(168,85,247,.25)}.border-purple-500\/30{border-color:rgba(168,85,247,.3)}.border-purple-600{--tw-border-opacity:1;border-color:rgb(147 51 234/var(--tw-border-opacity,1))}.border-red-500\/30{border-color:rgba(239,68,68,.3)}.border-sky-400\/30{border-color:rgba(56,189,248,.3)}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/5{border-color:hsla(0,0%,100%,.05)}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-black\/75{background-color:rgba(0,0,0,.75)}.bg-cyan-400{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity,1))}.bg-cyan-500\/15{background-color:rgba(6,182,212,.15)}.bg-cyan-500\/20{background-color:rgba(6,182,212,.2)}.bg-cyan-950\/60{background-color:rgba(8,51,68,.6)}.bg-emerald-400{--tw-bg-opacity:1;background-color:rgb(52 211 153/var(--tw-bg-opacity,1))}.bg-gray-950{--tw-bg-opacity:1;background-color:rgb(3 7 18/var(--tw-bg-opacity,1))}.bg-gray-950\/95{background-color:rgba(3,7,18,.95)}.bg-indigo-400{--tw-bg-opacity:1;background-color:rgb(129 140 248/var(--tw-bg-opacity,1))}.bg-pink-400{--tw-bg-opacity:1;background-color:rgb(244 114 182/var(--tw-bg-opacity,1))}.bg-pink-500\/15{background-color:rgba(236,72,153,.15)}.bg-pink-500\/20{background-color:rgba(236,72,153,.2)}.bg-pink-950\/60{background-color:rgba(80,7,36,.6)}.bg-purple-400{--tw-bg-opacity:1;background-color:rgb(192 132 252/var(--tw-bg-opacity,1))}.bg-purple-500\/15{background-color:rgba(168,85,247,.15)}.bg-purple-500\/20{background-color:rgba(168,85,247,.2)}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity,1))}.bg-purple-900\/40{background-color:rgba(88,28,135,.4)}.bg-purple-950\/30{background-color:rgba(59,7,100,.3)}.bg-purple-950\/40{background-color:rgba(59,7,100,.4)}.bg-purple-950\/50{background-color:rgba(59,7,100,.5)}.bg-purple-950\/60{background-color:rgba(59,7,100,.6)}.bg-purple-950\/80{background-color:rgba(59,7,100,.8)}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-950\/20{background-color:rgba(69,10,10,.2)}.bg-sky-500\/15{background-color:rgba(14,165,233,.15)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#180833\]\/90{--tw-gradient-from:rgba(24,8,51,.9) var(--tw-gradient-from-position);--tw-gradient-to:rgba(24,8,51,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-300{--tw-gradient-from:#67e8f9 var(--tw-gradient-from-position);--tw-gradient-to:rgba(103,232,249,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-fuchsia-300{--tw-gradient-from:#f0abfc var(--tw-gradient-from-position);--tw-gradient-to:rgba(240,171,252,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-300{--tw-gradient-from:#d8b4fe var(--tw-gradient-from-position);--tw-gradient-to:rgba(216,180,254,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-600\/30{--tw-gradient-from:rgba(147,51,234,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(147,51,234,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-\[\#0c021c\]\/95{--tw-gradient-to:rgba(12,2,28,.95) var(--tw-gradient-to-position)}.to-blue-400{--tw-gradient-to:#60a5fa var(--tw-gradient-to-position)}.to-cyan-500\/20{--tw-gradient-to:rgba(6,182,212,.2) var(--tw-gradient-to-position)}.to-pink-400{--tw-gradient-to:#f472b6 var(--tw-gradient-to-position)}.to-purple-400{--tw-gradient-to:#c084fc var(--tw-gradient-to-position)}.to-teal-300{--tw-gradient-to:#5eead4 var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-1{padding:.25rem}.p-2\.5{padding:.625rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-0\.5{padding-bottom:.125rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-28{padding-top:7rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:Space Mono,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[26px\]{font-size:26px}.text-\[44px\]{font-size:44px}.text-\[48px\]{font-size:48px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.tracking-widest{letter-spacing:.1em}.text-\[\#47d6ff\]{--tw-text-opacity:1;color:rgb(71 214 255/var(--tw-text-opacity,1))}.text-\[\#a5e7ff\]{--tw-text-opacity:1;color:rgb(165 231 255/var(--tw-text-opacity,1))}.text-\[\#bbc9cf\]{--tw-text-opacity:1;color:rgb(187 201 207/var(--tw-text-opacity,1))}.text-\[\#e0b6ff\]{--tw-text-opacity:1;color:rgb(224 182 255/var(--tw-text-opacity,1))}.text-\[\#f1d2ff\]{--tw-text-opacity:1;color:rgb(241 210 255/var(--tw-text-opacity,1))}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-amber-300\/80{color:rgba(252,211,77,.8)}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-cyan-300{--tw-text-opacity:1;color:rgb(103 232 249/var(--tw-text-opacity,1))}.text-cyan-300\/60{color:rgba(103,232,249,.6)}.text-cyan-400{--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity,1))}.text-emerald-300{--tw-text-opacity:1;color:rgb(110 231 183/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-pink-300{--tw-text-opacity:1;color:rgb(249 168 212/var(--tw-text-opacity,1))}.text-pink-300\/60{color:rgba(249,168,212,.6)}.text-purple-200{--tw-text-opacity:1;color:rgb(233 213 255/var(--tw-text-opacity,1))}.text-purple-200\/60{color:rgba(233,213,255,.6)}.text-purple-200\/70{color:rgba(233,213,255,.7)}.text-purple-200\/80{color:rgba(233,213,255,.8)}.text-purple-300{--tw-text-opacity:1;color:rgb(216 180 254/var(--tw-text-opacity,1))}.text-purple-300\/40{color:rgba(216,180,254,.4)}.text-purple-300\/50{color:rgba(216,180,254,.5)}.text-purple-300\/60{color:rgba(216,180,254,.6)}.text-purple-300\/70{color:rgba(216,180,254,.7)}.text-purple-400{--tw-text-opacity:1;color:rgb(192 132 252/var(--tw-text-opacity,1))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-sky-300{--tw-text-opacity:1;color:rgb(125 211 252/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/10{color:hsla(0,0%,100%,.1)}.line-through{text-decoration-line:line-through}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_15px_rgba\(168\2c 85\2c 247\2c 0\.2\)\]{--tw-shadow:0 0 15px rgba(168,85,247,.2);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_15px_rgba\(168\2c 85\2c 247\2c 0\.25\)\]{--tw-shadow:0 0 15px rgba(168,85,247,.25);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_15px_rgba\(56\2c 189\2c 248\2c 0\.2\)\]{--tw-shadow:0 0 15px rgba(56,189,248,.2);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(168\2c 85\2c 247\2c 0\.4\)\]{--tw-shadow:0 0 20px rgba(168,85,247,.4);--tw-shadow-colored:0 0 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_25px_rgba\(168\2c 85\2c 247\2c 0\.35\)\]{--tw-shadow:0 0 25px rgba(168,85,247,.35);--tw-shadow-colored:0 0 25px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_25px_rgba\(168\2c 85\2c 247\2c 0\.4\)\]{--tw-shadow:0 0 25px rgba(168,85,247,.4);--tw-shadow-colored:0 0 25px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_25px_rgba\(71\2c 214\2c 255\2c 0\.4\)\]{--tw-shadow:0 0 25px rgba(71,214,255,.4);--tw-shadow-colored:0 0 25px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_15px_35px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-shadow:0 15px 35px rgba(0,0,0,.5);--tw-shadow-colored:0 15px 35px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_4px_30px_rgba\(0\2c 0\2c 0\2c 0\.6\)\]{--tw-shadow:0 4px 30px rgba(0,0,0,.6);--tw-shadow-colored:0 4px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.\!ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.grayscale{--tw-grayscale:grayscale(100%)}.filter,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-2xl{--tw-backdrop-blur:blur(40px)}.backdrop-blur-2xl,.backdrop-blur-md{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.backdrop-blur-xl,.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.delay-100{transition-delay:.1s}.delay-150{transition-delay:.15s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.delay-500{transition-delay:.5s}.delay-700{transition-delay:.7s}.delay-75{transition-delay:75ms}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-\[1\.02\]:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02}.hover\:border-purple-300:hover{--tw-border-opacity:1;border-color:rgb(216 180 254/var(--tw-border-opacity,1))}.hover\:border-purple-400:hover{--tw-border-opacity:1;border-color:rgb(192 132 252/var(--tw-border-opacity,1))}.hover\:border-purple-400\/60:hover{border-color:rgba(192,132,252,.6)}.hover\:border-purple-500\/30:hover{border-color:rgba(168,85,247,.3)}.hover\:border-red-400\/50:hover{border-color:hsla(0,91%,71%,.5)}.hover\:bg-purple-500:hover{--tw-bg-opacity:1;background-color:rgb(168 85 247/var(--tw-bg-opacity,1))}.hover\:bg-purple-900\/30:hover{background-color:rgba(88,28,135,.3)}.hover\:bg-purple-900\/50:hover{background-color:rgba(88,28,135,.5)}.hover\:bg-red-900\/40:hover{background-color:rgba(127,29,29,.4)}.hover\:text-cyan-300:hover{--tw-text-opacity:1;color:rgb(103 232 249/var(--tw-text-opacity,1))}.hover\:text-purple-200:hover{--tw-text-opacity:1;color:rgb(233 213 255/var(--tw-text-opacity,1))}.hover\:text-purple-300:hover{--tw-text-opacity:1;color:rgb(216 180 254/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:inline-flex{display:inline-flex}.sm\:h-20{height:5rem}.sm\:w-20{width:5rem}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:mx-0{margin-left:0;margin-right:0}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:justify-start{justify-content:flex-start}.md\:px-20{padding-left:5rem;padding-right:5rem}.md\:text-right{text-align:right}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-\[38px\]{font-size:38px}.md\:text-\[72px\]{font-size:72px}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

body{color:#e2e2e2;overflow-x:hidden;font-family:'Geist', sans-serif;}
body.in-platform{font-family:'Tajawal', 'Cairo', 'Segoe UI Arabic', sans-serif;}
[dir="rtl"] body, [dir="rtl"]{font-family:'Tajawal', 'Cairo', sans-serif;}
.orb{position:fixed;filter:blur(140px);z-index:0;border-radius:50%;pointer-events:none;opacity:0.3;}
.orb-1{width:800px;height:800px;background:radial-gradient(circle,#6d11ad,transparent 70%);top:10%;right:-200px;}
.orb-2{width:900px;height:900px;background:radial-gradient(circle,#30004b,transparent 70%);bottom:5%;left:-300px;}
.orb-3{width:600px;height:600px;background:radial-gradient(circle,#47d6ff,transparent 70%);top:50%;left:20%;opacity:0.15;}
.glass-panel{background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);transition:all 0.4s cubic-bezier(0.23,1,0.32,1);}
.glass-panel:hover{border-color:#47d6ff;transform:translateY(-4px);box-shadow:0 0 30px rgba(157,78,221,0.3);}
.neon-text{text-shadow:0 0 10px rgba(71,214,255,0.5);}
.view-landing{display:block;}
.view-platform{display:none;padding-top:110px !important;}
body.in-platform .view-platform{padding-top:110px !important;}
body.in-platform .view-landing{display:none !important;}
body.in-platform .view-platform{display:block;}
body.in-platform nav{display:none;}
body.in-platform .orb{opacity:0.15;}:root{--se-header-h:72px;--brand-900:#1e0a3c;--brand-800:#2d1158;--brand-700:#3d1a72;--brand-600:#5b2fa0;--brand-500:#7c4dcc;--brand-400:#a87de0;--brand-300:#c9a8f0;--brand-100:rgba(167,139,250,0.08);--brand-50:rgba(167,139,250,0.04);--bg-primary:#05000a;--bg-secondary:#0d0217;--bg-card:#0a0212;--bg-lesson:#0f041f;--bg-elevated:#140529;--text-primary:#ffffff;--text-secondary:#d1d5db;--text-muted:#9ca3af;--text-arabic:#e5e7eb;--text-en:#c9a8f0;--accent-teal:#a78bfa;--accent-rose:#d94f4f;--border:rgba(167,139,250,0.15);--border-light:rgba(167,139,250,0.08);--shadow-sm:0 1px 4px rgba(0,0,0,0.3);--shadow-md:0 4px 20px rgba(0,0,0,0.4);--shadow-lg:0 8px 40px rgba(0,0,0,0.5);--shadow-xl:0 16px 60px rgba(0,0,0,0.6);--glow-brand:0 0 0 3px rgba(167,139,250,0.25);--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--tts-hover-bg:rgba(167,139,250,0.1);--tts-hover-border:#a78bfa;--quiz-correct-border:#a78bfa;--quiz-selected:rgba(167,139,250,0.1);--quiz-selected-border:#a78bfa;}
@media(max-width:640px){:root{--se-header-h:64px;}}
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;}
/* Global instant-tap treatment for every interactive element — previously
   only applied piecemeal to specific buttons throughout this file.
   touch-action:manipulation tells the browser to skip the double-tap-to-
   zoom gesture detection delay on this element specifically (a real,
   still-relevant win independent of the 300ms click delay, which modern
   mobile browsers already remove on their own once <meta name="viewport"
   content="width=device-width...> is present, as it already is here).
   -webkit-tap-highlight-color:transparent here too as a defensive belt-
   and-suspenders layer, even though html{} already sets it and normally
   inherits — some mobile WebKit builds have historically been
   inconsistent about inheriting this specific property reliably. */
button,a,.btn,[role="button"],.card-action{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
body{font-family:'Tajawal', 'Cairo', 'Segoe UI Arabic', sans-serif;color:var(--text-primary);transition:background 0.4s ease, color 0.4s ease;line-height:1.9;overflow-x:hidden;font-size:15px;overflow-wrap:break-word;word-break:break-word;-webkit-text-size-adjust:100%;}
a, button, .quiz-option, .tts, .rm-zone-header, .lesson-header,
.rm-gate-btn, .land-cta, .alpha-tile, .verb-card{touch-action:manipulation;}
/* ===== CRASH FIX: removed a blanket will-change:transform + translateZ(0)
   rule that used to force 488 separate elements (369 of them just tiny
   inline .tts pronunciation spans repeated across all 36 lessons) into
   488 PERMANENT, individual GPU compositor layers for the entire life of
   the page — not just during an animation. Each layer reserves its own
   GPU texture memory. Desktop GPUs absorb this fine; mobile GPUs (shared,
   far more limited memory) run out of graphics memory and crash the
   whole renderer — this is the actual "يتعذر فتح هذه الصفحة" cause, not a
   JS loop. All the existing hover/transition effects on these elements
   keep working exactly as before; they never needed this hint. */
.rm-zone{contain:layout style;}::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--brand-600), var(--brand-400));border-radius:10px;}::-webkit-scrollbar-thumb:hover{background:var(--brand-500);}
*{scrollbar-width:thin;scrollbar-color:var(--brand-500) transparent;}
#progress-bar{position:fixed;top:0;right:0;left:0;height:3px;background:linear-gradient(90deg, var(--brand-600), var(--accent-teal), var(--brand-300));background-size:200% 100%;animation:shimmer-bar 3s linear infinite;transform-origin:left;transform:scaleX(0);z-index:9999;transition:transform 0.1s linear;}
@keyframes shimmer-bar{0%{background-position:0% 50%;}
100%{background-position:200% 50%;}
}
.site-header{position:sticky;top:0;z-index:900;background:linear-gradient(135deg, var(--brand-900) 0%, var(--brand-800) 100%);color:#fff;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 20px rgba(30,10,60,0.45);gap:12px;border-bottom:1px solid rgba(255,255,255,0.07);}
.site-header .brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.site-header .brand-logo{width:38px;height:38px;background:linear-gradient(135deg, var(--brand-500), var(--accent-teal));border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk', sans-serif;font-weight:700;font-size:15px;color:#fff;flex-shrink:0;box-shadow:0 2px 10px rgba(124,77,204,0.5);}
.site-header .brand-name{font-family:'Space Grotesk', sans-serif;font-weight:700;font-size:16px;color:#fff;white-space:nowrap;}
.site-header .brand-name span{color:var(--brand-300);}
.header-actions{display:flex;align-items:center;gap:8px;}
.btn-icon{background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.18);color:#fff;border-radius:10px;padding:8px 14px;cursor:pointer;font-size:13px;font-family:'Tajawal', sans-serif;font-weight:600;display:flex;align-items:center;gap:6px;transition:background 0.2s, transform 0.18s;white-space:nowrap;backdrop-filter:blur(6px);}
.btn-icon:hover{background:rgba(167,139,250,0.15);transform:translateY(-1px);}
.btn-print{background:linear-gradient(135deg, var(--brand-600), var(--accent-teal));border:none;box-shadow:0 2px 12px rgba(124,77,204,0.4);}
.btn-print:hover{opacity:0.9;}
.main-container{background:transparent;max-width:1080px;margin:0 auto;padding:32px 24px 80px;}
.cover-card{background:linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 55%, #1a5f8a 100%);color:#fff;border-radius:var(--radius-xl);padding:60px 40px;text-align:center;margin-bottom:32px;position:relative;overflow:hidden;box-shadow:var(--shadow-xl);}
.cover-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 80%, rgba(124,77,204,0.25) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(13,158,143,0.20) 0%, transparent 50%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;}
.cover-card .cover-badge{display:inline-block;background:rgba(255,255,255,0.12);border:1px solid rgba(167,139,250,0.2);border-radius:999px;padding:5px 18px;font-size:12px;font-weight:700;margin-bottom:20px;letter-spacing:1px;backdrop-filter:blur(4px);}
.cover-card h1{font-family:'Space Grotesk', sans-serif;font-size:clamp(28px, 5vw, 48px);font-weight:700;margin-bottom:10px;line-height:1.15;position:relative;}
.cover-card h1 em{font-style:italic;color:var(--brand-300);font-family:'Lora', serif;}
.cover-card .cover-sub{font-family:'Tajawal', sans-serif;font-size:clamp(15px, 2.5vw, 18px);font-weight:400;opacity:0.88;margin-bottom:32px;position:relative;}
.cover-stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;position:relative;}
.cover-stat{background:rgba(167,139,250,0.06);border:1px solid rgba(167,139,250,0.12);border-radius:var(--radius-md);padding:16px 24px;min-width:100px;backdrop-filter:blur(6px);transition:transform 0.2s, background 0.2s;}
.cover-stat:hover{transform:translateY(-3px);background:rgba(167,139,250,0.12);}
.cover-stat .num{font-family:'Space Grotesk', sans-serif;font-size:30px;font-weight:700;display:block;}
.cover-stat .label{font-size:12px;opacity:0.8;}
.welcome-card{background:#111827;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px;border:1px solid rgba(167,139,250,0.15);padding-top:32px;padding-bottom:24px;padding-left:24px;padding-right:24px;margin:0 auto 14px;max-width:1024px;width:100%;box-shadow:0 0 20px rgba(167,139,250,0.06);transition:all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.welcome-card:hover{border-color:rgba(167,139,250,0.3);transform:translateY(-4px);box-shadow:0 0 30px rgba(167,139,250,0.15);}
.welcome-card .wc-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.welcome-card .wc-icon{width:26px;height:26px;background:rgba(167,139,250,0.1);border:1px solid rgba(167,139,250,0.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.welcome-card .wc-title{font-family:'Tajawal', sans-serif;font-size:16px;font-weight:700;color:#e0b6ff;}
.welcome-card .wc-sub{font-size:13px;color:rgba(255,255,255,0.5);}
.welcome-steps{display:grid;grid-template-columns:repeat(2, 1fr);gap:8px;}
.welcome-step{background:#1a1a2e;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:10px;padding:10px 12px;border:1px solid rgba(167,139,250,0.12);display:flex;gap:8px;align-items:center;transition:all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.welcome-step:hover{border-color:rgba(167,139,250,0.3);background:#1f1f35;transform:translateY(-2px);box-shadow:0 0 20px rgba(167,139,250,0.1);}
.step-num{width:24px;height:24px;background:rgba(157,78,221,0.15);border:1px solid rgba(157,78,221,0.3);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk', sans-serif;font-weight:700;font-size:11px;flex-shrink:0;}
.step-text{font-size:12px;line-height:1.4;color:#d1d5db;}
.step-text strong{color:var(--text-primary);display:block;margin-bottom:2px;}
.lesson-card{background:rgba(15, 4, 31, 0.6);backdrop-filter:blur(16px);border-radius:var(--radius-xl);border:1px solid var(--border-light);box-shadow:var(--shadow-sm);margin-bottom:32px;overflow:hidden;transition:box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;position:relative;}
.lesson-card::before{content:'';position:absolute;top:0;right:0;width:4px;height:100%;background:linear-gradient(180deg, var(--brand-600), var(--brand-300), transparent);border-radius:0 var(--radius-xl) var(--radius-xl) 0;opacity:0;transition:opacity 0.3s ease;}
.lesson-card:hover{box-shadow:var(--shadow-lg), 0 0 0 1px var(--border);transform:translateY(-2px);border-color:var(--brand-300);}
.lesson-card:hover::before{opacity:1;}
.lesson-header{padding:28px 32px 24px;border-bottom:1px solid var(--border-light);background:linear-gradient(135deg, #1a1a2e 0%, #151525 100%);}
.lesson-number-badge{display:inline-flex;align-items:center;background:linear-gradient(135deg, var(--brand-700), var(--brand-500));color:#fff;font-family:'Space Grotesk', sans-serif;font-weight:700;font-size:11px;letter-spacing:1.5px;padding:5px 14px;border-radius:999px;margin-bottom:12px;box-shadow:0 2px 8px rgba(91,47,160,0.3);}
.lesson-level-badge{display:inline-flex;align-items:center;font-family:'Space Grotesk', sans-serif;font-weight:800;font-size:10px;letter-spacing:1px;padding:5px 12px;border-radius:999px;margin-bottom:12px;margin-right:8px;border:1.5px solid;}
.lesson-level-badge.lesson-level-a1{background:rgba(34,197,94,0.12);color:#4ade80;border-color:rgba(34,197,94,0.4);}
.lesson-level-badge.lesson-level-a2{background:rgba(168,85,247,0.14);color:#c084fc;border-color:rgba(168,85,247,0.45);}
.lesson-title-en{font-family:'Space Grotesk', sans-serif;font-size:12px;font-weight:500;color:rgba(167,139,250,0.5);margin-bottom:2px;direction:ltr;text-align:center;}
.lesson-title-ar{font-family:'Tajawal', sans-serif;font-size:16px;font-weight:700;color:#ffffff;margin-bottom:8px;direction:rtl;text-align:center;line-height:1.6;}
.lesson-goal{background:var(--brand-50);border-right:4px solid var(--brand-500);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:12px 16px;font-size:14px;color:var(--text-secondary);display:flex;gap:10px;align-items:flex-start;}
.lesson-goal::before{content:'🎯';flex-shrink:0;}
.lesson-body{padding:28px 32px;}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:24px;border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:var(--shadow-sm);scrollbar-width:thin;}
table{width:100%;border-collapse:collapse;min-width:280px;}
thead{background:linear-gradient(135deg, var(--brand-800), var(--brand-600));}
thead th{color:#fff;font-family:'Space Grotesk', sans-serif;font-size:12px;font-weight:600;letter-spacing:0.5px;padding:13px 16px;text-align:right;white-space:nowrap;}
thead th:first-child,
thead th.th-en{text-align:left;direction:ltr;}
tbody tr{border-bottom:1px solid var(--border-light);}
tbody tr:last-child{border-bottom:none;}
tbody tr:nth-child(even){background:var(--bg-lesson);}
tbody tr:hover{background:rgba(167,139,250,0.06);transition:background 0.15s;}
tbody td{padding:13px 16px;font-size:14px;vertical-align:middle;color:var(--text-secondary);}
.en-cell{font-family:'Space Grotesk', sans-serif;font-size:16px;font-weight:600;color:var(--brand-600);direction:ltr;text-align:left;unicode-bidi:embed;}
.ar-cell{font-family:'Tajawal', sans-serif;font-size:14px;color:var(--text-arabic);direction:rtl;text-align:right;}
.pronun-cell{font-family:'Tajawal', sans-serif;font-size:13px;color:var(--text-muted);direction:rtl;text-align:right;}
.vocab-table{direction:ltr !important;width:100%;}
.vocab-table th,
.vocab-table td{text-align:left !important;direction:ltr !important;}
.vocab-table td.ar-cell,
.vocab-table td.pronun-cell,
.vocab-table td:nth-child(2):not(.en-cell),
.vocab-table td:nth-child(4):not(.en-cell),
.vocab-table td:last-child:not(.en-cell){direction:rtl !important;text-align:right !important;unicode-bidi:embed;}
.col-en,
.en-inline{direction:ltr !important;text-align:left !important;display:inline-block;unicode-bidi:embed;}
.vocab-table td.en-cell{direction:ltr !important;text-align:left !important;unicode-bidi:embed;}
.vocab-table thead th:first-child,
.vocab-table thead th.th-en{text-align:left !important;direction:ltr !important;}
.vocab-table thead th.th-ar{text-align:right !important;direction:rtl !important;}
.tts{cursor:pointer;border-radius:6px;padding:2px 5px;transition:background 0.18s, border-color 0.18s, box-shadow 0.2s,
color 0.18s, transform 0.18s;border:1px solid transparent;display:inline;direction:ltr;unicode-bidi:embed;}
.tts:hover{background:var(--tts-hover-bg);border-color:var(--tts-hover-border);box-shadow:var(--glow-brand);color:var(--brand-600);transform:translateY(-2px);}
.tts:hover::after{content:'';width:14px;height:14px;vertical-align:middle;margin-left:4px;display:inline-block;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");}
.tts-block{cursor:pointer;border-radius:var(--radius-sm);padding:10px 14px;transition:background 0.18s, border-color 0.18s, box-shadow 0.2s, transform 0.18s;border:1px solid transparent;}
.tts-block:hover{background:var(--tts-hover-bg);border-color:var(--tts-hover-border);box-shadow:var(--glow-brand);transform:translateY(-2px);}
.alert{border-radius:var(--radius-md);padding:14px 18px;margin:20px 0;display:flex;gap:12px;align-items:flex-start;font-size:14px;}
.alert-warning{background:#111827;border:1px solid #fcd34d;border-right:4px solid #d97706;}
.alert-warning .icon{color:#d97706;}
.alert-info{background:var(--brand-50);border:1px solid var(--brand-300);border-right:4px solid var(--brand-500);}
.alert-info .icon{color:var(--brand-600);}
.alert-text{font-size:14.5px;line-height:1.9;font-family:'Tajawal', sans-serif;color:var(--text-secondary);line-height:1.7;}
.alert-text strong{display:block;margin-bottom:4px;color:var(--text-primary);font-size:15px;}
.quiz-retry{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 16px;border-radius:12px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);font-family:'Tajawal', sans-serif;font-size:13px;font-weight:600;color:#f59e0b;direction:rtl;animation:retryPulse 2s ease-in-out infinite;}
@keyframes retryPulse{0%,100%{opacity:0.8;}
50%{opacity:1;}
}
.se-section-divider{display:flex;align-items:center;gap:12px;margin:28px 0 20px;direction:rtl;}
.se-section-divider::before,
.se-section-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(183,148,244,0.25), transparent);}
.se-section-divider span{font-family:'Tajawal', sans-serif;font-size:12px;font-weight:700;color:rgba(183,148,244,0.6);white-space:nowrap;letter-spacing:0.5px;}
.quiz-block{background:linear-gradient(135deg, rgba(167,139,250,0.06) 0%, #1a1a2e 100%);border-radius:var(--radius-lg);border:1px solid var(--border);padding:26px;margin-top:28px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.quiz-block::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle, rgba(124,77,204,0.08) 0%, transparent 70%);pointer-events:none;}
.quiz-label{font-family:'Space Grotesk', sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--brand-500);text-transform:uppercase;margin-bottom:10px;direction:ltr;}
.quiz-q{font-family:'Tajawal', sans-serif;font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:18px;line-height:1.65;}
.quiz-options{display:flex;flex-direction:column;gap:10px;}
.quiz-option{background:rgba(255,255,255,0.04);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:13px 18px;cursor:pointer;font-family:'Space Grotesk', sans-serif;font-size:14px;color:var(--text-primary);direction:ltr;text-align:left;transition:all 0.22s ease;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.quiz-option:hover:not(.opt-locked){border-color:var(--brand-400);background:var(--tts-hover-bg);box-shadow:var(--glow-brand);transform:translateX(-3px);}
.quiz-option.opt-correct{background:rgba(167,139,250,0.06) !important;border-color:#1F8A57 !important;color:#145c38 !important;font-weight:700;cursor:default;}
.quiz-option.opt-wrong{background:rgba(245,158,11,0.06) !important;border-color:#c4960a !important;color:#7a5d00 !important;font-weight:700;cursor:default;}
.quiz-option.opt-locked{cursor:default;pointer-events:none;}
.quiz-option .opt-badge{font-size:15px;flex-shrink:0;transition:opacity 0.2s;}
.quiz-answer{display:none;background:rgba(167,139,250,0.08);border:1px solid rgba(167,139,250,0.2);border-right:4px solid #a78bfa;border-radius:var(--radius-md);padding:16px 18px;margin-top:14px;font-family:'Tajawal', sans-serif;font-size:14px;color:var(--text-primary);line-height:1.8;animation:fadeIn 0.3s ease;}
.quiz-answer.show{display:block;}
.quiz-answer strong{color:#1F8A57;font-size:15px;display:block;margin-bottom:6px;}
.quiz-answer.qa-wrong{background:rgba(196,150,10,0.08);border-color:rgba(196,150,10,0.3);border-right-color:#c4960a;}
.quiz-answer.qa-wrong strong{color:#8a6d00;}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px);}
to{opacity:1;transform:translateY(0);}
}
.scoreboard-card{background:#1a1a2e;border-radius:var(--radius-xl);border:2px solid var(--brand-300);padding:44px 32px;margin-top:32px;text-align:center;box-shadow:var(--shadow-xl);animation:fadeIn 0.5s ease;position:relative;overflow:hidden;}
.scoreboard-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%, rgba(124,77,204,0.07) 0%, transparent 60%);pointer-events:none;}
.scoreboard-card.hidden{display:none;}
.score-donut-wrap{display:flex;justify-content:center;margin-bottom:24px;}
.score-donut{width:148px;height:148px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Space Grotesk', sans-serif;border:8px solid var(--border-light);position:relative;box-shadow:var(--shadow-md);}
.score-donut .donut-num{font-size:40px;font-weight:700;line-height:1;}
.score-donut .donut-total{font-size:14px;color:var(--text-muted);}
.score-grade{font-family:'Space Grotesk', sans-serif;font-size:28px;font-weight:700;margin-bottom:8px;}
.score-message{font-family:'Tajawal', sans-serif;font-size:18px;color:var(--text-secondary);margin-bottom:28px;line-height:1.7;}
.score-bars{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:28px;}
.score-bar-item{display:flex;flex-direction:column;align-items:center;gap:6px;}
.score-bar-item .bar-label{font-family:'Tajawal', sans-serif;font-size:11px;color:var(--text-muted);}
.score-bar-item .bar-track{width:12px;height:60px;background:var(--border-light);border-radius:6px;overflow:hidden;display:flex;align-items:flex-end;}
.score-bar-item .bar-fill{width:100%;border-radius:6px;transition:height 1s ease;}
.btn-retry{background:linear-gradient(135deg, var(--brand-700), var(--brand-500));color:#fff;border:none;border-radius:var(--radius-md);padding:14px 36px;font-family:'Tajawal', sans-serif;font-size:16px;font-weight:700;cursor:pointer;transition:opacity 0.2s, transform 0.2s;box-shadow:0 4px 16px rgba(91,47,160,0.35);}
.btn-retry:hover{opacity:0.88;transform:translateY(-2px);}
.btn-show-score{display:block;margin:28px auto 0;background:linear-gradient(135deg, #6d11ad, #9d4edd);color:#fff;border:none;border-radius:var(--radius-lg);padding:16px 48px;font-family:'Tajawal', sans-serif;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 4px 20px rgba(109,17,173,0.35);transition:all 0.22s;letter-spacing:0.3px;}
.btn-show-score:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(31,138,87,0.45);}
.btn-show-score:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
.alpha-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(90px, 28vw), 1fr));gap:10px;margin-bottom:24px;direction:ltr;}
.alpha-tile{background:rgba(167,139,250,0.05);border:1.5px solid var(--border-light);border-radius:var(--radius-md);padding:14px 8px;text-align:center;cursor:pointer;transition:all 0.22s ease;direction:ltr;}
.alpha-tile:hover{border-color:var(--brand-400);background:var(--tts-hover-bg);transform:translateY(-4px);box-shadow:var(--shadow-md), var(--glow-brand);}
.alpha-tile .letter-big{font-family:'Space Grotesk', sans-serif;font-size:26px;font-weight:700;color:var(--brand-600);direction:ltr;display:block;}
.alpha-tile .letter-small{font-family:'Space Grotesk', sans-serif;font-size:18px;color:var(--brand-400);direction:ltr;display:block;}
.alpha-tile .letter-name{font-family:'Tajawal', sans-serif;font-size:11px;color:var(--text-muted);margin-top:4px;}
.alpha-tile .letter-word{font-family:'Space Grotesk', sans-serif;font-size:10px;color:var(--accent-teal);margin-top:2px;direction:ltr;}
.section-title{font-family:'Tajawal', sans-serif;font-size:17px;font-weight:800;color:var(--brand-700);margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--border-light);display:flex;gap:8px;align-items:center;position:relative;}
.section-title::after{content:'';position:absolute;bottom:-2px;right:0;width:48px;height:2px;background:linear-gradient(90deg, var(--brand-600), transparent);border-radius:2px;}
.story-card{background:#1a1a2e;border-radius:var(--radius-xl);border:1px solid var(--border-light);box-shadow:var(--shadow-md);margin-bottom:32px;overflow:hidden;transition:box-shadow 0.3s, transform 0.3s;}
.story-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.story-header{background:linear-gradient(135deg, #064e3b, #065f46, #0d8a6f);padding:28px 32px;color:#fff;}
.story-header h2{font-family:'Lora', serif;font-size:clamp(20px, 3vw, 26px);margin-bottom:6px;}
.story-header .sub{font-size:14px;opacity:0.8;font-family:'Tajawal', sans-serif;}
.story-body{padding:32px;}
.story-en{background:var(--bg-lesson);border-radius:var(--radius-md);padding:24px;margin-bottom:24px;border:1px solid var(--border-light);}
.story-en p{font-family:'Lora', serif;font-size:16px;line-height:2;color:var(--text-primary);direction:ltr;text-align:left;margin-bottom:12px;}
.story-en p:last-child{margin-bottom:0;}
.story-ar{background:var(--bg-lesson);border-radius:var(--radius-md);padding:24px;border:1px solid var(--border-light);}
.story-ar p{font-family:'Tajawal', sans-serif;font-size:16px;line-height:2;color:var(--text-arabic);margin-bottom:10px;}
.story-ar p:last-child{margin-bottom:0;}
.story-lang-label{font-size:11px;letter-spacing:1.5px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.story-lang-label::before{content:'';width:24px;height:2px;background:var(--brand-500);border-radius:2px;}
.exam-card{background:#1a1a2e;border-radius:var(--radius-xl);border:1px solid var(--border-light);box-shadow:var(--shadow-md);margin-bottom:32px;overflow:hidden;transition:box-shadow 0.3s;}
.exam-card:hover{box-shadow:var(--shadow-lg);}
.exam-header{background:linear-gradient(135deg, var(--brand-900), var(--brand-700));padding:28px 32px;color:#fff;}
.exam-header h2{font-family:'Tajawal', sans-serif;font-size:clamp(20px, 3vw, 26px);font-weight:800;margin-bottom:6px;}
.exam-header .sub{font-size:14px;opacity:0.8;}
.exam-body{padding:32px;}
.exam-q-block{background:var(--bg-lesson);border-radius:var(--radius-md);border:1px solid var(--border-light);padding:20px;margin-bottom:20px;transition:border-color 0.2s, box-shadow 0.2s;}
.exam-q-block:hover{border-color:var(--brand-300);box-shadow:var(--shadow-sm);}
.exam-q-num{font-family:'Space Grotesk', sans-serif;font-size:11px;font-weight:700;color:var(--brand-500);letter-spacing:1.5px;margin-bottom:8px;direction:ltr;text-align:left;}
.exam-q-text{font-family:'Tajawal', sans-serif;font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:16px;line-height:1.7;}
.verb-cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:12px;margin-bottom:24px;}
.verb-card{background:rgba(167,139,250,0.04);border:1.5px solid var(--border-light);border-radius:var(--radius-md);padding:20px;text-align:center;transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s;}
.verb-card:hover{border-color:rgba(167,139,250,0.3);background:rgba(167,139,250,0.06);transform:translateY(-2px);}
.verb-card .vc-verb{font-family:'Space Grotesk', sans-serif;font-size:34px;font-weight:700;color:var(--brand-600);direction:ltr;display:block;margin-bottom:4px;}
.verb-card .vc-pron{font-family:'Tajawal', sans-serif;font-size:12px;color:var(--text-muted);margin-bottom:10px;}
.verb-card .vc-with{font-size:12px;color:var(--text-muted);margin-bottom:6px;font-family:'Tajawal', sans-serif;}
.verb-card .vc-subjects{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;}
.vc-subject-chip{background:linear-gradient(135deg, var(--brand-700), var(--brand-500));color:#fff;font-family:'Space Grotesk', sans-serif;font-size:11px;padding:3px 10px;border-radius:999px;direction:ltr;}
.sentence-row{background:#1a1a2e;border-radius:var(--radius-md);border:1px solid var(--border-light);padding:14px 18px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s;}
.sentence-row:hover{border-color:var(--brand-300);box-shadow:var(--shadow-sm);transform:translateX(-2px);}
.sentence-row .sen-en{font-family:'Space Grotesk', sans-serif;font-size:16px;color:var(--brand-600);direction:ltr;text-align:left;cursor:pointer;transition:color 0.18s, transform 0.18s;}
.sentence-row .sen-en:hover{color:var(--accent-teal);transform:translateX(2px);}
.sentence-row .sen-right{text-align:right;font-family:'Tajawal', sans-serif;font-size:13px;color:var(--text-arabic);}
.digraph-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));gap:10px;margin-bottom:24px;}
.digraph-card{background:var(--bg-lesson);border:1.5px solid var(--border-light);border-radius:var(--radius-md);padding:16px 12px;text-align:center;cursor:pointer;transition:all 0.22s;}
.digraph-card:hover{border-color:var(--brand-400);background:var(--tts-hover-bg);transform:translateY(-3px);box-shadow:var(--shadow-md), var(--glow-brand);}
.digraph-card .dc-letters{font-family:'Space Grotesk', sans-serif;font-size:28px;font-weight:700;color:var(--brand-600);direction:ltr;display:block;}
.digraph-card .dc-sound{font-family:'Tajawal', sans-serif;font-size:13px;color:var(--accent-teal);margin-bottom:6px;}
.digraph-card .dc-example{font-family:'Space Grotesk', sans-serif;font-size:11px;color:var(--text-muted);direction:ltr;}
.pronoun-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));gap:10px;margin-bottom:24px;}
.pronoun-card{background:var(--bg-lesson);border:1.5px solid var(--border-light);border-radius:var(--radius-md);padding:16px 10px;text-align:center;cursor:pointer;transition:all 0.22s;}
.pronoun-card:hover{border-color:var(--brand-400);background:var(--tts-hover-bg);transform:translateY(-3px);box-shadow:var(--shadow-sm), var(--glow-brand);}
.pronoun-card .pc-en{font-family:'Space Grotesk', sans-serif;font-size:24px;font-weight:700;color:var(--brand-600);direction:ltr;display:block;}
.pronoun-card .pc-ar{font-family:'Tajawal', sans-serif;font-size:12px;color:var(--text-muted);margin-top:4px;}
.wh-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:12px;margin-bottom:24px;}
.wh-card{background:var(--bg-lesson);border:1.5px solid var(--border-light);border-radius:var(--radius-md);padding:18px 14px;cursor:pointer;transition:all 0.22s;}
.wh-card:hover{border-color:var(--brand-400);background:var(--tts-hover-bg);transform:translateY(-3px);box-shadow:var(--shadow-md), var(--glow-brand);}
.wh-card .wh-word{font-family:'Space Grotesk', sans-serif;font-size:22px;font-weight:700;color:var(--brand-600);direction:ltr;display:block;margin-bottom:4px;}
.wh-card .wh-meaning{font-family:'Tajawal', sans-serif;font-size:12px;color:var(--accent-teal);margin-bottom:8px;}
.wh-card .wh-example{font-family:'Space Grotesk', sans-serif;font-size:11px;color:var(--text-muted);direction:ltr;font-style:italic;}
.site-footer{text-align:center;padding:32px 20px calc(32px + 96px);color:var(--text-muted);font-family:'Tajawal', sans-serif;font-size:14px;border-top:1px solid var(--border-light);margin-top:40px;background:linear-gradient(180deg, transparent, var(--brand-50));}
@media print{body{background:#111827!important;color:#000!important;font-size:12pt;}
.main-container{max-width:100%;padding:0;}
.lesson-card, .story-card, .exam-card, .welcome-card, .cover-card{break-inside:avoid;box-shadow:none!important;border:1px solid #ccc!important;margin-bottom:16pt;transform:none!important;}
.quiz-answer{display:block!important;}
a{text-decoration:none;color:#000;}
@page{size:A4;margin:2cm;}
}
@media (max-width:1024px){.main-container{max-width:100%;padding:28px 20px 72px;}
.cover-card{padding:40px 28px;}
.cover-stats{gap:16px;flex-wrap:wrap;justify-content:center;}
.lesson-header{padding:24px 24px 20px;}
.lesson-body{padding:24px;}
.story-header, .exam-header{padding:24px;}
.story-body, .exam-body{padding:24px;}
.welcome-card{padding-left:16px;padding-right:16px;padding-top:32px;padding-bottom:24px;}
.scoreboard-card{padding:36px 24px;}
.verb-cards{grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));}
}
@media (max-width:640px){body{padding:12px;font-size:15px;}
.main-container{padding:12px 10px 56px;}
.main-container{padding-bottom:96px;}
.site-header{padding:0 12px;height:52px;}
.site-header .brand-name{font-size:15px;}
.btn-icon .btn-text{display:none;}
.btn-icon{padding:8px 10px;font-size:16px;}
.cover-card{padding:28px 16px;border-radius:18px;}
.cover-card h1{font-size:clamp(22px, 6vw, 32px);}
.cover-card .cover-sub{font-size:13px;padding:0 8px;}
.cover-card .cover-badge{font-size:11px;padding:5px 14px;}
.cover-stats{gap:10px;}
.cover-stat{min-width:80px;padding:10px 8px;}
.cover-stat .num{font-size:22px;}
.welcome-card{padding-left:12px;padding-right:12px;padding-top:32px;padding-bottom:24px;border-radius:12px;}
.welcome-card .wc-icon{font-size:12px;width:22px;height:22px;}
.welcome-card .wc-title{font-size:14px;}
.welcome-steps{gap:14px;}
.lesson-card{border-radius:16px;}
.lesson-card:not(.rm-path .lesson-card){margin-bottom:20px;}
.lesson-header{padding:18px 16px 14px;}
.lesson-number-badge{font-size:10px;padding:3px 10px;}
.lesson-level-badge{font-size:9px;padding:3px 9px;margin-right:6px;}
.lesson-title-en{font-size:10px;}
.lesson-title-ar{font-size:clamp(14px, 3vw, 18px);}
.lesson-goal{font-size:13px;padding:10px 14px;}
.lesson-body{padding:18px 14px;}
.section-title{font-size:15px;}
.table-wrap{overflow-x:visible;border:none;box-shadow:none;border-radius:0;margin-bottom:16px;}
table, thead, tbody, tr, th, td{display:block;width:100%;text-align:right;}
table{min-width:0;}
thead{display:none;}
tbody tr{background:rgba(15,10,30,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(124,77,204,0.1);border-radius:14px;margin-bottom:10px;padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 10px rgba(30,10,60,0.06);}
tbody td{padding:0;border:none;font-size:14px;line-height:1.8;overflow-wrap:break-word;word-break:break-word;}
tbody td.en-cell{font-size:16px;font-weight:700;font-family:'Space Grotesk', sans-serif;direction:ltr;text-align:left;color:var(--brand-600);padding-bottom:4px;}
tbody td.pronun-cell{font-size:13px;color:var(--text-muted);direction:rtl;text-align:right;}
tbody td.ar-cell{font-size:14px;direction:rtl;text-align:right;color:var(--text-secondary);}
tbody td:last-child:not(.en-cell):not(.pronun-cell){font-size:13px;line-height:1.8;padding:10px 14px;margin-top:4px;background:rgba(91,47,160,0.06);border-radius:10px;border-right:3px solid var(--brand-400);color:var(--text-secondary);direction:rtl;}
.vocab-table{direction:ltr;}
.vocab-table td{direction:ltr;text-align:left;}
.vocab-table td.ar-cell,
.vocab-table td.pronun-cell,
.vocab-table td:last-child:not(.en-cell){direction:rtl;text-align:right;}
.alpha-grid{grid-template-columns:repeat(auto-fill, minmax(min(76px, 28vw), 1fr));gap:8px;}
.alpha-tile{padding:10px 6px;}
.alpha-tile .letter-big{font-size:22px;}
.alpha-tile .letter-small{font-size:15px;}
.alpha-tile .letter-name{font-size:10px;}
.verb-cards{grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));gap:8px;}
.verb-card{padding:12px 8px;}
.verb-card .vc-verb{font-size:15px;}
.quiz-block{padding:18px 14px;}
.quiz-q{font-size:14px;}
.quiz-option{font-size:14px;padding:12px 14px;}
.story-card, .exam-card{border-radius:16px;}
.story-header, .exam-header{padding:18px 16px;}
.story-header h2, .exam-header h2{font-size:clamp(17px, 4vw, 22px);}
.story-body, .exam-body{padding:18px 14px;}
.story-en p, .story-ar p{font-size:14px;}
.sentence-row{padding:10px 12px;flex-direction:column;gap:4px;}
.scoreboard-card{padding:28px 16px;}
.score-donut{font-size:52px;}
.score-grade{font-size:22px;}
.score-message{font-size:15px;}
.pronoun-cards, .digraph-cards, .wh-cards{grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));}
.lesson-card:hover, .story-card:hover, .sentence-row:hover,
.verb-card:hover, .alpha-tile:hover, .quiz-option:hover{transform:none;}
}
@media (max-width:400px){body{padding:8px;font-size:14px;}
.main-container{padding:8px 6px 52px;}
.main-container{padding-bottom:96px;}
.site-header .brand-name{font-size:13px;}
.cover-card h1{font-size:20px;}
.cover-card .cover-sub{font-size:12px;}
.cover-stats{flex-direction:column;align-items:center;}
.lesson-header{padding:14px 12px 12px;}
.lesson-body{padding:14px 10px;}
.alpha-grid{grid-template-columns:repeat(auto-fill, minmax(68px, 1fr));gap:6px;}
.alpha-tile .letter-big{font-size:18px;}
.verb-cards{grid-template-columns:repeat(2, 1fr);gap:6px;}
.verb-card .vc-verb{font-size:14px;}
tbody tr{padding:12px;margin-bottom:8px;border-radius:12px;}
tbody td.en-cell{font-size:15px;}
tbody td:last-child:not(.en-cell):not(.pronun-cell){padding:8px 10px;font-size:12px;}
.quiz-option{padding:10px 12px;font-size:13px;}
.story-body, .exam-body{padding:14px 10px;}
}
#landing{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;position:relative;overflow:hidden;transition:opacity 0.5s ease, transform 0.5s ease;}
#landing::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(91,47,160,0.25), transparent),
radial-gradient(ellipse 40% 40% at 80% 100%, rgba(124,77,204,0.15), transparent),
radial-gradient(ellipse 30% 30% at 10% 80%, rgba(13,158,143,0.1), transparent);pointer-events:none;z-index:0;}
#landing > *{position:relative;z-index:1;}
.land-logo{font-family:'Space Grotesk', sans-serif;font-size:18px;font-weight:700;color:var(--brand-300);letter-spacing:3px;text-transform:uppercase;margin-bottom:12px;opacity:0.7;}
.land-title{font-family:'Space Grotesk', sans-serif;font-size:clamp(36px, 8vw, 64px);font-weight:800;color:var(--text-primary);line-height:1.15;margin-bottom:8px;}
.land-title em{font-style:italic;color:var(--brand-300);font-family:'Lora', serif;}
.land-sub{font-family:'Tajawal', sans-serif;font-size:clamp(14px, 3vw, 18px);color:var(--text-muted);line-height:1.8;max-width:540px;margin:0 auto 36px;direction:rtl;}
.land-stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:44px;}
.land-stat{background:rgba(91,47,160,0.12);border:1px solid rgba(124,77,204,0.2);border-radius:16px;padding:18px 22px;min-width:110px;text-align:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform 0.22s ease, box-shadow 0.22s ease;}
.land-stat:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(91,47,160,0.2);}
.land-stat .ln{font-family:'Space Grotesk', sans-serif;font-size:28px;font-weight:800;color:var(--brand-400);}
.land-stat .ll{font-family:'Tajawal', sans-serif;font-size:12px;color:var(--text-muted);margin-top:4px;}
.land-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg, var(--brand-700), var(--brand-500));color:#fff;border:none;border-radius:16px;padding:18px 44px;font-family:'Tajawal', sans-serif;font-size:clamp(16px, 3.5vw, 20px);font-weight:700;cursor:pointer;box-shadow:0 8px 40px rgba(91,47,160,0.35);transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease;letter-spacing:0.3px;direction:rtl;}
.land-cta:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 56px rgba(91,47,160,0.45);}
.land-cta:active{transform:scale(0.97);}
.land-footer{margin-top:48px;font-family:'Tajawal', sans-serif;font-size:12px;color:var(--text-muted);opacity:0.5;}
#dashboard{display:none;opacity:0;animation:dash-in 0.6s ease forwards;}
/* Full-height / footer-pinning fix: #dashboard has exactly two direct
   children — .main-container and the site .footer — so a flex column with
   justify-content:space-between naturally pins the footer to the bottom of
   the viewport when content is shorter than the screen (no empty void),
   while still stacking normally with no overlap once content exceeds
   viewport height. */
#dashboard.active{display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;min-height:100dvh;}
@keyframes dash-in{from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}
#landing.hidden{opacity:0;transform:scale(0.96);pointer-events:none;position:absolute;width:0;height:0;overflow:hidden;}
@media (max-width:640px){#landing{padding:32px 16px;}
.land-stats{gap:10px;}
.land-stat{min-width:90px;padding:14px 16px;}
.land-stat .ln{font-size:22px;}
.land-cta{padding:16px 32px;}
}
@media (max-width:400px){.land-stats{flex-direction:column;align-items:center;}
.land-stat{width:80%;}
.land-cta{width:100%;justify-content:center;}
}
.rm-zone{margin-bottom:12px;}
/* ═══ 3-Column Month Grid ═══
   Each month is one grid item showing just its header (icon + title +
   subtitle) side-by-side with the other two months. Clicking a header still
   uses the exact same toggleZone()/rm-zone-body mechanism as before — the
   only change is that an OPEN zone spans the full grid width (grid-column:
   1/-1) so its 12 lesson cards have proper room, instead of being squeezed
   into a single 1/3-width column. */
.rm-months-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;}
@media(min-width:1024px){
.rm-months-grid{grid-template-columns:repeat(3,1fr);gap:24px;}
.rm-zone{margin-bottom:0;}
.rm-zone.zone-open{grid-column:1/-1;}
.rm-zone-header{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
}
.rm-zone-header{text-align:center;padding:24px 28px;margin:0 0 0;background:rgba(255, 255, 255, 0.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255, 255, 255, 0.1);border-radius:18px;color:#fff;font-family:'Tajawal', 'Cairo', sans-serif;font-weight:700;font-size:clamp(18px, 4vw, 24px);box-shadow:0 0 20px rgba(183,148,244,0.08);position:relative;overflow:hidden;cursor:pointer;transition:background-color 0.25s ease, border-color 0.25s ease;user-select:none;}
.rm-zone-header:hover{transform:translateY(-4px);border-color:rgba(71, 214, 255, 0.3);box-shadow:0 0 30px rgba(183,148,244,0.25);}
.rm-zone-header:active{transform:translateY(-1px);}
.rm-zone-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 20%, rgba(71,214,255,0.06), transparent);pointer-events:none;}
.rm-zone-header small{display:block;font-family:'Tajawal', sans-serif;font-size:13px;font-weight:400;opacity:0.7;margin-top:6px;position:relative;}
.rm-zone-chevron{display:inline-block;font-size:14px;margin-right:8px;transition:transform 0.35s ease;opacity:0.7;vertical-align:middle;}
.rm-zone.zone-open .rm-zone-chevron{transform:rotate(90deg);opacity:1;}
.rm-zone.zone-open .rm-zone-header{border-radius:18px 18px 0 0;margin-bottom:0;}
.rm-zone-body{max-height:0;overflow:hidden;opacity:0;transition:max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.4s ease,
padding 0.3s ease;padding:0 0;border:1px solid transparent;border-top:none;border-radius:0 0 18px 18px;}
.rm-zone.zone-open .rm-zone-body{max-height:80000px;opacity:1;padding:16px 0 8px;border-color:rgba(255, 255, 255, 0.06);background:rgba(255, 255, 255, 0.01);will-change:max-height, opacity;}
.rm-path{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;}
.rm-path .lesson-card{border-radius:16px;overflow:hidden;cursor:pointer;background:rgba(255, 255, 255, 0.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255, 255, 255, 0.08);box-shadow:0 0 15px rgba(183,148,244,0.05);transition:all 0.4s cubic-bezier(0.23, 1, 0.32, 1);text-align:center;margin-bottom:0 !important;position:relative;}
.rm-path .lesson-card:hover{transform:translateY(-6px);border-color:rgba(71, 214, 255, 0.4);box-shadow:0 0 30px rgba(183,148,244,0.2), 0 0 15px rgba(71,214,255,0.1);}
.rm-path .lesson-card::before{display:none;}
.rm-path .lesson-card:active{transform:translateY(-1px);}
.rm-path .lesson-card .lesson-header{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px 16px;cursor:pointer;transition:background 0.2s;}
.rm-path .lesson-card:hover .lesson-header{background:rgba(167,139,250,0.06);}
.rm-path .lesson-number-badge{flex-shrink:0;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(224, 182, 255, 0.1);border:1px solid rgba(224, 182, 255, 0.3);color:#e0b6ff;font-family:'Space Mono', monospace;font-size:13px;font-weight:700;box-shadow:0 0 12px rgba(183,148,244,0.15);letter-spacing:-0.5px;padding:0;transition:all 0.3s ease;}
.rm-path .lesson-card:hover .lesson-number-badge{background:rgba(71, 214, 255, 0.15);border-color:rgba(71, 214, 255, 0.4);color:#a5e7ff;box-shadow:0 0 16px rgba(71,214,255,0.2);}
.rm-path .lesson-title-en{font-size:8px;font-weight:500;line-height:1.3;direction:ltr;text-align:center;color:rgba(167,139,250,0.4);display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.rm-path .lesson-title-en,
.rm-path .lesson-goal,
.rm-path .rm-toggle{display:none;}
.rm-path .lesson-title-ar{display:block;font-size:11px;font-weight:700;color:#ffffff;text-align:center;line-height:1.5;direction:rtl;margin-top:2px;}
.rm-path .lesson-card.rm-open{grid-column:1 / -1;text-align:right;}
.rm-path .lesson-card.rm-open .lesson-header{flex-direction:row;align-items:center;gap:18px;padding:22px 24px;text-align:right;}
.rm-path .lesson-card.rm-open .lesson-number-badge{width:48px;height:48px;font-size:13px;}
.rm-path .lesson-card.rm-open .lesson-title-ar{display:block;font-size:18px;font-weight:700;color:#ffffff;text-align:right;margin-bottom:6px;line-height:1.6;}
.rm-path .lesson-card.rm-open .lesson-title-en{display:block;font-size:12px;font-weight:500;color:rgba(167,139,250,0.6);text-align:right;margin-bottom:4px;}
.rm-path .lesson-card.rm-open .lesson-goal{display:block;font-size:12px;color:var(--text-muted);opacity:0.8;padding:0;margin:0;background:none;border:none;border-radius:0;}
.rm-path .lesson-card.rm-open .rm-toggle{display:flex;margin-left:auto;flex-shrink:0;font-size:14px;width:32px;height:32px;align-items:center;justify-content:center;border-radius:8px;background:rgba(124,77,204,0.06);transition:transform 0.3s ease, background 0.2s ease;transform:rotate(90deg);color:var(--brand-400);opacity:1;}
.rm-path .lesson-card .lesson-body{max-height:0;overflow:hidden;opacity:0;transition:max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease,
padding 0.3s ease;padding:0 24px;border-top:0 solid var(--border);text-align:right;}
.rm-path .lesson-card.rm-open .lesson-body{max-height:12000px;opacity:1;padding:20px 24px 24px;border-top-width:1px;will-change:max-height, opacity;transition:max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.35s ease 0.05s,
padding 0.3s ease;}
.rm-boss-gate{grid-column:1 / -1;}
body.month-view #hero-welcome{display:none !important;}
body.month-view #hero-banner{display:none !important;}
body.month-view .rm-zone:not(.zone-active){display:none !important;}
body.month-view .rm-zone.zone-active{display:block;}
body.month-view .rm-zone.zone-active .rm-zone-header{display:none;}
body.month-view .rm-zone.zone-active .rm-zone-body{max-height:none !important;opacity:1 !important;overflow:visible !important;padding:0 !important;border:none !important;}
.dashboard-header-bar{position:fixed;top:0;left:0;right:0;width:100%;z-index:500;display:none;flex-wrap:wrap;justify-content:space-between;align-items:center;direction:rtl;padding:14px 24px;gap:12px;background:rgba(8,2,20,0.92) !important;backdrop-filter:blur(24px) !important;-webkit-backdrop-filter:blur(24px) !important;border-bottom:1px solid rgba(168,85,247,0.25) !important;box-shadow:0 4px 25px rgba(0,0,0,0.6) !important;}
@media(max-width:1024px){.dashboard-header-bar{padding:10px 16px;gap:10px;}}
@media(max-width:640px){.dashboard-header-bar{padding:8px 10px;gap:6px;}}
@media(max-width:480px){
.dashboard-header-bar{padding:6px 8px;gap:4px;}
.smart-back-btn{padding:8px 12px 8px 10px;font-size:12px;gap:5px;}
.xp-counter-pill .xp-label{display:none;}
}
body.in-platform .dashboard-header-bar{display:flex;}
body.in-platform .main-container{padding-top:16px !important;}
body.quiz-mode .dashboard-header-bar{display:none;}
@supports (padding:env(safe-area-inset-top)){.dashboard-header-bar{padding-top:calc(12px + env(safe-area-inset-top));}}
.dashboard-status-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;min-width:0;flex:0 1 auto;align-items:center;}
@media(max-width:640px){.dashboard-status-row{gap:5px;justify-content:flex-end;}}
.se-auth-trigger{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:9999px;border:1px solid rgba(168,85,247,0.3);background:rgba(59,7,100,0.4);font-family:'Tajawal',sans-serif;font-size:11px;font-weight:600;color:#e9d5ff;cursor:pointer;transition:background-color 0.2s ease,border-color 0.2s ease;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
/* Dedicated luxury button for the full Student Dashboard — lives inside
   the welcome card next to "متابعة الدرس الحالي" (not the header bar,
   which is deliberately kept text-free/lightweight). Deliberately sized
   and styled to match its neighbor button's visual weight (same height/
   padding scale) so it reads as an equally prominent primary action, not
   a secondary icon — purple-to-cyan glassmorphism gradient with a
   visible text label at all times (no hover-only tooltip anymore). */
.se-dashboard-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:16px;border:1.5px solid rgba(192,132,252,0.6);background:linear-gradient(135deg,rgba(124,77,204,0.4),rgba(56,189,248,0.18));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#f3e8ff;font-family:'Tajawal',sans-serif;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 0 22px rgba(168,85,247,0.35),inset 0 0 14px rgba(192,132,252,0.08);transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease;white-space:nowrap;}
@media(max-width:640px){
}
.se-dashboard-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 34px rgba(168,85,247,0.55),0 0 20px rgba(56,189,248,0.25),inset 0 0 16px rgba(192,132,252,0.12);border-color:rgba(216,180,254,0.9);}
@media(max-width:640px){.se-dashboard-btn{padding:10px 16px;font-size:12px;}}
@keyframes seFlamePulse{0%,100%{opacity:0.75;}50%{opacity:1;}}
.se-flame-icon{filter:drop-shadow(0 0 3px rgba(251,146,60,0.7));animation:seFlamePulse 1.8s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){.se-flame-icon{animation:none!important;}}
.se-auth-trigger:hover{border-color:rgba(71,214,255,0.4);color:rgba(165,231,255,0.95);}
.se-auth-trigger.se-auth-signed-in{border-color:rgba(34,197,94,0.35);color:rgba(134,239,172,0.9);}
@media(max-width:640px){.se-auth-trigger{padding:4px 8px;font-size:9.5px}}
.smart-back-btn{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 20px 10px 16px;border-radius:14px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#e0b6ff;font-family:'Tajawal', sans-serif;font-size:13px;font-weight:700;cursor:pointer;direction:rtl;transition:background-color 0.25s ease,border-color 0.25s ease;touch-action:manipulation;box-shadow:0 0 20px rgba(183,148,244,0.08);white-space:nowrap;}
/* Prominent state while a month accordion is open: the default subtle
   styling above (3% background, 10% border) was too low-contrast to
   notice at a glance as "the way out" of a month view — this makes the
   exit button unmistakable specifically when it matters most. */
body.month-view .smart-back-btn{background:rgba(124,77,204,0.22);border:1.5px solid rgba(183,148,244,0.55);box-shadow:0 0 24px rgba(157,78,221,0.35);color:#f1e5ff;}
body.month-view .smart-back-btn:hover{background:rgba(124,77,204,0.32);}
.smart-back-btn:hover{border-color:rgba(71,214,255,0.3);color:#a5e7ff;}
.smart-back-btn:active{background-color:rgba(255,255,255,0.06);}
.smart-back-arrow{font-size:18px;transition:transform 0.2s;}
.smart-back-btn:hover .smart-back-arrow{transform:translateX(4px);}
.month-view-title{display:none;text-align:center;padding:12px 20px 20px;font-family:'Tajawal', sans-serif;font-size:clamp(20px, 5vw, 26px);font-weight:800;color:var(--text-primary);direction:rtl;}
body.month-view .month-view-title{display:block;}
body.month-view .month-view-title .mvt-sub{display:block;font-size:13px;font-weight:400;color:var(--text-muted);margin-top:4px;}
body.quiz-mode .site-header,
body.quiz-mode #hero-banner,
body.quiz-mode #hero-welcome,
body.quiz-mode .rm-zone:not(.zone-open),
body.quiz-mode .site-footer{display:none !important;}
body.quiz-mode .rm-zone.zone-open .rm-zone-header{display:none !important;}
body.quiz-mode .rm-zone.zone-open .rm-path{display:none !important;}
body.quiz-mode .rm-zone.zone-open .rm-boss-gate{display:none !important;}
body.quiz-mode .main-container{padding-top:20px;}
body.quiz-mode .rm-gate-content.rm-gate-open{max-height:none;opacity:1;display:block;}
.btn-back-dashboard{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg, var(--brand-700), var(--brand-500));color:#fff;border:none;border-radius:14px;padding:14px 32px;font-family:'Tajawal', sans-serif;font-size:16px;font-weight:700;cursor:pointer;margin:24px auto;direction:rtl;transition:transform var(--ease), box-shadow var(--ease);}
.btn-back-dashboard:hover{transform:var(--lift);box-shadow:0 8px 32px rgba(91,47,160,0.3);}
.quiz-mode-header{text-align:center;padding:16px 20px 24px;font-family:'Tajawal', sans-serif;font-size:14px;color:var(--text-muted);direction:rtl;}
.quiz-mode-header h2{font-family:'Space Grotesk', sans-serif;font-size:clamp(20px, 5vw, 28px);color:var(--text-primary);margin-bottom:6px;}
.rm-path .lesson-card.lesson-done{border:1.5px solid rgba(183,148,244,0.4) !important;box-shadow:0 0 16px rgba(183,148,244,0.12), var(--glass-glow);position:relative;}
.se-complete-btn{display:block;width:100%;margin:20px 0 4px;padding:14px 20px;border-radius:14px;border:1px solid rgba(183,148,244,0.3);background:linear-gradient(135deg,#6d11ad,#9d4edd);color:#fff;font-family:'Tajawal',sans-serif;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 4px 16px rgba(157,78,221,0.3);transition:transform 0.2s,box-shadow 0.2s,opacity 0.3s;touch-action:manipulation;}
.se-complete-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 22px rgba(157,78,221,0.45);}
.se-complete-btn:active:not(:disabled){transform:translateY(0);}
.se-complete-btn:disabled,.se-complete-btn-done{background:rgba(183,148,244,0.12);border-color:rgba(183,148,244,0.25);color:#e0b6ff;cursor:default;box-shadow:none;opacity:0.85;}
.rm-path .lesson-card.lesson-done .lesson-number-badge{background:linear-gradient(135deg, #6d11ad, #b794f4);box-shadow:0 2px 14px rgba(183,148,244,0.35);}
.rm-path .lesson-card.lesson-done::after{content:'✓';position:absolute;top:8px;left:8px;width:20px;height:20px;border-radius:50%;background:#b794f4;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(183,148,244,0.3);}
.rm-path .lesson-card.lesson-done.rm-open{border-color:rgba(183,148,244,0.4) !important;}
@media (max-width:400px){.rm-path{grid-template-columns:repeat(2, 1fr);gap:8px;}
.rm-path .lesson-card .lesson-header{padding:16px 10px 14px;}
.rm-path .lesson-number-badge{width:44px;height:44px;font-size:12px;}
.rm-path .lesson-title-en{font-size:10px;}
.rm-path .lesson-title-ar{font-size:10px;}
}
.rm-boss-gate{margin:16px 0 8px;text-align:center;}
.rm-gate-btn{display:inline-flex;align-items:center;gap:10px;background:rgba(255, 255, 255, 0.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#a5e7ff;border:1px solid rgba(71, 214, 255, 0.2);border-radius:16px;padding:16px 36px;font-family:'Tajawal', sans-serif;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 0 20px rgba(71,214,255,0.1);transition:all 0.4s cubic-bezier(0.23, 1, 0.32, 1);direction:rtl;}
.rm-gate-btn:hover{transform:translateY(-4px);border-color:rgba(71, 214, 255, 0.5);box-shadow:0 0 35px rgba(71,214,255,0.2), 0 0 15px rgba(183,148,244,0.15);color:#fff;}
.rm-gate-content{max-height:0;overflow:hidden;opacity:0;transition:max-height 0.6s ease, opacity 0.4s ease;}
.rm-gate-content.rm-gate-open{max-height:50000px;opacity:1;margin-top:20px;}
@media (max-width:640px){.rm-zone-header{padding:18px 16px;margin:0 0 14px;border-radius:14px;}
.rm-path .lesson-card .lesson-header{padding:16px 14px;gap:12px;flex-wrap:wrap;}
.rm-path .lesson-number-badge{width:40px;height:40px;font-size:11px;}
.rm-path .lesson-card.rm-open .lesson-body{padding:16px 14px 20px;}
.rm-gate-btn{padding:14px 24px;font-size:14px;width:100%;justify-content:center;}
}:root{--glass-bg:rgba(15,10,30,0.8);--glass-border:rgba(167,139,250,0.12);--glass-blur:blur(16px);--glass-glow:0 4px 24px rgba(0,0,0,0.3),0 0 0 1px rgba(167,139,250,0.06);--glass-hover:0 8px 36px rgba(0,0,0,0.4),0 0 16px rgba(167,139,250,0.1),0 0 0 1px rgba(167,139,250,0.12);--lift:translateY(-4px);--ease:0.3s cubic-bezier(0.25,0.46,0.45,0.94);}
.lesson-card,.welcome-card,.story-card,.exam-card,.quiz-block,.scoreboard-card,.alert{background:var(--glass-bg) !important;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border) !important;box-shadow:var(--glass-glow);transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);}
.verb-card,.alpha-tile,.land-stat{background:var(--glass-bg) !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-border) !important;transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);}
.verb-card:hover,.alpha-tile:hover,.land-stat:hover{transform:var(--lift);box-shadow:var(--glass-hover);border-color:rgba(124,77,204,0.2) !important;}
.quiz-option{transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);}
.quiz-option:not(.opt-locked):hover{transform:var(--lift);box-shadow:var(--glass-hover);border-color:rgba(124,77,204,0.25) !important;}
.rm-zone-header{transition:background-color 0.25s ease, border-color 0.25s ease !important;}
.rm-zone-header:hover{background-color:rgba(255,255,255,0.05);border-color:rgba(124,77,204,0.3) !important;}
.rm-zone-header:active{background-color:rgba(255,255,255,0.07);}
.rm-gate-btn{transition:transform var(--ease), box-shadow var(--ease);}
.rm-gate-btn:hover{transform:var(--lift);box-shadow:0 12px 40px rgba(13,158,143,0.3), 0 0 20px rgba(13,158,143,0.1);}
.rm-path .lesson-card{background:var(--glass-bg) !important;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border) !important;box-shadow:var(--glass-glow);}
.rm-path .lesson-card:hover{transform:var(--lift) !important;box-shadow:var(--glass-hover) !important;border-color:rgba(124,77,204,0.2) !important;}
.rm-path .lesson-card:active{transform:translateY(-1px) !important;}
.land-cta{transition:transform var(--ease), box-shadow var(--ease);}
.land-cta:hover{transform:var(--lift) scale(1.02);box-shadow:0 16px 56px rgba(91,47,160,0.4), 0 0 20px rgba(124,77,204,0.15);}
.land-cta:active{transform:translateY(0) scale(0.98);}
.sentence-row{transition:transform var(--ease), box-shadow var(--ease);}
.sentence-row:hover{transform:translateX(-3px);box-shadow:var(--glass-glow);}
.tts{transition:color 0.2s, transform 0.2s;}
.tts:hover{color:#b794f4;transform:scale(1.03);display:inline-block;}
@media (hover:none){.verb-card:hover,.alpha-tile:hover,.quiz-option:not(.opt-locked):hover,.rm-zone-header:hover,
.rm-path .lesson-card:hover,.land-stat:hover,.sentence-row:hover{transform:none !important;}
}
.rm-zone-body{min-height:0;transform:translateZ(0);}
.rm-zone{transition:margin 0.3s ease;}
.rm-zone.zone-open{margin-bottom:16px;}
.rm-path .lesson-card .lesson-body{transform-origin:top center;}
.rm-gate-content{transform-origin:top center;will-change:max-height, opacity;}
#splash-screen{will-change:opacity;}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(24px);}
to{opacity:1;transform:translateY(0);}
}
.rm-zone.zone-open .rm-zone-body .lesson-card{animation:fadeSlideUp 0.45s ease both;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(1){animation-delay:0.03s;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(2){animation-delay:0.06s;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(3){animation-delay:0.09s;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(4){animation-delay:0.12s;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(5){animation-delay:0.15s;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(6){animation-delay:0.18s;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(7){animation-delay:0.21s;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(8){animation-delay:0.24s;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(9){animation-delay:0.27s;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(10){animation-delay:0.30s;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(11){animation-delay:0.33s;}
.rm-zone.zone-open .rm-zone-body .lesson-card:nth-child(12){animation-delay:0.36s;}
.rm-zone.zone-open .rm-boss-gate{animation:fadeSlideUp 0.5s ease 0.4s both;}
.rm-path .lesson-card.rm-open .lesson-body > *{animation:fadeSlideUp 0.35s ease both;}
.rm-path .lesson-card.rm-open .lesson-body > *:nth-child(1){animation-delay:0.05s;}
.rm-path .lesson-card.rm-open .lesson-body > *:nth-child(2){animation-delay:0.1s;}
.rm-path .lesson-card.rm-open .lesson-body > *:nth-child(3){animation-delay:0.15s;}
.rm-path .lesson-card.rm-open .lesson-body > *:nth-child(4){animation-delay:0.2s;}
.rm-path .lesson-card.rm-open .lesson-body > *:nth-child(5){animation-delay:0.25s;}
.rm-path .lesson-card.rm-open .lesson-body > *:nth-child(6){animation-delay:0.3s;}
.rm-path .lesson-card.rm-open .lesson-body > *:nth-child(7){animation-delay:0.35s;}
.rm-path .lesson-card.rm-open .lesson-body > *:nth-child(8){animation-delay:0.4s;}
.rm-gate-content.rm-gate-open > *{animation:fadeSlideUp 0.5s ease both;}
.rm-gate-content.rm-gate-open > *:nth-child(1){animation-delay:0.1s;}
.rm-gate-content.rm-gate-open > *:nth-child(2){animation-delay:0.25s;}
#dashboard.active .rm-zone:nth-child(1){animation:fadeSlideUp 0.5s ease 0.1s both;}
#dashboard.active .rm-zone:nth-child(2){animation:fadeSlideUp 0.5s ease 0.2s both;}
#dashboard.active .rm-zone:nth-child(3){animation:fadeSlideUp 0.5s ease 0.3s both;}
#dashboard.active .welcome-card{animation:fadeSlideUp 0.5s ease 0.05s both;}
@media (prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms !important;animation-delay:0ms !important;}
}
.section-title{font-size:16px;font-weight:700;margin-bottom:16px;margin-top:8px;padding-bottom:10px;border-bottom:1px solid rgba(124,77,204,0.08);letter-spacing:0.3px;}
.rm-path .lesson-card .lesson-header{padding:22px 28px;gap:20px;}
.rm-path .lesson-card.rm-open .lesson-body{padding:24px 28px 28px;}
.lesson-goal{margin-top:6px;padding:0;line-height:1.7;}
thead th{padding:14px 18px;}
tbody td{padding:14px 18px;}
.verb-cards{gap:14px;margin-bottom:28px;}
.verb-card{padding:18px 14px;}
.alert{margin-bottom:24px;}
.alert-text{padding:4px 0;}
.quiz-block{padding:24px;margin-top:20px;margin-bottom:8px;}
.quiz-q{margin-bottom:18px;}
.quiz-option{padding:14px 18px;margin-bottom:8px;}
.story-body{padding:28px;}
.story-en p, .story-ar p{margin-bottom:14px;line-height:2.0;}
.welcome-steps{gap:18px;}
.welcome-step{gap:14px;}
.rm-zone.zone-open .rm-zone-body{padding:20px 8px 12px;}
.site-footer{padding:32px 24px;}
.se-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;vertical-align:middle;margin-left:6px;flex-shrink:0;}
.se-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.rm-path .lesson-number-badge{width:50px;height:50px;font-size:14px;letter-spacing:0;box-shadow:0 3px 16px rgba(91,47,160,0.25);}
.rm-toggle{font-size:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(124,77,204,0.06);transition:transform 0.3s ease, background 0.2s ease;}
.rm-open .rm-toggle{transform:rotate(90deg);background:rgba(124,77,204,0.12);}
.rm-zone-chevron{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:6px;background:rgba(255,255,255,0.12);margin-left:10px;font-size:12px;transition:transform 0.35s ease, background 0.2s ease;}
.rm-zone.zone-open .rm-zone-chevron{transform:rotate(90deg);background:rgba(167,139,250,0.15);}
*, *::before, *::after{max-width:100%;}
img, video, canvas, svg{max-width:100%;height:auto;}
html{overflow-x:hidden;}
body{overflow-x:hidden;min-height:100vh;min-height:100dvh;}
@media (max-width:1024px){.rm-path{grid-template-columns:repeat(3, 1fr);gap:10px;}
.welcome-steps{grid-template-columns:repeat(2, 1fr);}
.main-container{max-width:100%;padding:24px 16px 72px;}
}
@media (max-width:768px){.rm-path .lesson-card.rm-open .lesson-header{padding:18px 16px;}
.rm-path .lesson-card.rm-open .lesson-body{padding:16px 14px 20px;}
.welcome-steps{grid-template-columns:1fr;}
.rm-zone-header{font-size:18px;padding:20px 20px;}
.rm-zone-header small{font-size:12px;}
.main-container{padding:20px 14px 68px;}
.glass-panel{padding:24px !important;}
.glass-panel p{font-size:14px;}
}
@media (max-width:640px){.rm-path{grid-template-columns:repeat(2, 1fr);gap:8px;}
.rm-path .lesson-number-badge{width:44px;height:44px;font-size:11px;}
.rm-path .lesson-title-en{font-size:10px;}
.rm-path .lesson-card .lesson-header{padding:14px 10px 12px;gap:8px;}
.rm-path .lesson-card.rm-open .lesson-header{padding:14px 12px;gap:12px;}
.rm-path .lesson-card.rm-open .lesson-body{padding:14px 12px 18px;}
.rm-path .lesson-card.rm-open .lesson-title-en{font-size:11px;color:rgba(167,139,250,0.5);text-align:right;margin-bottom:4px;}
.rm-zone-header{font-size:16px;padding:18px 16px;border-radius:14px;}
.rm-boss-gate .rm-gate-btn{padding:12px 20px;font-size:13px;width:100%;justify-content:center;}
.smart-back-btn{padding:10px 16px;font-size:13px;border-radius:12px;min-height:40px;}
.story-body{padding:16px 12px;}
.story-en p, .story-ar p{font-size:14px;line-height:1.8;}
.quiz-block{padding:16px 12px;}
.quiz-option{padding:11px 12px;font-size:13px;}
.alert{padding:14px;}
.alert-text{font-size:13px;}
.section-title{font-size:14px;}
.lesson-goal, .lesson-title-ar{font-size:12px;}
.rm-path .lesson-card.rm-open .lesson-title-ar{font-size:18px;font-weight:700;color:#e0b6ff;text-align:right;margin-bottom:8px;}
.rm-path .lesson-card.rm-open .lesson-goal{font-size:11px;}
}
@media (max-width:400px){.rm-path{grid-template-columns:repeat(2, 1fr);gap:6px;}
.rm-path .lesson-number-badge{width:38px;height:38px;font-size:10px;}
.rm-path .lesson-title-en{font-size:9px;-webkit-line-clamp:1;line-clamp:1;}
.rm-path .lesson-card .lesson-header{padding:12px 8px 10px;}
.rm-zone-header{font-size:15px;padding:14px 12px;}
.welcome-card{padding-left:14px;padding-right:14px;padding-top:32px;padding-bottom:24px;}
.vf-orb{width:56px;height:56px;}
.vf-orb-icon{font-size:22px;}
}
@media (max-height:500px) and (orientation:landscape){.vf-panel{max-height:85vh;}
.vf-mic{width:52px;height:52px;}
.rm-zone-header{padding:14px 20px;}
}
.vf-orb, .vf-panel, .vf-overlay,
.smart-back-btn, .rm-zone-header,
.lesson-card, .rm-gate-btn,
.glass-panel{transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;}
@media (prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}
@supports (padding:env(safe-area-inset-bottom)){.vf-wrap{bottom:calc(32px + env(safe-area-inset-bottom));}
footer, .site-footer{padding-bottom:calc(24px + env(safe-area-inset-bottom));}
}
@media print{.orb, .vf-wrap, .vf-overlay, .smart-back-btn, #progress-bar{display:none !important;}
body{background:#111827 !important;color:#000 !important;}
}

.vf-voice-visualizer { margin-top: 60px !important; margin-bottom: 20px !important; }
.vf-fb-avatar { display: flex; align-items: center; justify-content: center; background-color: #9333ea; font-weight: bold; font-size: 1.5rem; color: white !important; border: 2px solid #a5e7ff; }
.vf-orb-icon-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ══════ MODERN BLACK & PURPLE DESIGN SYSTEM ══════ */
:root {
  --bg-main: #020005;
  --bg-gradient: radial-gradient(circle at 50% -20%, #2e0854 0%, #0d021a 45%, #020005 100%);
  --brand-primary: #a855f7;
  --brand-neon: #c084fc;
  --brand-glow: rgba(168, 85, 247, 0.4);
  --cyan-neon: #38bdf8;
  --glass-bg: rgba(18, 6, 36, 0.65);
  --glass-border: rgba(168, 85, 247, 0.25);
  --glass-glow: 0 8px 32px 0 rgba(0, 0, 0, 0.7);
}

body {
  background: var(--bg-gradient) fixed !important;
  color: #f3e8ff !important;
}

/* Glass Panels */
.glass-panel {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.glass-panel:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(192, 132, 252, 0.5) !important;
  box-shadow: 0 16px 40px rgba(168, 85, 247, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Animated Background Alexa Avatar */
.hero-bg-alexa-avatar {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 560px;
  max-width: 90vw;
  max-height: 90vw;
  pointer-events: none;
  z-index: 0;
  opacity: 0.20;
  filter: drop-shadow(0 0 60px rgba(168, 85, 247, 0.7));
  animation: alexaFloatBg 6s ease-in-out infinite;
}
.alexa-bg-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.alexa-avatar-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, rgba(124, 58, 237, 0.15) 50%, transparent 75%);
  animation: alexaGlowPulse 4s ease-in-out infinite alternate;
}
@keyframes alexaFloatBg {
  0%, 100% { transform: translate(-50%, -50%) scale(1) translateY(0); }
  50% { transform: translate(-50%, -50%) scale(1.05) translateY(-14px); }
}
@keyframes alexaGlowPulse {
  0% { opacity: 0.5; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.1); }
}

/* Site & Dashboard Header */
.site-header, .dashboard-header-bar {
  background: rgba(10, 2, 22, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.2) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Welcome Card in Platform */
.welcome-card {
  background: linear-gradient(135deg, rgba(35, 10, 70, 0.7) 0%, rgba(15, 2, 30, 0.85) 100%) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(147, 51, 234, 0.2) !important;
  padding: 36px 28px !important;
  margin-bottom: 32px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Month Accordion Header */
.rm-zone-header {
  background: linear-gradient(90deg, rgba(40, 12, 80, 0.85) 0%, rgba(20, 4, 45, 0.95) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 20px !important;
  padding: 20px 24px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s ease !important;
}
.rm-zone-header:hover {
  border-color: var(--brand-neon) !important;
  box-shadow: 0 12px 32px rgba(168, 85, 247, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Lesson Cards (3D Glassmorphism) */
.lesson-card {
  background: rgba(16, 5, 34, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}
.lesson-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(192, 132, 252, 0.5) !important;
  box-shadow: 0 20px 50px rgba(168, 85, 247, 0.25) !important;
}
.lesson-header {
  background: linear-gradient(180deg, rgba(40, 15, 80, 0.5) 0%, rgba(20, 5, 40, 0) 100%) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.15) !important;
  padding: 24px 28px !important;
}
/* Lesson Cards (3D Glassmorphism & Fixed Badges) */
.rm-path .lesson-number-badge,
.lesson-number-badge {
  width: auto !important;
  min-width: 90px !important;
  height: 38px !important;
  border-radius: 9999px !important;
  padding: 4px 16px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.45) !important;
  border: 1px solid rgba(216, 180, 254, 0.4) !important;
}

.rm-path .lesson-card {
  border-radius: 20px !important;
  background: rgba(18, 6, 38, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.rm-path .lesson-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(192, 132, 252, 0.5) !important;
  box-shadow: 0 16px 45px rgba(168, 85, 247, 0.3) !important;
}

.rm-path .lesson-card .lesson-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 24px 16px 20px !important;
}

.rm-path .lesson-level-badge {
  display: inline-block !important;
  padding: 3px 12px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
}

.rm-path .lesson-title-ar {
  display: block !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-top: 6px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

/* WhatsApp Voice Chat Modal */
.vf-panel {
  background: rgba(10, 2, 25, 0.94) !important;
  backdrop-filter: blur(36px) !important;
  -webkit-backdrop-filter: blur(36px) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 32px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 60px rgba(168, 85, 247, 0.25) !important;
}

/* Floating Action Button (Alexa) */
.vf-orb {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(192, 132, 252, 0.5) !important;
  background: rgba(20, 5, 45, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.4), 0 0 60px rgba(56, 189, 248, 0.2) !important;
  overflow: hidden !important;
  padding: 2px !important;
}
.vf-orb:hover {
  transform: scale(1.1) translateY(-2px) !important;
  border-color: #c084fc !important;
  box-shadow: 0 0 45px rgba(168, 85, 247, 0.65), 0 0 80px rgba(56, 189, 248, 0.35) !important;
}
.vf-orb-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Scenario Grid items with 3D Icons */
.vf-scenario-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
.vf-scenario {
  background: rgba(25, 8, 50, 0.6) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 18px !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  color: #fff !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.vf-scenario:hover, .vf-scenario.vf-scenario-on {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(192, 132, 252, 0.2)) !important;
  border-color: var(--brand-neon) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.3) !important;
}
.vf-scenario img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Subtitle / Transcript Area */
.vf-tr {
  background: rgba(5, 1, 15, 0.6) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  border-radius: 20px !important;
  padding: 16px 20px !important;
  margin: 12px 0 !important;
  max-height: 160px !important;
  overflow-y: auto !important;
  font-family: 'Space Grotesk', 'Tajawal', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

/* Inline SVG icon system — replaces the Material Symbols font CDN.
   Icons size via font-size (width/height:1em) and color via currentColor,
   so existing Tailwind text-* classes keep working unchanged. */
.ic {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ==========================================================================
   SMOOTH GLOBAL ANIMATIONS & SCROLL REVEAL SYSTEM
   ========================================================================== */

/* Reveal system — FAIL-SAFE BY DESIGN:
   Content is VISIBLE BY DEFAULT. JS adds .reveal-armed only after the
   IntersectionObserver is confirmed working, so a script error or a blocked
   script can never leave the whole page invisible (the old "black screen,
   icons gone" bug came from hiding everything in CSS up-front). */
.reveal-init, .reveal-slide-right, .reveal-slide-left, .reveal-scale, .reveal-fade {
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-armed.reveal-init {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
.reveal-armed.reveal-init.revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Directional reveal modifiers */
.reveal-armed.reveal-slide-right {
  opacity: 0;
  transform: translateX(35px);
  will-change: opacity, transform;
}
.reveal-armed.reveal-slide-right.revealed {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.reveal-armed.reveal-slide-left {
  opacity: 0;
  transform: translateX(-35px);
  will-change: opacity, transform;
}
.reveal-armed.reveal-slide-left.revealed {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.reveal-armed.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  will-change: opacity, transform;
}
.reveal-armed.reveal-scale.revealed {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.reveal-armed.reveal-fade {
  opacity: 0;
  will-change: opacity;
}
.reveal-armed.reveal-fade.revealed {
  opacity: 1 !important;
}

/* Stagger animation delay helpers */
.delay-75  { transition-delay: 0.075s !important; }
.delay-100 { transition-delay: 0.1s !important; }
.delay-150 { transition-delay: 0.15s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-250 { transition-delay: 0.25s !important; }
.delay-300 { transition-delay: 0.3s !important; }
.delay-350 { transition-delay: 0.35s !important; }
.delay-400 { transition-delay: 0.4s !important; }
.delay-450 { transition-delay: 0.45s !important; }
.delay-500 { transition-delay: 0.5s !important; }
.delay-600 { transition-delay: 0.6s !important; }
.delay-700 { transition-delay: 0.7s !important; }

/* Dynamic Floating Ambient Background Orbs */
@keyframes ambientDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 50px) scale(1.08); }
}
@keyframes ambientDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -40px) scale(1.12); }
}
@keyframes ambientDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, -30px) scale(1.05); }
}

.orb-1 { animation: ambientDrift1 14s ease-in-out infinite alternate !important; }
.orb-2 { animation: ambientDrift2 18s ease-in-out infinite alternate !important; }
.orb-3 { animation: ambientDrift3 12s ease-in-out infinite alternate !important; }

/* Timeline Radiant Vertical Track */
.curriculum-timeline-track {
  position: relative;
}
.curriculum-timeline-track::before {
  content: '';
  position: absolute;
  top: 15px;
  bottom: 15px;
  right: 0px;
  width: 3px;
  background: linear-gradient(180deg, #38bdf8 0%, #c084fc 50%, #f472b6 100%);
  border-radius: 9999px;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.6), 0 0 30px rgba(56, 189, 248, 0.35);
  animation: timelineGlowFlow 4s ease-in-out infinite alternate;
  will-change: opacity;
}
[dir="ltr"] .curriculum-timeline-track::before {
  right: auto;
  left: 0px;
}

@keyframes timelineGlowFlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Glowing Timeline Nodes & Radar Rings */
.timeline-node-dot {
  position: absolute;
  top: 28px;
  right: -10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 4px solid #0a0218;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
[dir="ltr"] .timeline-node-dot {
  right: auto;
  left: -10px;
}

.timeline-node-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.6;
  animation: radarPing 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes radarPing {
  0% { transform: scale(0.8); opacity: 0.8; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Timeline Cards Interactive Hover & 3D Glass Effects */
.timeline-card-wrapper {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}
.timeline-card-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: skewX(-20deg);
  transition: left 0.75s ease;
  pointer-events: none;
}
.timeline-card-wrapper:hover::before {
  left: 200%;
}
.timeline-card-wrapper:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(168, 85, 247, 0.3) !important;
}

/* Fun features hover micro-lift & glow */
#fun-features-grid .glass-panel {
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  border: 1px solid rgba(168, 85, 247, 0.18);
  position: relative;
  overflow: hidden;
}
#fun-features-grid .glass-panel:hover {
  transform: translateY(-5px);
  border-color: rgba(192, 132, 252, 0.5);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(168, 85, 247, 0.25);
  background: rgba(35, 12, 65, 0.45);
}
#fun-features-grid .glass-panel:hover .w-12 {
  transform: scale(1.1) rotate(5deg);
  border-color: rgba(192, 132, 252, 0.8);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}
#fun-features-grid .glass-panel .w-12 {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Stats counter cards hover */
#features .grid:first-child .glass-panel {
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  overflow: hidden;
}
#features .grid:first-child .glass-panel:hover {
  transform: translateY(-6px);
  border-color: rgba(71, 214, 255, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(71, 214, 255, 0.2);
}

/* Hero CTA glow animations */
@keyframes ctaPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
#hero-start-btn {
  position: relative;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 4px 24px rgba(139, 92, 246, 0.45);
}
#hero-start-btn:hover {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
}
#hero-start-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  /* Explicit value instead of border-radius:inherit — the button's
     actual radius (rounded-2xl = 16px) doesn't automatically scale to
     match this layer being 4px LARGER than the button on every side;
     16px+4px=20px keeps the glow's curve concentric/parallel with the
     button's own rounded corners instead of showing mismatched square-
     ish edges peeking out behind the rounded button (the "harsh dark
     rectangular border artifact"). */
  border-radius: 20px;
  pointer-events: none;
  box-shadow: 0 0 50px rgba(168, 85, 247, 0.8), 0 0 20px rgba(56, 189, 248, 0.5);
  animation: ctaPulse 3s infinite ease-in-out;
  will-change: opacity;
  z-index: -1;
}

/* Smooth Interactive Footer */
.landing-footer {
  background: linear-gradient(180deg, #0c0318 0%, #030006 100%) !important;
  border-top: 1px solid rgba(168, 85, 247, 0.25) !important;
  position: relative;
}
.landing-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #9333ea, transparent);
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.8);
}

/* Sound Wave Pulse Animation */
@keyframes soundWavePulse {
  0% { transform: scaleY(0.6); opacity: 0.5; }
  50% { transform: scaleY(1.3); opacity: 0.9; }
  100% { transform: scaleY(0.8); opacity: 0.7; }
}
#ai-audio-wave span {
  transform-origin: bottom;
}

/* AI Mode buttons */
.ai-mode-btn {
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
}
.ai-mode-btn:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   PROFESSIONAL CURRICULUM ROADMAP (Clean, High-End Educational Design)
   ========================================================================== */
.curriculum-timeline-wrapper {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

.curriculum-timeline-track {
  position: relative;
  padding-right: 56px;
}

/* Vertical connected line */
.curriculum-timeline-track::before {
  content: '';
  position: absolute;
  top: 36px;
  bottom: 36px;
  right: 21px;
  width: 2px;
  background: linear-gradient(180deg, #38bdf8 0%, #a855f7 50%, #ec4899 100%);
  border-radius: 999px;
  opacity: 0.35;
}

.curriculum-card-item {
  position: relative;
  margin-bottom: 28px;
}
.curriculum-card-item:last-child {
  margin-bottom: 0;
}

/* Timeline step node on the right */
.curriculum-step-node {
  position: absolute;
  top: 24px;
  right: -56px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0f0b1e;
  border: 2px solid var(--node-color, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 0 18px var(--node-glow, rgba(168, 85, 247, 0.4));
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@keyframes nodePulseAnim {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.6); opacity: 0; }
}
.curriculum-card-item:first-child .curriculum-step-node::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--node-glow, rgba(168, 85, 247, 0.4));
  pointer-events: none;
  animation: nodePulseAnim 2s infinite;
  will-change: transform, opacity;
}

.curriculum-card-item:focus-visible .curriculum-month-card {
  outline: 2px solid #a855f7;
  outline-offset: 4px;
}

.curriculum-card-item:hover .curriculum-step-node {
  transform: scale(1.08);
  box-shadow: 0 0 26px var(--node-glow, rgba(168, 85, 247, 0.7));
}

/* Main month card */
.curriculum-month-card {
  background: linear-gradient(180deg, rgba(22, 17, 38, 0.85) 0%, rgba(13, 10, 24, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  padding: 28px 32px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.curriculum-month-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.curriculum-month-card:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 30px rgba(168, 85, 247, 0.15);
}

#curriculum, #features, #home {
  scroll-margin-top: 90px;
}

/* Feature mini boxes inside card */
.curriculum-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.curriculum-feature-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  direction: rtl;
  text-align: right;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.curriculum-month-card:hover .curriculum-feature-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.curriculum-feature-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(168, 85, 247, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c084fc;
  font-size: 15px;
  flex-shrink: 0;
}

/* Card Action / Footer */
.curriculum-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.curriculum-explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c084fc;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 14px;
  transition: color 0.2s, transform 0.2s;
}

.curriculum-month-card:hover .curriculum-explore-btn {
  color: #e9d5ff;
}

.curriculum-explore-btn .arrow-icon {
  transition: transform 0.2s ease;
}

.curriculum-month-card:hover .curriculum-explore-btn .arrow-icon {
  transform: translateX(-8px) scale(1.1);
}

@media (max-width: 900px) {
  .curriculum-features-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 12px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .curriculum-features-grid::-webkit-scrollbar {
    display: none;
  }
  .curriculum-feature-pill {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }
}

@media (max-width: 768px) {
  .curriculum-timeline-track {
    padding-right: 42px;
  }
  .curriculum-timeline-track::before {
    right: 15px;
  }
  .curriculum-step-node {
    right: -42px;
    width: 32px;
    height: 32px;
    font-size: 12px;
    top: 20px;
  }
  .curriculum-month-card {
    padding: 20px 16px;
    border-radius: 18px;
  }
}

#splash-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:99999;background:#0a0614;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 0.8s ease;pointer-events:auto;animation:splashFallback 0.6s ease 3.5s forwards;}
/* Pure-CSS failsafe: even if ALL scripts fail, the splash hides itself. */
@keyframes splashFallback{to{opacity:0;visibility:hidden;pointer-events:none;}
}
#splash-screen.splash-fade{opacity:0;pointer-events:none;}
.splash-logo{font-family:'Space Grotesk', sans-serif;font-size:clamp(28px, 7vw, 56px);font-weight:800;color:#fff;letter-spacing:2px;white-space:nowrap;opacity:0;transform:scale(0.95);animation:splashIn 0.7s ease 0.2s forwards;padding:0 20px;}
.splash-logo em{font-style:italic;font-family:'Lora', serif;color:#c9a8f0;}
@keyframes splashIn{from{opacity:0;transform:scale(0.95);}
to{opacity:1;transform:scale(1);}
}
body.splash-active .view-landing,
body.splash-active .view-platform,
body.splash-active .orb,
body.splash-active #voice-fab{visibility:hidden !important;}
@media (prefers-reduced-motion:reduce){#splash-screen{display:none;}
body.splash-active .view-landing,
body.splash-active .view-platform{visibility:visible !important;}
}

.current-lesson-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(240, 180, 41, 0.4);
  background: linear-gradient(135deg, rgba(59, 7, 100, 0.5), rgba(240, 180, 41, 0.15));
  font-family: 'Tajawal', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #ffe9b0;
  direction: rtl;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(240, 180, 41, 0.2);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.current-lesson-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(240, 180, 41, 0.7);
  box-shadow: 0 0 22px rgba(240, 180, 41, 0.35);
}
@media(max-width:640px){
  .current-lesson-pill { padding: 6px 10px; font-size: 11px; }
}

.se-breadcrumb-bar {
  position: sticky;
  top: var(--se-header-h);
  z-index: 490;
  background: rgba(10, 10, 26, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  padding: 8px 24px;
  direction: rtl;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
@supports (padding:env(safe-area-inset-top)){.se-breadcrumb-bar{top:calc(var(--se-header-h) + env(safe-area-inset-top));}}
.se-breadcrumb-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Tajawal', sans-serif;
  font-size: 12px;
  color: #c4b5fd;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.se-breadcrumb-inner::-webkit-scrollbar { display: none; }
.se-crumb {
  background: none;
  border: none;
  color: #c4b5fd;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.se-crumb:hover {
  color: #fff;
  background: rgba(168, 85, 247, 0.15);
}
.se-crumb.active {
  color: #ffe9b0;
  font-weight: 700;
  cursor: default;
}
.se-crumb.active:hover {
  background: none;
}
.se-crumb-sep {
  color: rgba(168, 85, 247, 0.4);
  font-size: 14px;
  user-select: none;
}
@media(max-width:640px){
  .se-breadcrumb-bar { padding: 6px 14px; }
  .se-breadcrumb-inner { font-size: 11px; gap: 6px; }
}

.nav-progress-pill{display:none;align-items:center;padding:8px 16px;border-radius:9999px;border:1px solid rgba(168,85,247,0.3);background:rgba(59,7,100,0.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-family:'Tajawal',sans-serif;font-size:12px;font-weight:600;color:#e9d5ff;direction:rtl;box-shadow:0 0 16px rgba(168,85,247,0.15);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.dashboard-header-bar .nav-progress-pill{display:flex}
@media(max-width:640px){.nav-progress-pill{padding:6px 12px;font-size:11px}}
/* Explicit, forceful mobile override for the entire welcome card — added
   after repeated reports of a "collapsed vertical text" symptom that
   could not be reproduced from static analysis of the underlying
   Tailwind-class-based responsive layout (flex-col md:flex-row) alone,
   despite that layout appearing structurally sound. Rather than keep
   relying on that analysis, this is a dedicated, high-specificity,
   !important-backed override on purpose-built classes (not shared
   Tailwind utility classes used elsewhere on the page) so it cannot
   silently lose to some other rule's specificity/cascade order. */
@media(max-width:640px){
.hero-welcome-row{display:flex !important;flex-direction:column !important;align-items:center !important;text-align:center !important;gap:16px !important;}
.hero-avatar-text-row{display:flex !important;flex-direction:column !important;align-items:center !important;text-align:center !important;gap:12px !important;width:100% !important;}
.hero-text-col{width:100% !important;min-width:0 !important;flex:1 1 auto !important;white-space:normal !important;word-break:break-word !important;text-align:center !important;}
.hero-avatar-wrap{width:72px !important;height:72px !important;min-width:72px !important;flex-shrink:0 !important;border-radius:20px !important;margin:0 auto !important;}
.hero-avatar-wrap .text-6xl{font-size:32px !important;}
.hero-btn-row{display:flex !important;flex-direction:column !important;width:100% !important;gap:10px !important;}
.hero-btn-row .se-continue-btn,.hero-btn-row .se-dashboard-btn{width:100% !important;text-align:center !important;justify-content:center !important;padding:10px 16px !important;white-space:normal !important;}
}
@media(max-width:1024px){.nav-progress-pill{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}}

.xp-counter-pill{display:none;align-items:center;gap:6px;padding:8px 16px;border-radius:9999px;border:1px solid rgba(240,180,41,0.35);background:rgba(59,7,100,0.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:#ffe9b0;direction:ltr;box-shadow:0 0 16px rgba(240,180,41,0.15);white-space:nowrap;cursor:pointer;transition:background-color 0.2s ease,border-color 0.2s ease;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.dashboard-header-bar .xp-counter-pill{display:flex}
.xp-counter-pill:hover{border-color:rgba(240,180,41,0.6);}
.xp-counter-pill .xp-icon{font-size:13px;}
.xp-counter-pill .xp-label{font-family:'Tajawal',sans-serif;font-weight:700;color:rgba(255,233,176,0.7);font-size:11px;}
.xp-pill-pulse{animation:xpPulse 0.5s ease;}
@keyframes xpPulse{0%{background-color:rgba(59,7,100,0.4);}50%{background-color:rgba(240,180,41,0.25);}100%{background-color:rgba(59,7,100,0.4);}}
@media(max-width:640px){.xp-counter-pill{padding:6px 12px;font-size:11px}}
@media(max-width:1024px){.xp-counter-pill{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}}

.wa-float-btn{position:fixed;bottom:32px;left:32px;z-index:9998;pointer-events:auto !important;cursor:pointer;width:64px;height:64px;border-radius:50%;background:#25D366;display:none;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,0.4);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s;touch-action:manipulation;}
@supports (padding:env(safe-area-inset-bottom)){.wa-float-btn{bottom:calc(32px + env(safe-area-inset-bottom));}}
.wa-float-btn svg{width:32px;height:32px;fill:#fff;}
.wa-float-btn:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(37,211,102,0.55);}
.wa-float-btn:active{transform:scale(0.95);}
body.in-platform .wa-float-btn{display:flex;}
body.quiz-mode .wa-float-btn{display:none;}
@supports (padding:env(safe-area-inset-bottom)){.wa-float-btn{bottom:calc(32px + env(safe-area-inset-bottom));}}
@media(max-width:480px){.wa-float-btn{bottom:20px;left:16px;width:52px;height:52px;}
.wa-float-btn svg{width:26px;height:26px;}
@supports (padding:env(safe-area-inset-bottom)){.wa-float-btn{bottom:calc(20px + env(safe-area-inset-bottom));}}
}
@media(max-height:500px) and (orientation:landscape){.wa-float-btn{width:44px;height:44px;bottom:12px;left:12px;}
.wa-float-btn svg{width:22px;height:22px;}
}
@media print{.wa-float-btn{display:none !important;}
}

.vf-continue-top{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);margin:10px 16px 0;padding:14px 20px;border-radius:16px;border:1px solid rgba(240,180,41,0.4);background:linear-gradient(135deg,rgba(240,180,41,0.16),rgba(71,214,255,0.12));color:#fff;font-family:'Tajawal',sans-serif;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 0 22px rgba(240,180,41,0.25),0 0 40px rgba(71,214,255,0.12);transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.25s;touch-action:manipulation;position:relative;}
.vf-continue-top::after{content:'';position:absolute;inset:-2px;border-radius:18px;pointer-events:none;box-shadow:0 0 32px rgba(240,180,41,0.45),0 0 56px rgba(71,214,255,0.22);animation:vfContinueGlow 2.2s ease-in-out infinite;}
.vf-continue-top:hover{transform:translateY(-2px) scale(1.02);}
.vf-continue-top:active{transform:translateY(0) scale(0.98);}
.vf-continue-top-icon{font-size:17px;filter:drop-shadow(0 0 6px rgba(240,180,41,0.6));}
.vf-continue-top-text{background:linear-gradient(90deg,#ffe9b0,#f0b429,#a5e7ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
@keyframes vfContinueGlow{0%,100%{opacity:0.5;}50%{opacity:1;}}
@media(prefers-reduced-motion:reduce){.vf-continue-top{animation:none}}
/* Bottom mic button softly fades while the top premium prompt is the
   active call-to-action, so there's exactly one obvious thing to press. */
.vf-mic-w.vf-mic-faded{opacity:0.25;pointer-events:none;transition:opacity 0.4s ease;}

.vf-wrap{position:fixed;bottom:32px;right:32px;z-index:9997;transition:opacity 0.3s ease,transform 0.3s ease,visibility 0.3s ease}
/* Explicit guarantee, not a browser-optimization guess: visibility:hidden
   alone doesn't stop a CSS animation's keyframe computation, only its
   paint — animation-play-state:paused forces every continuous animation
   inside this FAB (the glow pulse, the ring) to genuinely stop ticking
   the entire time the voice modal is open, not just become invisible. */
.vf-wrap.vf-hidden *{animation-play-state:paused !important;}
.vf-wrap.vf-hidden{opacity:0;visibility:hidden;transform:scale(0.8);pointer-events:none}
#voice-fab{display:none}
body.in-platform #voice-fab{display:block}
body.quiz-mode #voice-fab{display:none}
.vf-orb{width:72px;height:72px;border-radius:50%;border:1px solid rgba(71,214,255,0.2);background:rgba(71,214,255,0.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;position:relative;transition:all 0.4s cubic-bezier(0.23,1,0.32,1);touch-action:manipulation;}
.vf-orb:hover{transform:scale(1.12);box-shadow:0 0 40px rgba(71,214,255,0.35),0 0 80px rgba(157,78,221,0.25)}
.vf-orb:active{transform:scale(0.92);transition:transform 0.1s ease;}
.vf-orb-icon{color:#a5e7ff;font-size:28px}
.vf-orb-label{font-family:'Tajawal',sans-serif;font-size:9px;font-weight:700;color:rgba(255,255,255,0.5);letter-spacing:1px}
.vf-orb-glow{position:absolute;top:0;left:0;width:72px;height:72px;border-radius:50%;pointer-events:none;box-shadow:0 0 40px rgba(71,214,255,0.3),0 0 80px rgba(157,78,221,0.2);animation:orbGlowPulse 4s ease-in-out infinite;will-change:opacity;}
/* Same breathing-glow pattern as #vf-orb, applied to three more elements —
   reuses the existing orbGlowPulse keyframe (opacity 0→1→0) rather than
   redefining it, and follows the same "separate layer, static box-shadow,
   animate opacity only" structure throughout. */
.hero-avatar-wrap{position:relative;isolation:isolate;}
.hero-avatar-wrap::before{content:'';position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;z-index:-1;pointer-events:none;box-shadow:0 0 32px rgba(168,85,247,0.45),0 0 60px rgba(124,58,237,0.25);animation:orbGlowPulse 4s ease-in-out infinite;will-change:opacity;}
@media(prefers-reduced-motion:reduce){.hero-avatar-wrap::before,.vf-mic::after,.platform-avatar-glow{animation:none;opacity:0.6}}
.vf-mic{position:relative;}
.vf-mic::after{content:'';position:absolute;inset:-2px;border-radius:50%;pointer-events:none;box-shadow:0 0 28px rgba(168,132,224,0.4),0 0 50px rgba(124,77,204,0.25);animation:orbGlowPulse 4s ease-in-out infinite;will-change:opacity;}
.platform-avatar-glow{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 50px rgba(168,85,247,0.5),0 0 90px rgba(124,58,237,0.3);animation:orbGlowPulse 4s ease-in-out infinite;will-change:opacity;}
@keyframes orbGlowPulse{0%,100%{opacity:0}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.vf-orb-glow{animation:none;opacity:0.6}}
.vf-orb-ring{position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(71,214,255,0.15);animation:orbRing 3s ease-out infinite;pointer-events:none}
/* ===== Mascot: neutral 3D AI companion orb =====
   Matte dark sphere (radial-gradient, not a flat fill, to read as subtly
   3D) + a single warm lavender soundwave line — no facial features, no
   gendered cues, entirely abstract/non-human. Used identically wherever
   an "avatar" appeared before (#vf-orb, .vf-fb-avatar, the hero mascot
   below) so the same visual language shows up consistently everywhere. */
.mascot-face{position:relative;}
.mascot-wave-line{
filter:drop-shadow(0 0 4px rgba(201,168,240,0.7));
transform-origin:center;
animation:mascotWavePulse 2.6s ease-in-out infinite;
}
@keyframes mascotWavePulse{
0%,100%{opacity:0.75;transform:scaleY(0.85);}
50%{opacity:1;transform:scaleY(1.08);}
}
@media(prefers-reduced-motion:reduce){.mascot-wave-line{animation:none!important;}}
.vf-orb-ring-2{animation-delay:1.5s}
@keyframes orbRing{0%{transform:scale(1);opacity:0.5}
100%{transform:scale(1.8);opacity:0}
}
.vf-overlay{position:fixed;inset:0;z-index:99998;background:rgba(5,2,15,0.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity 0.35s ease,visibility 0.35s ease;overflow-y:auto;}
.vf-overlay.vf-modal-open{opacity:1;visibility:visible}
/* Explicit guarantee, same lesson as .vf-wrap.vf-hidden's fix: visibility:
   hidden alone doesn't stop a CSS animation from ticking, only its paint —
   this forces the mic glow to genuinely stop computing the entire time the
   call modal is closed, not just become invisible. */
.vf-overlay:not(.vf-modal-open) .vf-mic::after{animation-play-state:paused !important;}
.vf-panel{width:400px;max-width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;background:rgba(10, 2, 20, 0.92);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.12);border-radius:24px;box-shadow:0 24px 80px rgba(10,5,30,0.7),0 0 50px rgba(157,78,221,0.15);transform:translateY(20px) scale(0.94);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);margin:auto;scrollbar-width:thin;scrollbar-color:rgba(168,85,247,0.4) transparent;}

/* ===== Sticky floating audio widget (minimized call state) ===== */
.vf-floating-bar{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 8px;max-width:min(320px,calc(100vw - 32px));background:rgba(18,10,32,0.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(167,139,250,0.28);border-radius:999px;box-shadow:0 10px 34px rgba(0,0,0,0.45),0 0 30px rgba(157,78,221,0.18);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(24px) scale(0.9);transition:opacity 0.35s cubic-bezier(0.34,1.56,0.64,1),transform 0.35s cubic-bezier(0.34,1.56,0.64,1),visibility 0.35s;touch-action:manipulation;}
.vf-floating-bar.vf-floating-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
@supports (padding:env(safe-area-inset-bottom)){.vf-floating-bar{bottom:calc(24px + env(safe-area-inset-bottom));}}
.vf-fb-avatar{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:rgba(71,214,255,0.12);border:1px solid rgba(71,214,255,0.25);display:flex;align-items:center;justify-content:center;color:#a5e7ff;font-size:20px}
.vf-fb-wave{flex-shrink:0;display:flex;align-items:center;gap:3px;height:22px;padding:0 2px}
.vf-fb-wave i{display:block;width:3px;border-radius:3px;background:linear-gradient(180deg,#a5e7ff,#9d4edd);height:18px;transform-origin:bottom;transform:scaleY(0.28);animation:vfFbWave 1.1s ease-in-out infinite;animation-play-state:paused;opacity:0.55}
.vf-fb-wave i:nth-child(1){animation-delay:0s}
.vf-fb-wave i:nth-child(2){animation-delay:0.15s}
.vf-fb-wave i:nth-child(3){animation-delay:0.3s}
.vf-fb-wave i:nth-child(4){animation-delay:0.45s}
@keyframes vfFbWave{0%,100%{transform:scaleY(0.28)}50%{transform:scaleY(1)}}
.vf-floating-bar.vf-fb-recording .vf-fb-wave i,.vf-floating-bar.vf-fb-speaking .vf-fb-wave i{animation-play-state:running;opacity:1;will-change:transform}
.vf-floating-bar.vf-fb-waiting .vf-fb-avatar{animation:vfFbPulse 0.9s ease-in-out infinite}
@keyframes vfFbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.vf-floating-bar.vf-fb-idle .vf-fb-wave i{opacity:0.25}
.vf-fb-info{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25;overflow:hidden}
.vf-fb-name{display:none}
.vf-fb-status{font-family:'Tajawal',sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,0.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-fb-btn{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.2s,background 0.2s;font-size:18px;touch-action:manipulation}
.vf-fb-btn:hover{transform:scale(1.08)}
.vf-fb-btn:active{transform:scale(0.94)}
.vf-fb-mute{background:rgba(255,255,255,0.08);color:#e2e2e2}
.vf-fb-mute.vf-fb-muted{background:rgba(255,180,171,0.15);color:#ffb4ab}
.vf-fb-end{background:#d94f4f;color:#fff}
.vf-fb-end:hover{background:#c23f3f}
@media(max-width:480px){.vf-floating-bar{bottom:16px;right:14px;padding:7px 8px 7px 7px;gap:8px}
.vf-fb-avatar{width:34px;height:34px;font-size:18px}
.vf-fb-btn{width:44px;height:44px;font-size:19px}
.vf-fb-status{font-size:10px}
}
@media(max-width:360px){.vf-fb-info{display:none}
.vf-floating-bar{padding:7px}
}
@media(prefers-reduced-motion:reduce){.vf-fb-wave i,.vf-floating-bar.vf-fb-waiting .vf-fb-avatar{animation:none!important}
}

.vf-overlay.vf-modal-open .vf-panel{transform:translateY(0) scale(1)}
.vf-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 16px;border-bottom:1px solid rgba(255,255,255,0.06)}
.vf-brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:'Tajawal',sans-serif}
.vf-dot{width:8px;height:8px;border-radius:50%;background:#b794f4;box-shadow:0 0 8px #b794f4}
.vf-nm{font-weight:700;font-size:17px}
.vf-brand small{font-size:10px;color:rgba(255,255,255,0.3);margin-right:6px;font-family:'Space Mono',monospace;letter-spacing:1px}
.vf-x{background:rgba(255,255,255,0.06);border:none;color:rgba(255,255,255,0.4);width:32px;height:32px;border-radius:10px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.vf-x:hover{background:rgba(255,255,255,0.12);color:#fff}
.vf-state{display:flex;align-items:center;gap:8px;padding:10px 20px;font-family:'Space Mono',monospace;font-size:10px;color:rgba(255,255,255,0.35);direction:rtl;letter-spacing:1px}
.vf-st-dot{width:6px;height:6px;border-radius:50%;background:#555;transition:background 0.3s}
.vf-st-dot.st-active{background:#b794f4;box-shadow:0 0 8px #b794f4}
.vf-st-dot.st-connecting{background:#f0b429;box-shadow:0 0 8px #f0b429;animation:vfDotPulse 1s ease-in-out infinite}
@keyframes vfDotPulse{0%,100%{opacity:1}50%{opacity:0.35}}
.vf-mini-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;animation:vfMiniSpin 0.7s linear infinite}
@keyframes vfMiniSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.vf-st-dot.st-connecting{animation:none}}
/* Lightweight CSS-only call-status badge — replaces the old WebGL wave's
   CSS entirely. Standard opacity-only @keyframes pulse, no canvas, no
   GPU/shader cost of any kind. */
.vf-survival-chips{max-width:600px;margin:14px auto 0;padding:0 20px;}
.vf-survival-label{font-family:'Tajawal',sans-serif;font-size:12px;font-weight:700;color:rgba(255,255,255,0.55);margin-bottom:8px;text-align:center;}
.vf-survival-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.vf-survival-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9999px;border:1px solid rgba(168,132,224,0.3);background:rgba(124,77,204,0.1);color:#e9d5ff;font-family:'Tajawal',sans-serif;font-size:12px;font-weight:600;cursor:pointer;direction:rtl;transition:background-color 0.2s ease,border-color 0.2s ease,transform 0.15s ease;}
.vf-survival-chip:hover{background:rgba(168,85,247,0.18);border-color:rgba(192,132,252,0.5);transform:translateY(-1px);}
.vf-survival-chip:active{transform:translateY(0) scale(0.97);}
.vf-survival-play{font-size:12px;opacity:0.85;flex-shrink:0;}
@media(max-width:600px){.vf-survival-chip{padding:7px 11px;font-size:11px;}}
/* ===== Lightweight 5-bar soundwave visualizer (replaces the 4 heavy
   colored "blob" divs — box-shadow:0 0 20px/25px currentColor on 4
   independently-animating elements was genuinely expensive to paint
   continuously). Pure transform:scaleY() + will-change, zero filters,
   zero box-shadow. Reuses the EXISTING .vf-status-active class/toggle
   (setWaveActive()) as its only activity gate — no new JS needed: bars
   sit idle (a calm, non-animated resting height) whenever disconnected,
   and only animate while a call is actually active. */
.vf-sw-bar{
width:5px;
height:18px;
border-radius:999px;
background:linear-gradient(180deg,#c9a8f0,#38bdf8);
will-change:transform;
transform:scaleY(0.45);
transform-origin:center;
transition:transform 0.2s ease;
}
.vf-status-display.vf-status-active .vf-sw-bar{
animation:vfSoundwavePulse 1s ease-in-out infinite;
}
.vf-status-display.vf-status-active .vf-sw-bar:nth-child(1){animation-delay:0s;}
.vf-status-display.vf-status-active .vf-sw-bar:nth-child(2){animation-delay:0.12s;}
.vf-status-display.vf-status-active .vf-sw-bar:nth-child(3){animation-delay:0.24s;}
.vf-status-display.vf-status-active .vf-sw-bar:nth-child(4){animation-delay:0.36s;}
.vf-status-display.vf-status-active .vf-sw-bar:nth-child(5){animation-delay:0.48s;}
@keyframes vfSoundwavePulse{
0%,100%{transform:scaleY(0.4);}
50%{transform:scaleY(1);}
}
@media(prefers-reduced-motion:reduce){.vf-status-display.vf-status-active .vf-sw-bar{animation:none!important;}}
.vf-status-display{display:flex;align-items:center;gap:10px;margin:0 16px 16px;padding:14px 18px;border-radius:16px;background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.06);}
.vf-status-dot{width:12px;height:12px;border-radius:50%;background:rgba(120,120,120,0.5);flex-shrink:0;transition:background-color 0.3s ease;}
.vf-status-display.vf-status-active .vf-status-dot{background:#22c55e;animation:vfStatusPulse 1.6s ease-in-out infinite;}
.vf-status-text{font-family:'Space Mono',monospace;font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:1px;text-transform:uppercase;transition:color 0.3s ease;}
.vf-status-display.vf-status-active .vf-status-text{color:rgba(34,197,94,0.9);}
@keyframes vfStatusPulse{0%,100%{opacity:1}50%{opacity:0.35}}
@media(prefers-reduced-motion:reduce){.vf-status-display.vf-status-active .vf-status-dot{animation:none}}
.vf-sec{padding:14px 20px}
.vf-lbl{font-family:'Space Mono',monospace;font-size:10px;color:rgba(255,255,255,0.3);direction:rtl;margin-bottom:10px;letter-spacing:2px;text-transform:uppercase}
.vf-age-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.vf-age{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 4px 10px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.5);font-family:'Tajawal',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.3s;touch-action:manipulation}
.vf-age span{font-size:24px}
.vf-age:hover{border-color:rgba(71,214,255,0.3);background:rgba(71,214,255,0.05)}
.vf-age.vf-age-on{border-color:rgba(71,214,255,0.4);background:rgba(71,214,255,0.08);color:#a5e7ff;box-shadow:0 0 15px rgba(71,214,255,0.1)}
.vf-scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vf-scenario{padding:8px 6px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.5);font-family:'Tajawal',sans-serif;font-size:10px;font-weight:600;cursor:pointer;transition:all 0.3s;touch-action:manipulation;text-align:center;direction:rtl}
.vf-scenario:hover{border-color:rgba(71,214,255,0.3);background:rgba(71,214,255,0.05)}
.vf-scenario.vf-scenario-on{border-color:rgba(71,214,255,0.4);background:rgba(71,214,255,0.08);color:#a5e7ff;box-shadow:0 0 12px rgba(71,214,255,0.1)}
@media(max-width:480px){.vf-scenario-grid{grid-template-columns:repeat(2,1fr)}}
.vf-tone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vf-tone{padding:8px 6px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.5);font-family:'Tajawal',sans-serif;font-size:10px;font-weight:600;cursor:pointer;transition:background-color 0.25s ease,border-color 0.25s ease,color 0.25s ease;touch-action:manipulation;text-align:center;direction:rtl}
.vf-tone:hover{border-color:rgba(167,139,250,0.3);background:rgba(167,139,250,0.05)}
.vf-tone.vf-tone-on[data-tone="normal"]{border-color:rgba(71,214,255,0.4);background:rgba(71,214,255,0.08);color:#a5e7ff;box-shadow:0 0 12px rgba(71,214,255,0.1)}
.vf-tone.vf-tone-on[data-tone="angry"]{border-color:rgba(248,113,113,0.45);background:rgba(248,113,113,0.1);color:#fca5a5;box-shadow:0 0 12px rgba(248,113,113,0.12)}
.vf-tone.vf-tone-on[data-tone="caring"]{border-color:rgba(244,114,182,0.4);background:rgba(244,114,182,0.1);color:#f9a8d4;box-shadow:0 0 12px rgba(244,114,182,0.12)}
@media(max-width:600px){.vf-tone{padding:7px 4px;font-size:9px}}
.vf-sts{text-align:center;font-family:'Tajawal',sans-serif;font-size:13px;color:rgba(255,255,255,0.35);padding:8px 20px;direction:rtl;min-height:22px;transition:color 0.3s}
/* Rigid turn-state text ("دورك — تحدث الآن" / "Alexa تفكر..." / "تتحدث...")
   hidden by design — replaced by the continuous organic orb glow below.
   The element/class-toggle logic is untouched (vfSetStatus() still runs
   exactly as before), only these three specific states render invisible;
   error/warning states stay fully visible since those are genuine
   diagnostic information, not turn-orchestration UI. */
.vf-sts.st-l,.vf-sts.st-s,.vf-sts.st-thinking{opacity:0;height:0;padding:0;min-height:0;overflow:hidden;}
.vf-sts.st-l{color:#a5e7ff}
.vf-sts.st-s{color:#b794f4}
.vf-sts.st-thinking{color:#e0b6ff}
.vf-sts.st-error{color:#fca5a5;font-weight:700;background:rgba(248,113,113,0.08);border-radius:10px;margin:0 12px;}
.vf-sts.st-warn{color:#fcd34d;font-weight:700;background:rgba(252,211,77,0.08);border-radius:10px;margin:0 12px;}
.vf-thinking-dots{display:inline-flex;gap:4px;margin-right:6px;vertical-align:middle}
.vf-thinking-dots span{width:6px;height:6px;border-radius:50%;background:#e0b6ff;animation:thinkPulse 1.4s ease-in-out infinite}
.vf-thinking-dots span:nth-child(2){animation-delay:0.2s}
.vf-thinking-dots span:nth-child(3){animation-delay:0.4s}
@keyframes thinkPulse{0%,80%,100%{opacity:0.3;transform:scale(0.8)}
40%{opacity:1;transform:scale(1.2)}
}
.vf-mic-w{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 0 10px;position:relative}

/* Start Conversation button (iOS AudioContext unlock) */
.vf-start-w{display:flex;justify-content:center;padding:16px 20px 10px}
.vf-start-btn{display:flex;align-items:center;gap:10px;padding:14px 28px;border-radius:16px;border:1px solid rgba(71,214,255,0.3);background:rgba(71,214,255,0.08);color:#a5e7ff;font-family:'Tajawal',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all 0.3s;touch-action:manipulation;direction:rtl}
.vf-start-btn:hover{background:rgba(71,214,255,0.15);box-shadow:0 0 24px rgba(71,214,255,0.2);transform:translateY(-2px)}
.vf-start-btn:active{transform:scale(0.97)}

/* Mic recording ring indicator */
.vf-mic-ring{position:absolute;width:80px;height:80px;border-radius:50%;border:2px solid transparent;transition:all 0.3s;pointer-events:none;will-change:transform;}
.vf-mic-ring.ring-recording{border-color:rgba(192,132,252,0.5);animation:micRingPulse 1.5s ease-in-out infinite}
.vf-mic-ring.ring-waiting{border-color:rgba(192,132,252,0.4);animation:micRingSlow 2.5s ease-in-out infinite}
@keyframes micRingPulse{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.15);opacity:1}}
@keyframes micRingSlow{0%,100%{transform:scale(1);opacity:0.3}50%{transform:scale(1.08);opacity:0.6}}

/* Mic label */
.vf-mic-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.vf-mic-label.lbl-recording{color:#ef4444}
.vf-mic-label.lbl-waiting{color:#b794f4}
.vf-mic-label.lbl-paused{color:#f0b429;font-weight:700;}
.vf-mic{width:68px;height:68px;border-radius:50%;border:1px solid rgba(168,132,224,0.25);background:rgba(124,77,204,0.1);color:var(--brand-300);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(168,132,224,0.15);transition:all 0.3s;touch-action:manipulation}
.vf-mic:hover{transform:scale(1.08);box-shadow:0 0 36px rgba(71,214,255,0.25);border-color:rgba(71,214,255,0.4)}
.vf-mic.vf-rec{background:rgba(168,132,224,0.14);border-color:rgba(192,132,252,0.45);color:#c084fc;box-shadow:0 0 28px rgba(168,85,247,0.25);animation:vfp 1.2s ease-in-out infinite;will-change:transform;}
@keyframes vfp{0%,100%{transform:scale(1)}
50%{transform:scale(1.06)}
}
.vf-tr{max-height:240px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 20px;margin-top:8px;font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;line-height:1.5;color:rgba(255,255,255,0.9);direction:rtl;scrollbar-width:thin;text-align:center;text-shadow: 0 2px 10px rgba(0,0,0,0.5);word-wrap:break-word;overflow-wrap:break-word;
/* RESTORED (reversing a prior "clean focus display" change): the full
   conversational transcript — Alexa's greetings, Arabic micro-
   explanations, and instructions — is visible again in the main call
   view, per an explicit later request to combine it with the separate
   highlighted target box below (#vf-word-display) rather than replace
   it. This container was already always fully populated by JS
   regardless of visibility (vfUpsertLiveAiLine()/vfFinalizeAiTurn()
   etc. don't know or care whether it's shown) — _vfHistory tracking and
   the session replay feature were never affected either way; only the
   CSS display toggled between these two requests. */
}
.vf-tr-l{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,0.03);display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;position:relative;word-wrap:break-word;overflow-wrap:break-word;min-width:0;}
.vf-tr-u{color:#a5e7ff}
.vf-tr-a{color:#b794f4}
.vf-tr-btn{background:none;border:none;cursor:pointer;font-size:11px;padding:2px 4px;opacity:0.4;transition:opacity 0.2s;flex-shrink:0}
.vf-tr-btn:hover{opacity:1}
.vf-utils{display:flex;justify-content:center;gap:8px;padding:6px 20px 10px}
.vf-util-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.5);font-family:'Tajawal',sans-serif;cursor:pointer;transition:all 0.3s;touch-action:manipulation}
.vf-util-btn span{font-size:18px}
.vf-util-btn small{font-size:9px;font-weight:600}
.vf-util-btn:hover{border-color:rgba(71,214,255,0.3);background:rgba(71,214,255,0.05);color:#a5e7ff}
.vf-util-btn:active{transform:scale(0.95)}
.vf-hints{padding:8px 20px 6px;direction:rtl}
.vf-hints-label{font-family:'Tajawal',sans-serif;font-size:10px;color:rgba(224,182,255,0.6);margin-bottom:6px;font-weight:600}
.vf-hints-grid{display:flex;flex-wrap:wrap;gap:6px}
.vf-hint-chip{padding:6px 12px;border-radius:20px;border:1px solid rgba(71,214,255,0.2);background:rgba(71,214,255,0.05);color:#a5e7ff;font-family:'Geist',sans-serif;font-size:11px;cursor:pointer;transition:all 0.2s;direction:ltr;touch-action:manipulation}
.vf-hint-chip:hover{background:rgba(71,214,255,0.12);border-color:rgba(71,214,255,0.4)}
.vf-hint-chip:active{transform:scale(0.95)}
@media(max-width:480px){.vf-wrap{bottom:20px;right:16px}
.vf-orb{width:60px;height:60px}
.vf-orb-icon{font-size:24px}
.vf-panel{width:calc(100vw - 32px);border-radius:20px}
}
@media(prefers-reduced-motion:reduce){.vf-orb,.vf-orb-ring{animation:none}
}
@media print{.vf-wrap,.vf-overlay,.vf-floating-bar{display:none!important}
}

/* ===== CRASH PREVENTION (mobile/tablet GPU compositing) =====
   backdrop-filter is a genuinely expensive real-time GPU compositing
   effect, and its cost scales very badly with how many blurred layers are
   on screen AT ONCE — not with how big they are. All 36 lesson cards (plus
   ~10 glass-panel sections, zone headers, stat pills, nav items...) apply
   backdrop-filter simultaneously the moment the platform/roadmap renders.
   This is a well-documented cause of full tab / GPU-process crashes on
   mobile Safari (iOS) and some Android Chrome versions — desktop GPUs have
   enough headroom to absorb it, mobile GPUs often don't. Below the
   tablet/desktop boundary we replace the blur with a plain solid dark
   background (visually very close) and drop it entirely, eliminating the
   real-time compositing cost on exactly the devices where it was crashing.
   Only single, one-off panels (voice widget/orb/overlay) keep their blur
   everywhere, since ONE blurred layer is cheap on any device. */
@media (max-width:1024px){
.rm-path .lesson-card,.lesson-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:rgba(20,14,36,0.92) !important;}
.glass-panel{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:rgba(20,14,36,0.85) !important;}
.rm-zone-header{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.cover-stat{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.smart-back-btn{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.rm-gate-btn{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.welcome-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.verb-card,.alpha-tile,.land-stat,.story-card,.exam-card,.quiz-block,.scoreboard-card,.alert{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:rgba(20,14,36,0.9) !important;}
/* Simultaneous entrance animation across many cards at once is itself GPU
   work; keep it, but instant instead of animated on mobile removes one
   more source of many-elements-repainting-at-once cost right when a zone
   (12 lessons) first opens. */
.rm-zone.zone-open .rm-zone-body .lesson-card{animation:none !important;}
}

/* ===== Modals System ===== */
body.modal-open {
  overflow: hidden !important;
}

.badges-modal-overlay,
.se-auth-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(4, 1, 12, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.badges-modal-overlay.show,
.se-auth-modal-overlay.show {
  display: flex !important;
}

.badges-modal-box,
.se-auth-modal-box {
  position: relative !important;
  background: linear-gradient(180deg, #170c2d 0%, #0d041a 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 24px !important;
  padding: 24px !important;
  width: 100% !important;
  margin: auto !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 50px rgba(157, 78, 221, 0.3) !important;
  direction: rtl !important;
  max-height: min(88vh, 88dvh, 620px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.4) transparent;
  animation: modalPopIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalPopIn {
  0% { opacity: 0; transform: scale(0.92) translateY(16px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.badges-modal-box { max-width: 520px !important; }
.se-auth-modal-box { max-width: 420px !important; }

/* Custom Sleek Scrollbar */
.badges-modal-box::-webkit-scrollbar,
.se-auth-modal-box::-webkit-scrollbar {
  width: 5px;
}
.badges-modal-box::-webkit-scrollbar-track,
.se-auth-modal-box::-webkit-scrollbar-track {
  background: transparent;
}
.badges-modal-box::-webkit-scrollbar-thumb,
.se-auth-modal-box::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.4);
  border-radius: 999px;
}

/* Modal Sticky Headers */
.badges-modal-header,
.se-auth-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: -24px;
  background: #170c2d;
  margin-top: -24px;
  padding-top: 24px;
  z-index: 10;
}

.badges-modal-header h3,
.se-auth-modal-header h3 {
  font-family: 'Tajawal', sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

.badges-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* ===== Full Student Dashboard ===== */
.se-dashboard-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(4, 1, 12, 0.9) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
.se-dashboard-overlay.show { display: flex !important; }
.se-dashboard-box {
  position: relative !important;
  background: linear-gradient(180deg, #170c2d 0%, #0a0212 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 26px !important;
  padding: 22px !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: auto !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 60px rgba(157, 78, 221, 0.3) !important;
  direction: rtl !important;
  max-height: min(92vh, 92dvh, 780px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.4) transparent;
  animation: modalPopIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.se-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: -22px;
  background: #170c2d;
  margin-top: -22px;
  padding-top: 22px;
  z-index: 10;
}
.se-dashboard-header h2 { font-family: 'Tajawal', sans-serif; color: #fff; font-size: 20px; font-weight: 800; margin: 0; }
.se-dashboard-body { display: flex; flex-direction: column; gap: 16px; }
.se-dash-module {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 18px;
  padding: 18px;
}
.se-dash-module-title {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Tajawal', sans-serif; font-size: 14px; font-weight: 800; color: #e9d5ff;
  margin-bottom: 14px;
}
/* Module A: Hero & Analytics */
.se-dash-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  text-align: center;
}
@media (max-width: 520px) { .se-dash-hero { grid-template-columns: 1fr; } }
.se-dash-hero-num { font-family: 'Space Grotesk', sans-serif; font-size: 34px; font-weight: 800; color: #c9a8f0; line-height: 1; }
.se-dash-hero-label { font-family: 'Tajawal', sans-serif; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 6px; }
.se-dash-ring-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.se-dash-ring { width: 96px; height: 96px; transform: rotate(-90deg); }
.se-dash-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 8; }
.se-dash-ring-fg { fill: none; stroke: #c084fc; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; filter: drop-shadow(0 0 4px rgba(192,132,252,0.6)); transition: stroke-dashoffset 0.8s cubic-bezier(0.34,1.56,0.64,1); }
.se-dash-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.se-dash-ring-text span { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 800; color: #fff; }
.se-dash-ring-text small { font-family: 'Tajawal', sans-serif; font-size: 9px; color: rgba(255,255,255,0.5); }
.se-dash-level-badge {
  background: linear-gradient(135deg, rgba(124,77,204,0.3), rgba(168,85,247,0.15));
  border: 1px solid rgba(192,132,252,0.4);
  border-radius: 14px; padding: 10px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.se-dash-level-badge span { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 800; color: #f3e8ff; }
.se-dash-level-badge small { font-family: 'Tajawal', sans-serif; font-size: 10px; color: rgba(255,255,255,0.6); }
/* Module B: Mastery & Struggle Words */
.se-dash-mastered-count { font-family: 'Tajawal', sans-serif; font-size: 13px; color: rgba(255,255,255,0.75); margin-bottom: 12px; }
.se-dash-mastered-count strong { color: #4ade80; font-size: 16px; }
.se-dash-struggle-label { font-family: 'Tajawal', sans-serif; font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.se-dash-struggle-list { display: flex; flex-direction: column; gap: 8px; }
.se-dash-struggle-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.2);
  border-radius: 12px; padding: 10px 12px; flex-wrap: wrap;
}
.se-dash-struggle-word { display: flex; align-items: center; gap: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: #fca5a5; direction: ltr; cursor: pointer; }
.se-dash-struggle-play { width: 26px; height: 26px; border-radius: 50%; background: rgba(248,113,113,0.15); border: 1px solid rgba(248,113,113,0.3); color: #fca5a5; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.se-dash-struggle-review-btn {
  font-family: 'Tajawal', sans-serif; font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7); border: none; border-radius: 9999px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
}
.se-dash-struggle-empty { font-family: 'Tajawal', sans-serif; font-size: 13px; color: #4ade80; text-align: center; padding: 10px; }
/* Module C: Curriculum Map */
.se-dash-month-map { display: flex; flex-direction: column; gap: 12px; }
.se-dash-month-row { display: flex; align-items: center; gap: 12px; }
.se-dash-month-label { font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.8); flex: 0 0 90px; }
.se-dash-month-bar-track { flex: 1 1 auto; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.se-dash-month-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #c084fc); transition: width 0.6s ease; }
.se-dash-month-count { font-family: 'Space Grotesk', sans-serif; font-size: 11px; color: rgba(255,255,255,0.6); flex: 0 0 48px; text-align: left; direction: ltr; }
.se-dash-month-story { font-size: 13px; flex: 0 0 20px; text-align: center; }
/* Module D: Badges Wall */
.se-dash-badges-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.se-dash-badge-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 14px; text-align: center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
}
.se-dash-badge-tile.unlocked {
  background: linear-gradient(160deg, rgba(168,85,247,0.18), rgba(124,77,204,0.08));
  border: 1px solid rgba(192,132,252,0.5);
  box-shadow: 0 0 18px rgba(168,85,247,0.25);
}
.se-dash-badge-tile.locked { opacity: 0.35; filter: grayscale(1); }
.se-dash-badge-icon { font-size: 26px; }
.se-dash-badge-name { font-family: 'Tajawal', sans-serif; font-size: 10px; font-weight: 700; color: #fff; line-height: 1.3; }
.phonetic-pairs-grid { display: flex; flex-direction: column; gap: 8px; }
.phonetic-pair-row { display: flex; gap: 10px; }
.phonetic-pair-word { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border-radius: 12px; border: 1px solid rgba(168,132,224,0.25); background: rgba(255,255,255,0.03); color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; cursor: pointer; direction: ltr; transition: background-color 0.2s ease, border-color 0.2s ease; }
.phonetic-pair-word:hover { background: rgba(168,85,247,0.12); border-color: rgba(192,132,252,0.5); }
.phonetic-pair-play { font-size: 14px; opacity: 0.8; }
.se-dash-practice-cta{width:100%;padding:15px;border-radius:16px;border:none;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-family:'Tajawal',sans-serif;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 0 28px rgba(168,85,247,0.4);transition:transform 0.2s ease,box-shadow 0.2s ease;}
.se-dash-practice-cta:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(168,85,247,0.6);}

.badges-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
  transform: rotate(90deg);
}

/* Badges Grid & Cards */
.badges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.badge-card {
  padding: 16px 12px;
  border-radius: 16px;
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s;
}

.badge-card:hover {
  transform: translateY(-3px);
}

.badge-icon {
  font-size: 34px;
  margin-bottom: 6px;
}

.badge-name {
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}

.badge-desc {
  font-family: 'Tajawal', sans-serif;
  font-size: 11px;
  opacity: 0.75;
}

.badge-locked {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  filter: grayscale(1);
  opacity: 0.45;
}

.badge-locked .badge-name,
.badge-locked .badge-desc {
  color: #9ca3af;
}

.badge-unlocked {
  background: linear-gradient(135deg, rgba(240, 180, 41, 0.16), rgba(157, 78, 221, 0.16));
  border: 1px solid rgba(240, 180, 41, 0.4);
  box-shadow: 0 0 24px rgba(240, 180, 41, 0.2);
}

.badge-unlocked .badge-name {
  color: #ffe9b0;
}

.badge-unlocked .badge-desc {
  color: #e9d5ff;
}

/* Auth Modal Content Styles */
.se-auth-hint {
  font-family: 'Tajawal', sans-serif;
  font-size: 12px;
  color: #c4b5fd;
  line-height: 1.6;
  margin: 0 0 16px;
}

.se-auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: 'Tajawal', sans-serif;
  font-size: 13px;
  transition: border-color 0.2s;
}

.se-auth-input:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.6);
  background: rgba(255, 255, 255, 0.07);
}

.se-auth-error {
  font-family: 'Tajawal', sans-serif;
  font-size: 12px;
  color: #f87171;
  margin-bottom: 10px;
  line-height: 1.6;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.se-auth-btn {
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: none;
  font-family: 'Tajawal', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.se-auth-btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.se-auth-btn-primary:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.se-auth-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #e9d5ff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.se-auth-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(168, 85, 247, 0.4);
}

.se-auth-divider {
  text-align: center;
  font-family: 'Tajawal', sans-serif;
  font-size: 11px;
  color: #9ca3af;
  margin: 10px 0 14px;
  position: relative;
}

.se-auth-divider::before,
.se-auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.se-auth-divider::before { right: 0; }
.se-auth-divider::after { left: 0; }

.se-auth-btn-google {
  background: #fff;
  color: #1f1f1f;
}

/* Landscape and Small Viewports Max Height Protection */
@media (max-height: 540px) {
  .badges-modal-overlay,
  .se-auth-modal-overlay {
    padding: 8px !important;
    align-items: flex-start !important;
  }
  .badges-modal-box,
  .se-auth-modal-box {
    padding: 16px !important;
    border-radius: 18px !important;
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  .badges-modal-header,
  .se-auth-modal-header {
    top: -16px !important;
    margin-top: -16px !important;
    padding-top: 16px !important;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 480px) {
  .badges-modal-overlay,
  .se-auth-modal-overlay {
    padding: 10px !important;
  }
  .badges-modal-box,
  .se-auth-modal-box {
    padding: 18px 14px !important;
    border-radius: 20px !important;
  }
  .badges-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

.rm-zone-progress-badge {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  margin-left: 0;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #ffe9b0;
  font-family: 'Tajawal', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.15);
}

.lesson-card.is-current-lesson {
  border-color: rgba(240, 180, 41, 0.6) !important;
  box-shadow: 0 0 25px rgba(240, 180, 41, 0.25), 0 0 50px rgba(168, 85, 247, 0.2) !important;
  position: relative;
}
.lesson-card.is-current-lesson::before {
  content: 'أنت هنا';
  position: absolute;
  top: -10px;
  left: 20px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  font-family: 'Tajawal', sans-serif;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
  z-index: 5;
}