@import "https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap";:root{--ink:#eaf9ff;--muted:#a7bdc8;--navy:#061525;--navy-2:#0a2034;--panel:#0b273bb8;--cyan:#47e7d1;--cyan-2:#78f8e9;--blue:#42a5ff;--warning:#ff4f65;--yellow:#ffd166;--line:#7ddce730;--shadow:0 28px 80px #00000057}*{box-sizing:border-box}html{background:var(--navy);min-height:100%}body{min-height:100vh;color:var(--ink);background:linear-gradient(#47e7d106 1px,#0000 1px) 0 0/42px 42px,linear-gradient(90deg,#47e7d106 1px,#0000 1px) 0 0/42px 42px,radial-gradient(circle at 85% 10%,#123a53 0,#0000 38%),linear-gradient(145deg,#061525 0%,#071927 52%,#04111d 100%);margin:0;font-family:Tajawal,system-ui,sans-serif;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}.ambient{filter:blur(100px);opacity:.12;pointer-events:none;border-radius:50%;width:26rem;height:26rem;position:fixed}.ambient-one{background:var(--cyan);top:-12rem;right:-10rem}.ambient-two{background:var(--blue);bottom:-16rem;left:-10rem}.topbar{border-bottom:1px solid var(--line);z-index:2;justify-content:space-between;align-items:center;gap:24px;width:min(1120px,100% - 40px);min-height:88px;margin:0 auto;display:flex;position:relative}.brand{align-items:center;gap:12px;display:flex}.brand-mark{background:#47e7d11a;border:1px solid #47e7d147;border-radius:14px;place-items:center;width:45px;height:45px;display:grid}.brand-mark svg{fill:none;width:31px;stroke:var(--cyan);stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round}.brand b{font-size:1.25rem;display:block}.brand small{color:var(--muted);margin-top:2px;font-size:.78rem;display:block}.school{color:var(--muted);font-size:.92rem}.school span{color:var(--cyan);padding:0 7px}.shell{z-index:1;width:min(1120px,100% - 40px);margin:0 auto;position:relative}.screen{align-items:center;min-height:calc(100vh - 145px);padding:58px 0 46px;display:none}.screen.active{animation:.5s both reveal;display:flex}@keyframes reveal{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.welcome-layout{grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(42px,7vw,100px);width:100%;display:grid}.eyebrow{color:var(--cyan);letter-spacing:.06em;margin-bottom:12px;font-size:.84rem;font-weight:800;display:inline-block}.intro-copy h1{letter-spacing:-.045em;max-width:680px;margin:0;font-size:clamp(2.5rem,5.5vw,5.2rem);line-height:.98}.intro-copy>p{color:var(--muted);max-width:620px;margin:26px 0 30px;font-size:1.08rem;line-height:1.9}.stats{flex-wrap:wrap;gap:14px;display:flex}.stats span{color:var(--muted);border:1px solid var(--line);background:#ffffff09;border-radius:12px;padding:10px 14px;font-size:.88rem}.stats b{color:var(--ink);font-size:1rem}.glass-card{box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(145deg,#0f364cd6,#071d2ee0);border:1px solid #78f8e933;border-radius:28px}.name-card{padding:38px;position:relative;overflow:hidden}.name-card label{margin:26px 0 12px;font-size:1.15rem;font-weight:800;display:block}.name-card input{width:100%;height:58px;color:var(--ink);background:#020e19a6;border:1px solid #84dae540;border-radius:14px;outline:none;padding:0 17px;transition:all .2s}.name-card input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px #47e7d11a}.name-card input::placeholder{color:#718c9a}.field-note{color:var(--muted);margin:9px 0 20px;font-size:.78rem}.radar{background:repeating-radial-gradient(circle,#0000 0 18px,#47e7d126 19px 20px);border:1px solid #47e7d14d;border-radius:50%;width:108px;height:108px;margin:0 auto;position:relative}.radar:before,.radar:after{content:"";background:#47e7d129;position:absolute}.radar:before{width:1px;height:100%;left:50%}.radar:after{width:100%;height:1px;top:50%}.radar span{transform-origin:0 0;background:conic-gradient(from 270deg,#47e7d180,#0000 32%);border-radius:100% 0 0;animation:3.2s linear infinite sweep;position:absolute;inset:50% 50% 0 0}.radar i{background:var(--cyan);width:5px;height:5px;box-shadow:0 0 12px var(--cyan);z-index:1;border-radius:50%;position:absolute}.radar i:first-child{top:30px;right:31px}.radar i:nth-child(2){bottom:24px;left:38px}.radar i:nth-child(3){top:49px;left:20px}@keyframes sweep{to{transform:rotate(360deg)}}.primary-btn,.secondary-btn,.claim-btn{border:0;border-radius:14px;min-height:54px;padding:0 22px;font-weight:800;transition:transform .2s,box-shadow .2s,opacity .2s}.primary-btn{color:#032126;background:linear-gradient(135deg, var(--cyan-2), var(--cyan));box-shadow:0 10px 30px #47e7d130}.primary-btn:hover:not(:disabled),.claim-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px #47e7d145}.primary-btn:disabled{opacity:.35;cursor:not-allowed}.name-card .primary-btn{width:100%}.primary-btn span{margin-right:8px}.secondary-btn{color:var(--ink);border:1px solid var(--line);background:0 0}.quiz-head{justify-content:space-between;align-items:end;width:min(800px,100%);margin:0 auto 18px;display:flex}.quiz-page{width:100%}.quiz-head .eyebrow{margin:0}.hello{color:var(--muted);margin:5px 0 0}.counter{color:var(--muted);direction:ltr;font-size:.92rem;font-weight:800}.counter span{color:var(--cyan);font-size:1.35rem}.progress-track{background:#ffffff14;border-radius:10px;width:min(800px,100%);height:5px;margin:0 auto 20px;overflow:hidden}.progress-track div{border-radius:inherit;background:linear-gradient(90deg, var(--cyan), var(--blue));width:10%;height:100%;transition:width .35s}.question-card{background:var(--panel);border:1px solid var(--line);width:min(800px,100%);min-height:460px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:26px;margin:0 auto;padding:clamp(24px,5vw,48px)}.category{color:var(--cyan);background:#47e7d117;border-radius:8px;padding:7px 11px;font-size:.75rem;font-weight:800;display:inline-flex}.question-card h2{margin:17px 0 25px;font-size:clamp(1.45rem,3.6vw,2.15rem);line-height:1.5}.answers{gap:11px;display:grid}.answer-btn{text-align:right;width:100%;min-height:58px;color:var(--ink);background:#03142294;border:1px solid #99dce629;border-radius:14px;align-items:center;gap:12px;padding:13px 17px;transition:all .18s;display:flex}.answer-btn:hover{background:#47e7d10f;border-color:#47e7d180}.answer-btn.selected{border-color:var(--cyan);background:#47e7d11f;box-shadow:inset 0 0 0 1px #47e7d129}.answer-dot{border:2px solid #547584;border-radius:50%;flex:none;width:21px;height:21px;position:relative}.selected .answer-dot{border-color:var(--cyan)}.selected .answer-dot:after{content:"";background:var(--cyan);border-radius:50%;position:absolute;inset:4px}.quiz-actions{justify-content:flex-start;margin-top:26px;display:flex}.quiz-actions .primary-btn{min-width:135px}#bait{text-align:center;justify-content:center}.bait-wrap{color:#15223c;background:radial-gradient(circle at 50% 0,#fffbdc,#0000 42%),linear-gradient(145deg,#fff3b0,#ffd166 55%,#ffbc42);border-radius:32px;width:min(620px,100%);padding:38px;position:relative;overflow:hidden;box-shadow:0 28px 85px #ffbc4236}.sparkles{color:#fff;letter-spacing:1rem;font-size:2.4rem;animation:1.4s ease-in-out infinite alternate pulse}.sparkles span{color:#ff6b6b}@keyframes pulse{to{transform:scale(1.08)}}.exclusive{color:#fff;background:#17213d;border-radius:20px;margin-top:8px;padding:7px 15px;font-size:.78rem;font-weight:800;display:inline-block}.bait-wrap h1{margin:22px 0 9px;font-size:clamp(2rem,6vw,3.3rem)}.bait-wrap>p{line-height:1.8}.gift-card{text-align:right;background:#ffffff96;border:2px dashed #15223c40;border-radius:18px;align-items:center;gap:14px;margin:24px 0 18px;padding:18px;display:flex}.gift-icon{font-size:2.35rem}.gift-card div{flex:1}.gift-card small,.gift-card b{display:block}.gift-card small{opacity:.65}.timer{color:#d62839;direction:ltr;font-size:1.1rem;font-weight:900}.claim-btn{color:#fff;background:linear-gradient(135deg,#ff4f65,#d7274d);width:100%;box-shadow:0 12px 30px #d7274d40}.reject-btn{color:#17213d;background:#ffffff85;border:1px solid #15223c33;border-radius:14px;width:100%;min-height:48px;margin-top:11px;font-weight:800}.reject-btn:hover{background:#ffffffd1}.tiny-copy{opacity:.58;margin-bottom:0;font-size:.75rem}.hack-screen{z-index:20;text-align:center;background:#05080b;justify-content:center;min-height:100vh;padding:20px;position:fixed;inset:0;overflow:hidden}.hack-screen:before{content:"";opacity:.12;background:repeating-linear-gradient(0deg,#0000 0 3px,#ff173b 4px);animation:.2s linear infinite scan;position:absolute;inset:0}@keyframes scan{to{transform:translateY(5px)}}.hack-box{width:min(760px,100%);position:relative}.warning-icon{border:3px solid var(--warning);width:88px;height:88px;color:var(--warning);border-radius:50%;place-items:center;margin:0 auto 20px;font:900 3.5rem/1 system-ui;animation:.55s ease-in-out infinite alternate alarm;display:grid;box-shadow:0 0 50px #ff4f654d}@keyframes alarm{to{transform:scale(1.08);box-shadow:0 0 80px #ff4f658c}}.system-line{color:#ff8393;letter-spacing:.15em;direction:ltr;font-family:monospace}.hack-box h1{color:var(--warning);text-shadow:4px 0 #3cf3d3,-4px 0 #2b46ff;margin:20px 0;font-size:clamp(3rem,11vw,7rem);line-height:.95;animation:.22s steps(2,end) infinite glitch}@keyframes glitch{50%{transform:translate(2px,-1px)}}.hack-name{color:#ffd4da;font-size:1.25rem}.data-lines{gap:8px;width:min(460px,90%);margin:28px auto 0;display:grid}.data-lines i{background:linear-gradient(90deg, var(--warning), transparent);height:6px;animation:1s ease-in-out infinite alternate data}.data-lines i:nth-child(2){width:72%;animation-delay:.1s}.data-lines i:nth-child(3){width:89%;animation-delay:.2s}.data-lines i:nth-child(4){width:55%;animation-delay:.3s}@keyframes data{to{opacity:.2;transform:translate(-14px)}}.debrief-layout{width:min(850px,100%);margin:auto}.safe-card{background:#47e7d117;border:1px solid #47e7d145;border-radius:22px;align-items:center;gap:20px;margin-bottom:18px;padding:25px;display:flex}.safe-icon{background:var(--cyan);color:#052328;border-radius:50%;flex:none;place-items:center;width:58px;height:58px;font-size:1.7rem;font-weight:900;display:grid}.eyebrow.safe{margin:0}.safe-card h1{margin:4px 0 5px;font-size:clamp(1.7rem,4vw,2.4rem)}.safe-card p{color:var(--muted);margin:0;line-height:1.75}.result-card{border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(145deg,#0f364ce8,#071d2ef0);border-radius:24px;padding:clamp(24px,5vw,38px)}.result-top{justify-content:space-between;align-items:center;gap:20px;display:flex}.result-top h2{margin:0;font-size:1.7rem}.score-ring{text-align:center;outline:2px solid var(--cyan);outline-offset:-7px;border:7px solid #47e7d12e;border-radius:50%;flex:none;place-content:center;width:104px;height:104px;display:grid}.score-ring b{color:var(--cyan);font-size:2.4rem;line-height:.9}.score-ring small{color:var(--muted);margin-top:5px}.level-badge{color:var(--yellow);background:#ffd1661a;border:1px solid #ffd16640;border-radius:20px;margin:22px 0 9px;padding:7px 13px;font-weight:800;display:inline-block}.result-card>p{color:var(--muted);line-height:1.7}.lesson-grid{grid-template-columns:repeat(3,1fr);gap:11px;margin-top:24px;display:grid}.lesson-grid div{border:1px solid var(--line);background:#02121e75;border-radius:14px;padding:16px}.lesson-grid span{color:var(--cyan);font-family:monospace;font-size:.75rem}.lesson-grid b,.lesson-grid small{display:block}.lesson-grid b{margin:6px 0 4px}.lesson-grid small{color:var(--muted);line-height:1.5}.final-actions{justify-content:center;gap:11px;margin-top:18px;display:flex}.save-status{text-align:center;min-height:24px;color:var(--muted);margin:14px 0 0;font-weight:700}.save-status.saved{color:var(--cyan)}.save-status.error{color:#ff9aa8}footer{color:#718c9a;text-align:center;border-top:1px solid #7ddce71a;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:min(1120px,100% - 40px);min-height:90px;margin:0 auto;padding:14px 0;font-size:.78rem;display:flex}.teacher-credit{color:#a7bdc8;font-size:.88rem;font-weight:700;line-height:1.55}@media (max-width:760px){.topbar{width:min(100% - 28px,1120px);min-height:76px}.school{display:none}.shell{width:min(100% - 28px,1120px)}.screen{min-height:calc(100vh - 126px);padding:34px 0}.welcome-layout{grid-template-columns:1fr;gap:30px}.intro-copy h1{font-size:clamp(2.55rem,14vw,4rem)}.intro-copy>p{margin:20px 0}.name-card{padding:26px 20px}.radar{width:88px;height:88px}.question-card{min-height:0;padding:24px 18px}.bait-wrap{padding:30px 18px}.safe-card{align-items:flex-start;padding:20px}.safe-icon{width:46px;height:46px}.lesson-grid{grid-template-columns:1fr}.result-top{align-items:flex-start}.score-ring{width:88px;height:88px}.final-actions{flex-direction:column}.final-actions button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}