:root{--primary: #2563eb;--primary-dark: #1d4ed8;--secondary: #7c3aed;--accent: #f59e0b;--bg: #eff6ff;--fg: #0f172a;--muted: #f1f5fd;--border: #e4ecfc;--destructive: #dc2626;--success: #16a34a;--success-bg: #ecfdf5;--danger-bg: #fef2f2;--card: #ffffff;--radius-lg: 18px;--radius-md: 14px;--shadow: 0 10px 30px rgba(37, 99, 235, .1);--shadow-lift: 0 18px 40px rgba(37, 99, 235, .16);--font-heading: "Cairo", "Tajawal", sans-serif;--font-body: "Tajawal", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:linear-gradient(180deg,#eff6ff,#f8fbff 40%,#eef3fd);color:var(--fg);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.6}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;color:var(--fg)}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}.container{width:100%;max-width:960px;margin:0 auto;padding:28px 20px 60px;flex:1}.navbar{position:sticky;top:0;z-index:50;background:#ffffffbf;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(228,236,252,.9)}.navbar-inner{max-width:960px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px}.brand-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 6px 16px #2563eb59}.brand-title{font-family:var(--font-heading);font-weight:800;font-size:1.15rem}.navbar-stats{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.stat-chip{display:inline-flex;align-items:center;gap:7px;background:var(--muted);border:1px solid var(--border);color:var(--primary-dark);font-weight:700;font-size:.9rem;padding:7px 14px;border-radius:999px}.progress-track{width:120px;height:8px;border-radius:999px;background:#e3ecfb;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:999px;transition:width .4s ease}.reset-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);color:var(--fg);font-weight:600;font-size:.85rem;padding:7px 14px;border-radius:999px;transition:all .2s ease}.reset-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}.topic-section{margin-bottom:22px}.topic-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:10px}.topic-label{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-heading);font-weight:700;color:#334155}.shuffle-btn{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.85rem;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--border);color:#475569;transition:all .2s ease}.shuffle-btn:hover{border-color:var(--secondary);color:var(--secondary)}.shuffle-btn.active{background:var(--secondary);color:#fff;border-color:var(--secondary)}.topic-chips{display:flex;gap:10px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.92rem;padding:9px 18px;border-radius:999px;background:#fff;border:1.5px solid var(--border);color:#475569;transition:all .2s ease}.chip:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow)}.chip.active{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border-color:transparent;box-shadow:0 8px 20px #2563eb59}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}.result-item{display:flex;align-items:center;gap:12px;background:#ffffffa6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(228,236,252,.9);border-radius:var(--radius-md);padding:14px 16px;box-shadow:var(--shadow)}.result-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex-shrink:0}.result-icon.score{background:#fef3c7;color:#b45309}.result-icon.done{background:#dbeafe;color:var(--primary-dark)}.result-icon.remaining{background:#ede9fe;color:var(--secondary)}.result-value{font-family:var(--font-heading);font-weight:800;font-size:1.15rem;line-height:1.2}.result-label{font-size:.8rem;color:#64748b}.result-banner{grid-column:1 / -1;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#ecfdf5,#f0fdf4);border:1px solid #bbf7d0;color:#15803d;font-weight:700;border-radius:var(--radius-md);padding:14px 18px}.result-pct{margin-inline-start:auto;font-family:var(--font-heading);font-weight:800;font-size:1.25rem;background:var(--success);color:#fff;padding:2px 14px;border-radius:999px}.questions-grid{display:grid;grid-template-columns:1fr;gap:18px}.q-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;animation:fadeUp .4s ease both}.q-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}.q-card.solved-ok{border-color:#bbf7d0}.q-card.solved-bad{border-color:#fecaca}.q-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.q-topic{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--primary-dark);background:#dbeafe;padding:5px 12px;border-radius:999px}.q-num{font-size:.8rem;color:#94a3b8;font-weight:600}.q-text{font-size:1.22rem;font-weight:700;margin-bottom:18px;line-height:1.5}.options{display:grid;gap:10px}.option{display:flex;align-items:center;gap:12px;text-align:right;background:#f8fafc;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;font-size:1rem;font-weight:500;color:var(--fg);transition:all .18s ease;width:100%}.option:not(:disabled):hover{border-color:var(--primary);background:#eff6ff;transform:translate(-3px)}.option-letter{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;border:1px solid var(--border);font-family:var(--font-heading);font-weight:700;color:#64748b;flex-shrink:0}.option-text{flex:1}.option.correct{background:var(--success-bg);border-color:#4ade80;color:#14532d}.option.correct .option-letter{background:var(--success);color:#fff;border-color:var(--success)}.option.wrong{background:var(--danger-bg);border-color:#fca5a5;color:#7f1d1d}.option.wrong .option-letter{background:var(--destructive);color:#fff;border-color:var(--destructive)}.option.dimmed{opacity:.55}.opt-icon{flex-shrink:0;color:currentColor}.feedback{margin-top:16px;border-radius:var(--radius-md);padding:14px 16px;animation:fadeUp .3s ease both}.feedback.ok{background:var(--success-bg);border:1px solid #bbf7d0}.feedback.bad{background:var(--danger-bg);border:1px solid #fecaca}.feedback-title{display:flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:700;margin-bottom:8px}.feedback.ok .feedback-title{color:#15803d}.feedback.bad .feedback-title{color:#b91c1c}.feedback-body{display:flex;align-items:flex-start;gap:8px;color:#334155;font-size:.95rem;margin-bottom:10px}.feedback-body svg{flex-shrink:0;margin-top:4px;color:var(--accent)}.retry-btn{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:#475569;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--border);transition:all .18s ease}.retry-btn:hover{color:var(--primary);border-color:var(--primary)}.empty-state{text-align:center;padding:50px 20px;background:var(--card);border:1px dashed var(--border);border-radius:var(--radius-lg);color:#64748b}.footer{text-align:center;padding:22px 20px;color:#94a3b8;font-size:.85rem;border-top:1px solid var(--border)}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 640px){.results{grid-template-columns:1fr}.navbar-inner{justify-content:center;text-align:center}.brand-title{font-size:1rem}.q-text{font-size:1.08rem}.q-card{padding:18px}.progress-track{width:90px}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}