:root{--bg-dark: #06120E;--bg-surface: #0E221B;--bg-surface-elevated: #153228;--bg-glass: rgba(14, 34, 27, .75);--border-glass: rgba(212, 175, 55, .2);--border-light: rgba(255, 255, 255, .08);--primary-gold: #D4AF37;--primary-gold-hover: #F3E5AB;--emerald-glow: #10B981;--emerald-accent: #059669;--teal-accent: #14B8A6;--text-main: #F3F4F6;--text-muted: #9CA3AF;--text-gold: #F59E0B;--shadow-glow: 0 0 25px rgba(16, 185, 129, .15);--shadow-gold-glow: 0 0 20px rgba(212, 175, 55, .2);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 9999px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Cairo,Outfit,Inter,sans-serif;background-color:var(--bg-dark);color:var(--text-main);min-height:100vh;overflow-x:hidden;background-image:radial-gradient(circle at 15% 15%,rgba(16,185,129,.08) 0%,transparent 40%),radial-gradient(circle at 85% 85%,rgba(212,175,55,.06) 0%,transparent 40%);background-attachment:fixed}.arabic-font{font-family:Amiri,serif}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--bg-surface-elevated);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--primary-gold)}.glass-panel{background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-md);box-shadow:var(--shadow-glow)}.glass-card{background:#15322899;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:1.5rem;transition:var(--transition)}.glass-card:hover{transform:translateY(-4px);border-color:var(--primary-gold);box-shadow:var(--shadow-gold-glow)}h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em}.gradient-text{background:linear-gradient(135deg,#FFF 30%,var(--primary-gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.gold-text{color:var(--primary-gold)}.btn-primary{background:linear-gradient(135deg,#d4af37,#b8860b);color:#06120e;font-weight:700;padding:.75rem 1.75rem;border-radius:var(--radius-md);border:none;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-size:.95rem;box-shadow:0 4px 15px #d4af374d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #d4af3780;background:linear-gradient(135deg,#f3e5ab,#d4af37)}.btn-secondary{background:#10b98126;color:var(--emerald-glow);border:1px solid rgba(16,185,129,.3);font-weight:600;padding:.75rem 1.5rem;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-size:.95rem}.btn-secondary:hover{background:#10b98140;border-color:var(--emerald-glow);transform:translateY(-2px);color:#fff}.btn-outline{background:transparent;color:var(--text-main);border:1px solid var(--border-light);font-weight:500;padding:.75rem 1.5rem;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition)}.btn-outline:hover{border-color:var(--primary-gold);color:var(--primary-gold)}.form-group{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.875rem;font-weight:600;color:var(--text-muted)}.form-input,.form-select,.form-textarea{width:100%;background:#06120ecc;border:1px solid var(--border-light);color:var(--text-main);padding:.85rem 1.1rem;border-radius:var(--radius-md);font-size:.95rem;outline:none;transition:var(--transition);font-family:inherit}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary-gold);box-shadow:0 0 0 3px #d4af3726}.form-textarea{resize:vertical;min-height:100px}.badge{padding:.35rem .85rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center;gap:.35rem}.badge-gold{background:#d4af3726;color:var(--primary-gold);border:1px solid rgba(212,175,55,.3)}.badge-emerald{background:#10b98126;color:var(--emerald-glow);border:1px solid rgba(16,185,129,.3)}.progress-bar-container{width:100%;background:#ffffff14;height:10px;border-radius:var(--radius-full);overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--emerald-accent) 0%,var(--emerald-glow) 50%,var(--primary-gold) 100%);border-radius:var(--radius-full);transition:width .6s ease-out}.container{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}.page-header{margin-bottom:2.5rem}.page-header h1{font-size:2.25rem;margin-bottom:.5rem}.page-header p{color:var(--text-muted);font-size:1.05rem}.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}@media (max-width: 1200px){.container{max-width:960px}}@media (max-width: 992px){.container{max-width:720px;padding:1.5rem 1.25rem}.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}@media (max-width: 768px){:root{--radius-md: 12px;--radius-lg: 16px}body{background-attachment:scroll}.container{max-width:100%;padding:1.25rem 1rem}.page-header h1{font-size:1.75rem}.page-header p{font-size:.95rem}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:1rem}.glass-card{padding:1.25rem}.btn-primary,.btn-secondary,.btn-outline{width:100%;justify-content:center;padding:.85rem 1.25rem}.section-header{flex-direction:column;align-items:flex-start;gap:1rem}.welcome-banner{flex-direction:column;text-align:center;padding:1.5rem;gap:1rem}.welcome-text h2{font-size:1.35rem}.stats-grid{margin-bottom:2rem}.stat-card{gap:1rem}.stat-icon{width:48px;height:48px;font-size:1.25rem}.stat-value{font-size:1.25rem}.parcours-card{padding:1.25rem}.card-top{flex-direction:column;align-items:flex-start;gap:.5rem}.quiz-card{padding:1.5rem}.quiz-header{flex-direction:column;align-items:flex-start;gap:.75rem}.question-text{font-size:1.1rem}.detail-header{padding:1.5rem}.header-top{flex-direction:column;align-items:flex-start;gap:.75rem}.header-badges{flex-wrap:wrap}.lesson-card{flex-direction:column;padding:1.25rem;gap:1rem}.lesson-action{width:100%}.lesson-action button{width:100%;justify-content:center}.modal-content{font-size:1rem}.modal-actions{flex-direction:column}.modal-actions a,.modal-actions button{width:100%;justify-content:center}.auth-card{padding:1.75rem 1.25rem}.auth-header h1{font-size:1.6rem}.footer-content{flex-direction:column;text-align:center}.footer-links{flex-wrap:wrap;justify-content:center}.gesture-panel{width:calc(100vw - 32px);max-width:320px}.camera-wrap{width:100%;height:auto;aspect-ratio:4 / 3}.camera-wrap video,.camera-wrap canvas{width:100%;height:100%}}@media (max-width: 480px){.container{padding:1rem .75rem}.page-header h1{font-size:1.5rem}.welcome-banner{padding:1.25rem}.welcome-text h2{font-size:1.15rem}.welcome-text p{font-size:.9rem}.glass-card{padding:1rem}.stat-icon{width:42px;height:42px;font-size:1.1rem}.stat-value{font-size:1.1rem}.quiz-card{padding:1.25rem}.question-text{font-size:1rem}.detail-header{padding:1.25rem}.lesson-card{padding:1rem}.auth-card{padding:1.5rem 1rem}.auth-header h1{font-size:1.4rem}.btn-primary,.btn-secondary,.btn-outline{padding:.75rem 1rem;font-size:.9rem}.gesture-toggle{padding:8px 12px;font-size:.85rem}}@media (pointer: coarse){.nav-links a,.btn-primary,.btn-secondary,.btn-outline,.gesture-toggle,.modal-close,.close-btn{min-height:44px;min-width:44px}}@media (min-width: 1400px){.container{max-width:1320px}}@media (max-width: 768px){.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .4s ease-out forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-slide-up{animation:slideUp .5s ease-out forwards}.logo{display:flex;align-items:center;gap:15px;font-weight:700}.logo i{color:#d4a574}.logo h1{color:#1a7a4a;font-size:32px}