:root{--navy:#0f172a;--navy-light:#1e293b;--teal:#0d9488;--teal-light:#14b8a6;--yellow:#f59e0b;--yellow-light:#fef3c7;--bg-color:#0f172a;--card-bg:#1e293b;--text-main:#cbd5e1;--border-color:#334155;--correct:#10b981;--wrong:#ef4444;--header-bg:#1e293b;--title-color:#f8fafc}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0;font-family:Tajawal,sans-serif}body{background-color:var(--bg-color);background-image:radial-gradient(var(--border-color) 1px, transparent 1px);color:var(--text-main);background-size:20px 20px;min-height:100vh;padding:40px 20px;line-height:1.8;transition:background-color .3s,color .3s}.container{max-width:900px;margin:0 auto}.page-header{text-align:center;background:var(--header-bg);border-bottom:8px solid var(--yellow);border-radius:16px 16px 60px;margin-bottom:40px;padding:40px 30px;position:relative;overflow:hidden;box-shadow:0 15px 35px #0f172a33}.page-header:before,.page-header:after{content:"";position:absolute}.page-header:before{background:var(--teal);opacity:.9;border-radius:50%;width:180px;height:180px;top:-60px;right:-50px}.page-header:after{background:var(--yellow);opacity:.1;border-radius:50%;width:120px;height:120px;bottom:-40px;left:-30px}.page-header h1{color:#fff;z-index:2;text-shadow:2px 2px 4px #0006;margin-bottom:10px;font-size:3.2rem;font-weight:900;position:relative}.page-header p{color:var(--yellow);z-index:2;background:#0f172a80;border-radius:30px;padding:5px 20px;font-size:1.5rem;font-weight:700;display:inline-block;position:relative}.card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:20px;margin-bottom:30px;padding:30px;transition:background-color .3s,border-color .3s;overflow:hidden;box-shadow:0 10px 30px #0000000d}.section-header{background:var(--teal);color:#fff;border-bottom:4px solid var(--navy-light);padding:15px 20px;font-size:1.6rem;font-weight:900}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.slide-in{animation:.4s forwards slideIn}.btn-3d{transition:transform .15s,filter .15s,box-shadow .1s}.btn-3d:hover{filter:brightness(1.1);transform:translateY(-3px)}.btn-3d:active{filter:brightness(.9);transform:translateY(6px);box-shadow:0 0 #0000!important}.btn-normal{transition:transform .15s,filter .15s,background-color .15s}.btn-normal:hover{filter:brightness(1.1);transform:translateY(-2px)}.btn-normal:active{filter:brightness(.9);transform:scale(.95)translateY(2px)}.spinner{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:22px;height:22px;animation:.8s linear infinite spin}.page-spinner{border:6px solid var(--border-color);border-top-color:var(--teal);border-radius:50%;width:60px;height:60px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.card-flex{justify-content:space-between;align-items:center;transition:background-color .3s,border-color .3s;display:flex;background:var(--card-bg)!important}.icon-flex{align-items:center;gap:20px;display:flex}.btn-container{gap:10px;display:flex}@media (width<=600px){body{padding:15px 10px}.page-header{border-radius:12px 12px 30px;padding:25px 15px}.page-header h1{font-size:2rem!important}.page-header p{font-size:1.1rem!important}.card-flex{text-align:center;flex-direction:column;gap:15px}.icon-flex{flex-direction:column;gap:10px}.btn-container{flex-direction:column;width:100%}.btn-container a,.btn-container button,.btn-3d{justify-content:center;width:100%}.hide-text-mobile{display:none}.btn-normal{padding:0 10px!important}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--teal)}