@import "https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap";:root{--su-slate:#6b7f8c;--su-yellow:#f5c536;--bg-color:#f8fafc;--bg-card:#fff;--text-main:#1e293b;--text-muted:var(--su-slate);--font-main:"Tajawal";--su-yellow-dim:#d4aa2b;--su-slate-dark:#53646f;--su-slate-light:#8b9fa8;--gold:var(--su-yellow);--gold-light:#f8d76e;--gold-faint:#f5c5361f;--bg-root:#f4f7f9;--bg-raised:#f8f9fa;--bg-input:#fff;--bg-hover:#f0f3f5;--text-primary:#1e293b;--text-dim:#94a3b8;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--info:#3b82f6;--border:#e2e8f0;--border-gold:var(--su-yellow);--radius:16px;--radius-sm:10px;--radius-lg:24px;--shadow:0 10px 25px #6b7f8c14;--transition:.2s ease-in-out;--font-ar:"Tajawal", sans-serif;--font-en:"Outfit", sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font-ar);background:var(--bg-root);color:var(--text-primary);direction:rtl;min-height:100vh;line-height:1.65}a{color:var(--su-slate-dark);transition:color var(--transition);text-decoration:none}a:hover{color:var(--su-yellow-dim)}img{max-width:100%;display:block}input,select,textarea,button{font-family:inherit}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-root)}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--su-slate)}.container{max-width:1200px;margin:0 auto;padding:0 24px}.flex-center{justify-content:center;align-items:center;display:flex}.text-gold{color:var(--su-yellow)!important}.text-muted{color:var(--text-muted)!important}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.su-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:all var(--transition);padding:32px;box-shadow:0 2px 8px #00000005}.su-card:hover{border-color:var(--su-slate-light);box-shadow:var(--shadow)}.su-btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);white-space:nowrap;border:none;align-items:center;gap:8px;padding:12px 28px;font-size:.95rem;font-weight:700;display:inline-flex}.su-btn:disabled{opacity:.5;cursor:not-allowed}.su-btn--gold{background:var(--su-yellow);color:#1e293b}.su-btn--gold:hover:not(:disabled){background:var(--su-yellow-dim);transform:translateY(-2px);box-shadow:0 4px 12px #f5c5364d}.su-btn--outline{color:var(--su-slate-dark);border:2px solid var(--border);background:0 0}.su-btn--outline:hover:not(:disabled){border-color:var(--su-slate);background:var(--bg-raised)}.su-btn--ghost{color:var(--su-slate);background:0 0}.su-btn--ghost:hover:not(:disabled){color:var(--su-slate-dark);background:var(--bg-hover)}.su-btn--block{justify-content:center;width:100%}.su-field{margin-bottom:20px}.su-label{color:var(--text-primary);margin-bottom:8px;font-size:.9rem;font-weight:600;display:block}.su-input{background:var(--bg-input);border:2px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);transition:all var(--transition);outline:none;padding:14px 16px;font-size:.95rem}.su-input:focus{border-color:var(--su-yellow);box-shadow:0 0 0 4px #f5c53626}.su-input::placeholder{color:var(--text-dim)}.su-select{background:var(--bg-input);border:2px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);cursor:pointer;transition:border-color var(--transition);outline:none;padding:14px 16px;font-size:.95rem}.su-select:focus{border-color:var(--su-yellow)}.su-input-row{display:flex}.su-input-row>.su-select{border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:none;max-width:160px}.su-input-row>.su-input{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.su-alert{border-radius:var(--radius-sm);align-items:center;gap:12px;margin-bottom:24px;padding:14px 20px;font-size:.95rem;font-weight:500;display:flex}.su-alert--error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}.su-alert--success{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0}.su-badge{border-radius:20px;align-items:center;padding:6px 14px;font-size:.8rem;font-weight:700;display:inline-flex}.su-badge--gold{background:var(--gold-faint);color:var(--su-yellow-dim);border:1px solid var(--su-yellow)}.su-badge--success{color:#166534;background:#dcfce7}.su-badge--danger{color:#991b1b;background:#fee2e2}.su-badge--warning{color:#92400e;background:#fef3c7}.su-badge--info{color:#1e40af;background:#dbeafe}.su-badge--muted{color:#475569;background:#f1f5f9}.su-stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:32px;display:grid}.su-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:24px;box-shadow:0 2px 6px #00000005}.su-stat__num{font-family:var(--font-en);color:var(--su-slate-dark);margin-bottom:8px;font-size:2.5rem;font-weight:800;line-height:1}.su-stat__label{color:var(--su-slate);font-size:.95rem;font-weight:600}.su-spinner{border:3px solid var(--border);border-top-color:var(--su-yellow);border-radius:50%;width:36px;height:36px;animation:.75s ease-in-out infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.su-loading{justify-content:center;align-items:center;padding:80px;display:flex}.su-progress{background:var(--border);border-radius:5px;height:10px;overflow:hidden}.su-progress__bar{background:var(--su-yellow);border-radius:5px;height:100%;transition:width .5s}.auth-shell{background:radial-gradient(circle at 0 0,#fff,#f4f7f9);justify-content:center;align-items:center;min-height:100vh;padding:32px 16px;display:flex}.auth-box{width:100%;max-width:440px}.auth-logo{text-align:center;margin-bottom:32px}.auth-logo__text{font-family:var(--font-en);text-transform:uppercase;font-size:3.5rem;font-weight:800;line-height:.9}.auth-logo__speak{color:var(--su-slate)}.auth-logo__up{color:var(--su-yellow)}.auth-logo__sub{color:var(--su-slate);margin-top:12px;font-size:1rem;font-weight:500}.app-shell{min-height:100vh;display:flex}.sidebar{background:var(--bg-card);border-left:1px solid var(--border);z-index:100;flex-direction:column;width:280px;display:flex;position:fixed;top:0;bottom:0;right:0;box-shadow:-2px 0 10px #00000005}.sidebar__brand{border-bottom:1px solid var(--border);text-align:center;padding:32px 24px 24px}.sidebar__brand-text{font-family:var(--font-en);font-size:2rem;font-weight:800}.sidebar__brand-text span:first-child{color:var(--su-slate)}.sidebar__brand-text span:last-child{color:var(--su-yellow)}.sidebar__nav{flex:1;padding:24px 16px;overflow-y:auto}.sidebar__link{border-radius:var(--radius-sm);color:var(--su-slate);transition:all var(--transition);align-items:center;gap:14px;margin-bottom:8px;padding:14px 18px;font-size:1rem;font-weight:600;display:flex}.sidebar__link:hover{background:var(--bg-hover);color:var(--su-slate-dark)}.sidebar__link.active{background:var(--gold-faint);color:var(--su-yellow-dim)}.sidebar__link svg{font-size:1.3rem}.sidebar__foot{border-top:1px solid var(--border);background:var(--bg-raised);padding:20px 24px}.main-area{flex:1;min-height:100vh;margin-right:280px;padding:40px 48px}.main-area__header{justify-content:space-between;align-items:center;margin-bottom:40px;display:flex}.main-area__title{color:var(--text-primary);font-size:1.8rem;font-weight:800}.su-filters{gap:16px;margin-bottom:32px;display:flex}.item-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:all var(--transition);justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px;padding:24px 32px;display:flex}.item-card:hover{border-color:var(--su-slate-light);box-shadow:0 4px 12px #6b7f8c0d}.item-card__title{color:var(--text-primary);margin-bottom:8px;font-size:1.15rem;font-weight:700}.item-card__meta{color:var(--su-slate);gap:20px;font-size:.9rem;font-weight:500;display:flex}.q-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px;padding:40px;box-shadow:0 2px 12px #00000005}.q-panel__prompt{color:var(--su-slate-dark);margin-bottom:32px;font-size:1.25rem;font-weight:700;line-height:1.6}.q-choice{background:var(--bg-root);border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--su-slate-dark);transition:all var(--transition);align-items:center;gap:16px;margin-bottom:12px;padding:16px 24px;font-size:1.05rem;font-weight:600;display:flex}.q-choice:hover{border-color:var(--su-slate-light)}.q-choice.selected{border-color:var(--su-yellow);background:var(--gold-faint);color:var(--su-yellow-dim)}.q-choice__marker{border:2px solid #cbd5e1;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.q-choice.selected .q-choice__marker{border-color:var(--su-yellow);background:var(--su-yellow)}.q-choice.selected .q-choice__marker:after{content:"";background:#fff;border-radius:50%;width:10px;height:10px}.timer-bar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:16px;margin-bottom:32px;padding:16px 24px;display:flex;box-shadow:0 2px 8px #00000008}.timer-bar__time{font-family:var(--font-en);color:var(--su-slate-dark);font-size:1.4rem;font-weight:800}.result-hero{text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-bottom:40px;padding:60px 40px}.result-hero__score{font-family:var(--font-en);color:var(--su-yellow);font-size:5rem;font-weight:800;line-height:1}.result-hero__mark{font-family:var(--font-en);background:var(--su-slate);color:#fff;border-radius:30px;margin-top:16px;padding:8px 32px;font-size:1.5rem;font-weight:800;display:inline-block}@media (width<=768px){.sidebar{transform:translate(100%)}.main-area{margin-right:0;padding:24px 20px}.item-card{flex-direction:column;align-items:flex-start}}