/* ========================================================= منصّة إتقان — أحكام التجويد نظام التصميم: الألوان، الطباعة، والتخطيط ========================================================= */ /* الخطوط تُحمَّل عبر رابط في ملف index.html (أسرع من @import) */ :root{ /* ألوان أساسية */ --navy-950:#0A1B1F; --navy-900:#10262A; --navy-800:#173339; --green-800:#1B4332; --green-700:#235347; --green-600:#2D6A4F; --green-500:#3A7D5C; --gold-600:#B08A1E; --gold-500:#C9A227; --gold-300:#E3C567; --gold-100:#F3E6BB; --cream-50:#FAF6EA; --cream-100:#F1EAD6; --ink-900:#1C2620; --ink-700:#3A4740; --ink-500:#6B776E; --white:#FFFFFF; /* ألوان أحكام التجويد (نظام الموقع الخاص للتلوين) */ --tj-idhhar:#173339; /* إظهار: تسطير كحلي */ --tj-idgham:#2D6A4F; /* إدغام: أخضر */ --tj-iqlab:#B08A1E; /* إقلاب: ذهبي */ --tj-ikhfa:#A3591F; /* إخفاء: برتقالي محروق */ --tj-madd:#8C2F2F; /* مد: عنّابي */ --tj-qalqalah:#3D5A80; /* قلقلة: أزرق فولاذي */ --radius-sm:6px; --radius-md:14px; --radius-lg:26px; --shadow-1:0 2px 10px rgba(10,27,31,.06); --shadow-2:0 14px 34px rgba(10,27,31,.14); --font-display:'Amiri', serif; --font-body:'Tajawal', sans-serif; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;} } body{ margin:0; font-family:var(--font-body); background:var(--cream-50); color:var(--ink-900); line-height:1.85; direction:rtl; } h1,h2,h3,h4{ font-family:var(--font-display); color:var(--navy-950); margin:0 0 .5em; line-height:1.4; } p{margin:0 0 1em;} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} ul{margin:0; padding:0; list-style:none;} button{font-family:inherit; cursor:pointer;} :focus-visible{ outline:3px solid var(--gold-500); outline-offset:3px; border-radius:4px; } .container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; } .section-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--gold-600); background:var(--gold-100); padding:6px 16px; border-radius:999px; margin-bottom:16px; } .section-head{ max-width:680px; margin:0 auto 48px; text-align:center; } .section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);} .section-head p{color:var(--ink-700); font-size:1.05rem;} section{padding:88px 0;} /* ===== نمط زخرفي هندسي إسلامي (يُستخدم كإشارة بصرية متكررة) ===== */ .continue-learning-wrap{ background:var(--cream-50); padding:28px 0 0; } .continue-learning-card{ display:flex; align-items:center; justify-content:space-between; gap:24px; background:linear-gradient(135deg,var(--navy-950),var(--green-800)); color:var(--cream-50); border:1px solid rgba(201,162,39,.35); border-radius:var(--radius-lg); padding:24px 28px; box-shadow:var(--shadow-1); } .continue-learning-card h2{color:var(--white); font-size:clamp(1.35rem,2.5vw,1.8rem); margin:0 0 4px;} .continue-learning-card .section-eyebrow{margin-bottom:8px; background:rgba(243,230,187,.16); color:var(--gold-300);} .continue-learning-card p{margin:0; color:var(--cream-100); opacity:.86;} .mobile-shortcuts{display:none;} .motif-divider{ height:46px; width:100%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='46' viewBox='0 0 64 46'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1' opacity='0.55'%3E%3Cpath d='M32 2 L48 12 L48 30 L32 40 L16 30 L16 12 Z'/%3E%3Cpath d='M32 2 L32 40 M16 12 L48 30 M48 12 L16 30'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat-x; background-position:center; opacity:.9; } /* =========================== شريط التنقل =========================== */ .navbar{ position:sticky; top:0; z-index:40; background:var(--navy-950); border-bottom:1px solid rgba(201,162,39,.25); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; } .brand{ display:flex; align-items:center; gap:10px; color:var(--gold-300); } .brand-mark{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--gold-500),var(--gold-300)); display:flex; align-items:center; justify-content:center; color:var(--navy-950); font-family:var(--font-display); font-weight:700; font-size:1.15rem; } .brand-text{font-family:var(--font-display); font-size:1.35rem; color:var(--white);} .brand-text span{color:var(--gold-300);} .nav-links{ display:flex; align-items:center; gap:6px; } .nav-links a{ color:var(--cream-100); padding:10px 16px; border-radius:999px; font-size:.98rem; font-weight:500; transition:background .2s, color .2s; } .nav-links a:hover, .nav-links a.active{ background:rgba(201,162,39,.15); color:var(--gold-300); } .nav-reciter{ display:flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid rgba(201,162,39,.4); border-radius:999px; font-size:.85rem; } .nav-reciter label{color:var(--gold-300); font-weight:600; white-space:nowrap;} .nav-reciter select{ background:transparent; color:var(--cream-100); border:none; font-family:var(--font-body); font-size:.85rem; cursor:pointer; } .nav-reciter select option{color:var(--navy-950);} .profile-card{ max-width:640px; margin:0 auto; background:var(--white); border:1px solid rgba(27,67,50,.15); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); padding:28px 26px; } .profile-id{display:flex; align-items:center; gap:14px; margin-bottom:24px;} .profile-avatar{ width:56px; height:56px; flex:none; border-radius:50%; background:var(--navy-950); color:var(--gold-300); display:flex; align-items:center; justify-content:center; font-size:1.6rem; } .profile-id h3{margin:0 0 4px;} .profile-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:20px; } .profile-stat{ text-align:center; background:var(--cream-50); border-radius:var(--radius-md); padding:14px 8px; } .profile-stat b{display:block; font-size:1.4rem; color:var(--navy-950); font-family:var(--font-display);} .profile-stat span{font-size:.78rem; color:var(--ink-500);} .profile-progress-track{ height:10px; border-radius:999px; background:var(--cream-50); overflow:hidden; } .profile-progress-fill{height:100%; background:var(--gold-500); width:0%; transition:width .4s;} .profile-progress-label{font-size:.8rem; color:var(--ink-500); margin-top:6px; text-align:center;} .profile-sync-status{font-size:.78rem; color:var(--ink-500); text-align:center; margin:8px 0 0;} .audio-quiz-card{ max-width:640px; margin:44px auto 0; text-align:center; background:var(--white); border:1px solid rgba(27,67,50,.15); border-radius:var(--radius-lg); padding:24px 22px; box-shadow:var(--shadow-1); } .audio-quiz-options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-top:16px; } .audio-quiz-options button{ background:var(--cream-50); border:1px solid rgba(27,67,50,.2); border-radius:var(--radius-md); padding:12px 10px; font-size:.9rem; cursor:pointer; transition:.2s; } .audio-quiz-options button:hover{background:rgba(201,162,39,.15); border-color:var(--gold-500);} .audio-quiz-options button.correct{background:#e4f3e9; border-color:var(--green-600); color:var(--green-800);} .audio-quiz-options button.incorrect{background:#fbe4e4; border-color:#c0392b; color:#c0392b;} .audio-quiz-feedback{margin:12px auto 0; padding:10px 14px; border-radius:10px; font-size:.95rem; font-weight:700; line-height:1.6; min-height:1.4em; color:#173c2d;} .audio-quiz-feedback:empty{padding:0; background:transparent;} .audio-quiz-feedback.ok{background:#e9f7ef; border:1px solid #2e8b57; color:#14532d;} .audio-quiz-feedback.bad{background:#fdecec; border:1px solid #c0392b; color:#8b1e1e;} .experimental-badge{ display:inline-block; font-size:.65rem; font-weight:700; color:#8a5a00; background:#fff3d6; border:1px solid #e0b352; border-radius:999px; padding:2px 10px; vertical-align:middle; margin-inline-start:6px; } .nav-cta{ background:var(--gold-500); color:var(--navy-950) !important; font-weight:700 !important; padding:10px 20px !important; } .nav-cta:hover{background:var(--gold-300) !important;} .nav-login-btn{ background:none; border:1px solid rgba(201,162,39,.5); color:var(--gold-300); padding:9px 18px; border-radius:999px; font-size:.92rem; font-weight:600; margin-inline-start:6px; transition:background .18s, color .18s; } .nav-login-btn:hover{ background:rgba(201,162,39,.15); } .nav-user{ display:flex; align-items:center; gap:10px; margin-inline-start:6px; padding:6px 8px 6px 14px; border:1px solid rgba(201,162,39,.3); border-radius:999px; } .nav-user-name{ color:var(--gold-300); font-size:.9rem; font-weight:600; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav-user-logout{ background:var(--gold-500); color:var(--navy-950); font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:999px; border:none; cursor:pointer; } .nav-user-logout:hover{background:var(--gold-300);} .nav-toggle{ display:none; background:none; border:1px solid rgba(201,162,39,.4); border-radius:8px; padding:8px 10px; color:var(--gold-300); } .nav-toggle span{ display:block; width:22px; height:2px; background:var(--gold-300); margin:4px 0; border-radius:2px; } /* =========================== قسم البداية (Hero) =========================== */ .hero{ position:relative; background: radial-gradient(ellipse at 15% 0%, rgba(201,162,39,.16), transparent 55%), linear-gradient(180deg, var(--navy-950), var(--navy-900) 65%, var(--green-800)); color:var(--cream-100); overflow:hidden; padding:100px 0 0; } .hero-pattern{ position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='.6' opacity='0.18'%3E%3Cpath d='M60 4 L104 32 L104 88 L60 116 L16 88 L16 32 Z'/%3E%3Cpath d='M60 4 L60 116 M16 32 L104 88 M104 32 L16 88'/%3E%3Ccircle cx='60' cy='60' r='20'/%3E%3C/g%3E%3C/svg%3E"); background-size:220px; pointer-events:none; } .hero-inner{ position:relative; max-width:1180px; margin:0 auto; padding:64px 24px 0; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; } .hero h1{ color:var(--white); font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.35; margin-bottom:20px; } .hero h1 em{ font-style:normal; color:var(--gold-300); } .hero p.lead{ font-size:1.15rem; color:var(--cream-100); opacity:.9; max-width:520px; margin-bottom:32px; } .hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px;} .btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:999px; font-weight:700; font-size:1rem; border:2px solid transparent; transition:transform .18s ease, background .2s, color .2s, border-color .2s; } .btn:hover{transform:translateY(-2px);} .btn-primary{background:var(--gold-500); color:var(--navy-950);} .btn-primary:hover{background:var(--gold-300);} .btn-outline{border-color:rgba(250,246,234,.4); color:var(--cream-50);} .btn-outline:hover{border-color:var(--gold-300); color:var(--gold-300);} .btn-dark{background:var(--navy-950); color:var(--gold-300);} .btn-dark:hover{background:var(--navy-800);} .hero-ayah{ position:relative; background:rgba(250,246,234,.06); border:1px solid rgba(201,162,39,.35); border-radius:var(--radius-lg); padding:36px 28px; text-align:center; backdrop-filter:blur(2px); } .hero-ayah p{ font-family:var(--font-display); font-size:1.9rem; color:var(--gold-100); margin-bottom:10px; line-height:1.9; } .hero-ayah span{ font-size:.85rem; color:var(--cream-100); opacity:.75; } .hero-stats{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(201,162,39,.2); margin-top:20px; } .hero-stats div{ padding:26px 12px; text-align:center; border-inline-start:1px solid rgba(201,162,39,.2); } .hero-stats div:first-child{border-inline-start:none;} .hero-stats strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--gold-300); } .hero-stats span{font-size:.85rem; color:var(--cream-100); opacity:.8;} /* =========================== ملخص المستويات =========================== */ .levels{background:var(--cream-50);} .levels-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .level-card{ background:var(--white); border-radius:var(--radius-md); padding:26px 24px; box-shadow:var(--shadow-1); border-top:4px solid var(--green-600); transition:transform .2s, box-shadow .2s; } .level-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-2);} .level-num{ font-family:var(--font-display); font-size:.95rem; color:var(--gold-600); font-weight:700; margin-bottom:10px; display:block; } .level-card h3{font-size:1.2rem; margin-bottom:8px;} .level-card p{color:var(--ink-700); font-size:.95rem; margin-bottom:0;} /* =========================== تتبّع التقدم =========================== */ .progress-widget{ max-width:640px; margin:0 auto 40px; background:var(--white); border:1px solid rgba(27,67,50,.1); border-radius:var(--radius-md); padding:20px 24px; box-shadow:var(--shadow-1); display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .progress-widget-text{ display:flex; flex-direction:column; gap:2px; min-width:160px; } .progress-widget-text strong{font-size:.98rem; color:var(--navy-950);} .progress-widget-text span{font-size:.85rem; color:var(--ink-500);} .progress-track{ flex:1; min-width:120px; height:10px; background:var(--cream-100); border-radius:999px; overflow:hidden; } .progress-fill-global{ height:100%; width:0%; background:linear-gradient(90deg,var(--green-600),var(--gold-500)); border-radius:999px; transition:width .35s ease; } .progress-pct{ font-weight:700; color:var(--green-700); font-size:.95rem; min-width:44px; text-align:left; } /* شارة التقدم داخل عنوان كل مستوى */ .lg-progress-badge{ display:inline-block; margin-inline-start:8px; font-size:.78rem; color:var(--gold-300); opacity:.9; } /* مربع "أنهيت هذا الدرس" */ .lesson-check{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-700); cursor:pointer; padding-top:10px; border-top:1px dashed rgba(27,67,50,.15); margin-top:4px; } .lesson-check-input{ width:17px; height:17px; accent-color:var(--green-600); cursor:pointer; } .lesson-card.is-complete{ border-color:var(--green-500); background:linear-gradient(180deg, rgba(45,106,79,.06), var(--cream-50)); } /* =========================== بحث سريع داخل الدروس =========================== */ .lesson-search-wrap{ max-width:480px; margin:0 auto 20px; } .lesson-search{ width:100%; padding:14px 20px; border-radius:999px; border:1px solid rgba(27,67,50,.2); background:var(--white); font-family:inherit; font-size:.98rem; } .lesson-search:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.18); } .lesson-search-empty{ text-align:center; color:var(--ink-500); display:none; margin:0 0 20px; } .lesson-search-empty.show{display:block;} /* =========================== فلاتر الأحكام =========================== */ .filter-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:36px; } .chip{ background:var(--white); border:1px solid rgba(27,67,50,.2); color:var(--ink-700); padding:9px 20px; border-radius:999px; font-size:.9rem; font-weight:500; transition:background .18s, color .18s, border-color .18s; } .chip:hover{border-color:var(--green-600);} .chip.active{ background:var(--green-700); border-color:var(--green-700); color:var(--white); } .lesson-card.is-hidden{display:none;} .level-group.is-hidden{display:none;} /* =========================== المعجم =========================== */ .glossary{background:var(--cream-50);} .glossary-search-wrap{ max-width:520px; margin:0 auto 36px; } .glossary-search{ width:100%; padding:15px 20px; border-radius:999px; border:1px solid rgba(27,67,50,.2); background:var(--white); font-family:inherit; font-size:1rem; } .glossary-search:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.18); } .glossary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; } .glossary-card{ background:var(--white); border-radius:var(--radius-md); padding:20px 22px; box-shadow:var(--shadow-1); border-inline-start:4px solid var(--green-600); } .glossary-card h4{ font-size:1.1rem; margin-bottom:10px; color:var(--navy-950); } .glossary-def{margin-bottom:8px; font-size:.92rem; color:var(--ink-700);} .glossary-def b{ display:inline-block; color:var(--gold-600); font-weight:700; margin-inline-end:6px; } .glossary-empty{ text-align:center; color:var(--ink-500); display:none; margin-top:12px; } .glossary-empty.show{display:block;} /* =========================== الدروس =========================== */ .lessons{background:var(--cream-100);} .level-group{ background:var(--white); border-radius:var(--radius-md); margin-bottom:18px; box-shadow:var(--shadow-1); overflow:hidden; border:1px solid rgba(27,67,50,.08); } .level-group summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; background:var(--navy-950); color:var(--cream-50); } .level-group summary::-webkit-details-marker{display:none;} .level-group summary .lg-title{ display:flex; align-items:center; gap:14px; } .level-group summary .lg-badge{ width:38px; height:38px; border-radius:50%; background:var(--gold-500); color:var(--navy-950); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; flex-shrink:0; } .level-group summary h3{color:var(--cream-50); margin:0; font-size:1.15rem;} .level-group summary .lg-sub{color:var(--gold-300); font-size:.85rem; display:block; margin-top:2px; font-family:var(--font-body);} .lg-chevron{ width:26px; height:26px; border:1px solid rgba(201,162,39,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-300); transition:transform .25s; flex-shrink:0; } .level-group[open] .lg-chevron{transform:rotate(180deg);} .lg-body{ padding:28px; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; } .lesson-card{ border:1px solid rgba(27,38,32,.08); border-radius:var(--radius-md); padding:22px; background:var(--cream-50); } .lesson-card h4{ font-size:1.08rem; display:flex; align-items:center; gap:8px; margin-bottom:10px; } .rule-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; display:inline-block; } .lesson-card p{color:var(--ink-700); font-size:.95rem; margin-bottom:14px;} .ayah-box{ background:var(--white); border:1px dashed rgba(27,67,50,.35); border-radius:var(--radius-sm); padding:16px 18px; text-align:center; margin-bottom:10px; } .ayah-box p{ font-family:var(--font-display); font-size:1.55rem; color:var(--navy-950); margin-bottom:6px; direction:rtl; } .ayah-box .ref{ font-family:var(--font-body); font-size:.78rem; color:var(--ink-500); margin:0; } /* تلوين أحكام التجويد */ .tj-idhhar{ text-decoration:underline; text-decoration-color:var(--tj-idhhar); text-decoration-thickness:3px; } .tj-idgham{ color:var(--tj-idgham); font-weight:700; } .tj-iqlab{ color:var(--tj-iqlab); font-weight:700; } .tj-ikhfa{ color:var(--tj-ikhfa); font-weight:700; } .tj-madd{ color:var(--tj-madd); font-weight:700; } .tj-qalqalah{ color:var(--tj-qalqalah); font-weight:700; } .legend{ display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center; background:var(--white); border-radius:var(--radius-md); padding:18px 22px; margin:0 auto 40px; max-width:900px; box-shadow:var(--shadow-1); } .legend-item{display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--ink-700);} /* =========================== التمارين =========================== */ .quiz-wrap{background:var(--navy-950); color:var(--cream-50);} .quiz-wrap .section-head h2{color:var(--white);} .quiz-wrap .section-head p{color:var(--cream-100); opacity:.85;} .quiz-wrap .section-eyebrow{background:rgba(201,162,39,.15); color:var(--gold-300);} .quiz-card{ max-width:720px; margin:0 auto; background:var(--navy-800); border:1px solid rgba(201,162,39,.25); border-radius:var(--radius-lg); padding:36px; } .quiz-progress{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; font-size:.85rem; color:var(--gold-300); } .quiz-progress-bar{ flex:1; height:6px; background:rgba(250,246,234,.15); border-radius:999px; margin:0 16px; overflow:hidden; } .quiz-progress-fill{ height:100%; background:var(--gold-500); width:0%; transition:width .3s ease; } .quiz-question-ayah{ font-family:var(--font-display); font-size:1.9rem; text-align:center; color:var(--gold-100); margin-bottom:8px; line-height:1.9; } .quiz-question-text{ text-align:center; font-weight:700; font-size:1.15rem; margin-bottom:26px; color:var(--white); } .quiz-options{ display:grid; gap:12px; margin-bottom:20px; } .quiz-option{ text-align:right; background:rgba(250,246,234,.06); border:1px solid rgba(250,246,234,.18); color:var(--cream-50); padding:15px 18px; border-radius:var(--radius-sm); font-size:1rem; transition:background .18s, border-color .18s; } .quiz-option:hover:not(:disabled){border-color:var(--gold-300); background:rgba(201,162,39,.12);} .quiz-option.correct{background:rgba(45,106,79,.35); border-color:var(--green-500); color:var(--gold-100);} .quiz-option.incorrect{background:rgba(140,47,47,.35); border-color:var(--tj-madd);} .quiz-option:disabled{cursor:default;} .quiz-feedback{ border-radius:var(--radius-sm); padding:16px 18px; font-size:.95rem; margin-bottom:20px; display:none; } .quiz-feedback.show{display:block;} .quiz-feedback.ok{background:#e9f7ef; border:1px solid #2e8b57; color:#14532d; font-weight:700;} .quiz-feedback.bad{background:#fdecec; border:1px solid #c0392b; color:#8b1e1e; font-weight:700;} .quiz-actions{display:flex; justify-content:flex-end; gap:10px;} .quiz-score{ text-align:center; display:none; } .quiz-score.show{display:block;} .quiz-score h3{color:var(--gold-300); font-size:2rem;} .quiz-score p{color:var(--cream-100);} .quiz-mistakes-review{ margin:18px auto 20px; max-width:560px; text-align:right; background:rgba(243,230,187,.1); border:1px solid rgba(227,197,103,.28); border-radius:var(--radius-md); padding:14px 16px; color:var(--cream-100); } .quiz-mistakes-review strong,.quiz-mistakes-review span{display:block;} .quiz-mistakes-review strong{color:var(--gold-300); margin-bottom:4px;} .quiz-mistakes-review span{font-size:.85rem; opacity:.85;} .quiz-mistakes-review ul{margin:10px 0 0; padding-inline-start:20px;} .quiz-mistakes-review li{margin:8px 0; line-height:1.7;} .quiz-mistakes-review small{opacity:.8;} .audio-quiz-player{ display:block; width:100%; margin:0 0 14px; border-radius:var(--radius-sm); accent-color:var(--green-600); } .audio-quiz-sample{ background:var(--cream-50); border:1px dashed rgba(27,67,50,.28); border-radius:var(--radius-md); padding:12px 14px; font-family:var(--font-display); font-size:1.2rem; color:var(--navy-950); margin:0 0 14px; } /* =========================== الموارد =========================== */ .resources-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; } .resource-card{ background:var(--white); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:10px; border-inline-start:4px solid var(--gold-500); } .resource-icon{ width:44px; height:44px; border-radius:12px; background:var(--cream-100); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.2rem; color:var(--green-700); } .resource-card h4{font-size:1.05rem; margin-bottom:0;} .resource-card p{color:var(--ink-700); font-size:.9rem; margin-bottom:6px;} .resource-tag{ font-size:.75rem; color:var(--gold-600); font-weight:700; } .resource-link{ margin-top:auto; color:var(--green-700); font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; } .resource-card.is-soon{ opacity:.72; } .resource-card-video{ min-width:0; } .resource-video{ display:block; width:100%; aspect-ratio:16 / 9; object-fit:contain; background:var(--green-800); border:1px solid rgba(13,31,26,.14); border-radius:var(--radius-sm); box-shadow:var(--shadow-1); } .resource-video:focus-visible{ outline:3px solid var(--gold-500); outline-offset:3px; } .resource-video-meta{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--ink-500); font-size:.78rem; } .resource-soon-badge{ margin-top:auto; align-self:flex-start; background:var(--cream-100); color:var(--ink-500); font-size:.8rem; font-weight:700; padding:6px 14px; border-radius:999px; } /* =========================== من نحن وتواصل =========================== */ .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; } .about-text h2{text-align:right; font-size:clamp(1.6rem,3vw,2.1rem);} .about-text p{color:var(--ink-700);} .about-values{ display:grid; gap:14px; margin-top:24px; } .about-values li{ display:flex; gap:12px; align-items:flex-start; background:var(--white); border-radius:var(--radius-sm); padding:14px 16px; box-shadow:var(--shadow-1); } .about-values b{display:block; margin-bottom:2px;} .about-values span{color:var(--ink-500); font-size:.88rem;} .contact-form{ background:var(--white); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-1); } .field{margin-bottom:18px;} .field label{display:block; font-weight:700; margin-bottom:8px; font-size:.92rem;} .field input, .field textarea{ width:100%; padding:13px 14px; border:1px solid rgba(27,38,32,.18); border-radius:var(--radius-sm); font-family:inherit; font-size:.98rem; background:var(--cream-50); resize:vertical; } .field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.18); } .form-note{ font-size:.82rem; color:var(--ink-500); margin-top:10px; } .form-success{ display:none; background:rgba(45,106,79,.12); border:1px solid var(--green-500); color:var(--green-800); padding:14px 16px; border-radius:var(--radius-sm); margin-top:14px; font-size:.92rem; } .form-success.show{display:block;} .form-success.is-error{ background:rgba(140,47,47,.12); border-color:#8C2F2F; color:#8C2F2F; } /* =========================== التذييل =========================== */ footer{ background:var(--navy-950); color:var(--cream-100); padding:56px 0 24px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(201,162,39,.2); } .footer-brand p{color:var(--cream-100); opacity:.75; font-size:.92rem; max-width:320px;} footer h5{color:var(--gold-300); font-family:var(--font-body); font-size:.95rem; margin-bottom:14px;} footer ul li{margin-bottom:10px;} footer a{color:var(--cream-100); opacity:.85; font-size:.92rem;} footer a:hover{color:var(--gold-300); opacity:1;} .footer-bottom{ padding-top:20px; text-align:center; font-size:.82rem; color:var(--cream-100); opacity:.6; } /* =========================== استجابة الشاشات =========================== */ @media (max-width:960px){ .hero-inner{grid-template-columns:1fr;} .levels-grid{grid-template-columns:repeat(2,1fr);} .about-grid{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr;} } @media (max-width:720px){ body{padding-bottom:68px;} .mobile-shortcuts{ position:fixed; z-index:45; inset-inline:0; bottom:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(10,27,31,.98); border-top:1px solid rgba(201,162,39,.35); box-shadow:0 -8px 24px rgba(10,27,31,.14); } .mobile-shortcuts a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:62px; color:var(--cream-100); font-size:.68rem; } .mobile-shortcuts a span:first-child{font-size:1rem; line-height:1.2;} .mobile-shortcuts a:hover,.mobile-shortcuts a:focus-visible{color:var(--gold-300); background:rgba(201,162,39,.12);} .nav-links{ position:absolute; top:100%; inset-inline:0; background:var(--navy-950); flex-direction:column; align-items:stretch; padding:10px 20px 20px; border-bottom:1px solid rgba(201,162,39,.25); display:none; } .nav-links.open{display:flex;} .nav-links a{padding:14px 10px; border-radius:8px;} .nav-toggle{display:block;} .levels-grid{grid-template-columns:1fr;} .hero-stats{grid-template-columns:1fr; } .hero-stats div{border-inline-start:none; border-top:1px solid rgba(201,162,39,.2);} .hero-stats div:first-child{border-top:none;} section{padding:60px 0;} .footer-grid{grid-template-columns:1fr;} .quiz-card{padding:24px 18px;} .continue-learning-card{align-items:stretch; flex-direction:column; padding:20px; gap:14px;} .continue-learning-card .btn{justify-content:center;} .nav-reciter{justify-content:space-between; margin-top:4px;} .nav-cta,.nav-login-btn{width:100%; text-align:center; justify-content:center;} } @media (max-width:420px){ .resource-video-meta{font-size:.7rem;} .audio-quiz-card{padding:18px 14px;} } /* =========================== أزرار الطباعة =========================== */ .print-all-wrap{ display:flex; justify-content:center; margin-bottom:36px; } .lesson-print-btn{ margin-top:8px; background:none; border:1px solid rgba(27,67,50,.25); color:var(--green-700); font-size:.82rem; font-weight:600; padding:8px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; transition:background .18s, border-color .18s; } .lesson-print-btn:hover{ background:rgba(45,106,79,.08); border-color:var(--green-600); } /* =========================== إعدادات الطباعة =========================== */ #printableArea{ display:none; } @media print{ body > *:not(#printableArea){ display:none !important; } body{ background:#fff; } #printableArea{ display:block !important; } .print-header{ text-align:center; margin-bottom:26px; border-bottom:2px solid var(--gold-500); padding-bottom:10px; } .print-header h1{ color:var(--navy-950); font-size:1.4rem; margin:0 0 4px; } .print-header p{ color:#555; font-size:.85rem; margin:0; } .print-level:not(:last-of-type){ page-break-after:always; } .print-level h2{ color:var(--navy-950); border-bottom:1px solid var(--gold-500); padding-bottom:6px; margin-bottom:16px; } .print-lesson{ break-inside:avoid; page-break-inside:avoid; margin-bottom:22px; padding-bottom:16px; border-bottom:1px dashed #ccc; } .print-lesson h3{ color:var(--navy-950); margin-bottom:6px; } .print-rule{ margin-bottom:10px; line-height:1.9; } .print-ayah{ text-align:center; border:1px solid #ccc; border-radius:8px; padding:12px; margin-bottom:8px; } .print-ayah p:first-child{ font-family:var(--font-display); font-size:1.3rem; margin:0 0 6px; } .print-ref{ font-size:.8rem; color:#555; margin:0; } .print-memory{ font-size:.9rem; background:#faf6ea; padding:8px 12px; border-radius:6px; margin:0; } } /* =========================== زر فتح الدرس التفصيلي =========================== */ .lesson-open-btn{ margin-top:10px; margin-inline-start:8px; background:var(--green-600); border:1px solid var(--green-600); color:var(--cream-50); font-size:.82rem; font-weight:700; padding:8px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; transition:background .18s, transform .18s; } .lesson-open-btn:hover{ background:var(--green-700); transform:translateY(-1px); } /* =========================== نافذة تفاصيل الدرس =========================== */ .lesson-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(10,27,31,.72); backdrop-filter:blur(3px); z-index:200; align-items:flex-start; justify-content:center; padding:min(6vh,60px) 16px 40px; overflow-y:auto; } .lesson-modal-overlay.open{ display:flex; } .lesson-modal{ width:100%; max-width:760px; background:linear-gradient(180deg, var(--navy-950), var(--navy-900) 70%, var(--green-800)); color:var(--cream-100); border:1px solid rgba(201,162,39,.28); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); padding:28px 26px 32px; position:relative; } .lm-topbar{ display:flex; justify-content:flex-end; margin-bottom:4px; } .lm-close{ width:38px; height:38px; border-radius:12px; border:1px solid rgba(243,230,187,.25); background:rgba(255,255,255,.04); color:var(--cream-50); font-size:1rem; line-height:1; } .lm-close:hover{ background:rgba(255,255,255,.1); } .lm-header{ margin-bottom:14px; } .lm-progress-indicator{ display:inline-flex; align-items:center; background:rgba(201,162,39,.12); color:var(--gold-300); border:1px solid rgba(201,162,39,.25); border-radius:999px; padding:4px 10px; font-size:.75rem; font-weight:700; margin-bottom:10px; } .lm-eyebrow{ display:block; font-size:.78rem; color:var(--gold-300); font-weight:700; margin-bottom:8px; } .lm-header .tag{ display:inline-flex; margin-bottom:10px; background:rgba(201,162,39,.16); color:var(--gold-300); border-radius:999px; padding:4px 12px; font-size:.78rem; font-weight:700; } .lesson-modal h1{ font-family:var(--font-display); font-size:clamp(1.8rem, 4vw, 2.6rem); margin:4px 0 10px; color:var(--white); } .lm-lead{ color:var(--cream-100); opacity:.88; line-height:1.9; margin:0; } .lm-ayah-box{ font-family:var(--font-display); font-size:clamp(1.5rem, 4vw, 2.1rem); text-align:center; background:rgba(0,0,0,.18); border:1px solid rgba(201,162,39,.25); border-radius:var(--radius-md); padding:22px 16px; margin:18px 0 8px; color:var(--gold-100); line-height:2; } .lm-ayah-box span[class^="tj-"]{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; color:var(--gold-300); } .lm-ref{ text-align:center; font-size:.82rem; color:var(--cream-100); opacity:.7; margin:0 0 18px; } .lm-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; } .lm-info-card{ background:rgba(255,255,255,.04); border:1px solid rgba(243,230,187,.14); border-radius:var(--radius-md); padding:16px 18px; } .lm-info-card h3{ margin:0 0 8px; font-size:.95rem; color:var(--gold-300); } .lm-info-card p{ margin:0; font-size:.88rem; color:var(--cream-100); opacity:.92; line-height:1.9; } .lm-check{ color:var(--cream-100); border-top:1px dashed rgba(243,230,187,.2); margin-bottom:20px; } .lm-check .lesson-check-input{ accent-color:var(--gold-500); } .lm-quiz-card{ background:rgba(0,0,0,.2); border:1px solid rgba(201,162,39,.22); border-radius:var(--radius-md); padding:18px 18px 8px; margin-bottom:20px; } .lm-quiz-card h3{ margin:0 0 10px; font-size:1rem; color:var(--gold-300); } .lm-quiz-ayah{ font-family:var(--font-display); font-size:1.3rem; color:var(--gold-100); margin:0 0 8px; } .lm-nav{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; } .lm-nav .btn{ flex:1 1 auto; text-align:center; } @media (max-width:640px){ .lm-two{ grid-template-columns:1fr; } .lesson-modal{ padding:22px 16px 26px; } } /* ========================================================= إضافات: استماع صوتي حقيقي، بطاقات مراجعة، XP وأيام متتالية، الإنجازات، والتنبيه الشرعي — بنفس نظام الألوان والخطوط أعلاه ========================================================= */ /* زر الاستماع (مضاف تلقائيًا داخل كل .ayah-box و .lm-ayah-box عبر script.js) */ .ayah-listen-group{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:6px; } .ayah-listen-btn{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1px solid var(--green-600); background:var(--cream-50); color:var(--green-700); font-family:var(--font-body); font-size:.8rem; font-weight:700; cursor:pointer; transition:.2s; } .ayah-listen-btn:hover{background:var(--green-800); color:var(--cream-50); border-color:var(--green-800);} .ayah-listen-btn:disabled{opacity:.6; cursor:default;} .ayah-listen-btn.playing{background:#8a1f1f; color:#fff; border-color:#8a1f1f;} .lm-ayah-box .ayah-listen-btn{ border-color:var(--gold-300); background:transparent; color:var(--gold-300); } .lm-ayah-box .ayah-listen-btn:hover{background:var(--gold-300); color:var(--navy-950);} .lm-ayah-box .ayah-listen-btn.playing{background:#8a1f1f; color:#fff; border-color:#8a1f1f;} /* تنبيه توست صغير أسفل الشاشة لرسائل الاستماع (تلاوة حقيقية / نطق آلي) */ .itqan-toast{ position:fixed; bottom:22px; right:50%; transform:translateX(50%); max-width:min(92vw,420px); background:var(--navy-950); color:var(--cream-100); border:1px solid rgba(201,162,39,.4); border-radius:var(--radius-md); padding:12px 18px; font-size:.85rem; text-align:center; box-shadow:var(--shadow-2); z-index:200; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; } .itqan-toast.show{opacity:1; transform:translateX(50%) translateY(-6px);} /* تنبيه شرعي/أخلاقي */ .teacher-note{ max-width:760px; margin:36px auto 0; background:var(--gold-100); border:1px solid var(--gold-300); border-radius:var(--radius-md); padding:18px 22px; font-size:.88rem; line-height:1.9; color:var(--ink-900); text-align:center; } .teacher-note b{color:var(--gold-600);} /* بطاقة XP والأيام المتتالية — تعرض بجانب شريط تقدم الدروس */ .xp-streak-widget{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:520px; margin:16px auto 0; } .xp-pill{ display:flex; align-items:center; gap:8px; background:var(--navy-950); color:var(--gold-300); border-radius:999px; padding:9px 18px; font-size:.85rem; font-weight:700; } .xp-pill b{color:var(--cream-50); font-size:1rem;} /* شريط الإنجازات */ .achievements-strip{ max-width:920px; margin:34px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; } .ach-badge{ background:var(--white); border:1px solid rgba(27,67,50,.18); border-radius:var(--radius-md); padding:14px 10px; text-align:center; opacity:.42; transition:.2s; } .ach-badge.unlocked{opacity:1; border-color:var(--gold-300); box-shadow:var(--shadow-1);} .ach-badge .ach-icon{font-size:1.6rem; display:block; margin-bottom:6px;} .ach-badge .ach-label{font-size:.78rem; color:var(--ink-700); display:block;} /* بطاقات المراجعة التفاعلية — قلب 3D، مع ألوان صريحة على كل وجه لتفادي مشكلة اللون السابقة */ .flashcards-block{ max-width:640px; margin:56px auto 0; text-align:center; } .flashcards-block .section-eyebrow{display:inline-block; margin-bottom:10px;} .flash-counter{font-size:.8rem; color:var(--ink-500); margin-bottom:14px;} .flashcard{ perspective:1200px; height:190px; cursor:pointer; margin-bottom:18px; } .flashcard-inner{ position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; } .flashcard.showing-answer .flashcard-inner{transform:rotateY(180deg);} .flashcard-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; box-shadow:var(--shadow-2); } .flashcard-front{ background:var(--navy-950); color:var(--cream-50); border:1px solid var(--gold-500); } .flashcard-back{ background:var(--gold-100); color:var(--navy-950); transform:rotateY(180deg); border:1px solid var(--gold-500); } .flashcard-tag{font-size:.72rem; color:var(--gold-300); margin-bottom:8px; display:block;} .flashcard-back .flashcard-tag{color:var(--gold-600);} .flashcard-face h4{font-family:var(--font-display); font-size:1.35rem; margin:0; line-height:1.7;} .flashcard-front h4{color:var(--cream-50);} .flashcard-back h4{color:var(--navy-950);} .flashcard-hint{font-size:.72rem; opacity:.7; margin-top:10px; display:block;} .flash-actions{display:flex; gap:10px; justify-content:center;} @media (max-width:640px){ .flashcard{height:220px;} } /* =========================== Supabase Auth =========================== */ .auth-modal-overlay{ display:none; position:fixed; inset:0; z-index:3000; align-items:center; justify-content:center; padding:18px; background:rgba(6,25,20,.78); backdrop-filter:blur(6px); } .auth-modal-overlay.open{display:flex;} .auth-modal{ position:relative; width:min(100%, 460px); padding:34px 30px 28px; border:1px solid rgba(201,162,39,.4); border-radius:22px; background:var(--cream-50, #fffdf5); box-shadow:0 24px 80px rgba(0,0,0,.35); color:var(--navy-950, #0d1f1a); } .auth-modal h2{margin:8px 0 8px;} .auth-modal > p:not(.auth-status){margin:0 0 22px;color:var(--ink-600, #5f675f);} .auth-modal-close{ position:absolute; top:12px; left:14px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(13,31,26,.08); color:var(--navy-950, #0d1f1a); cursor:pointer; font-size:1.1rem; } .auth-modal-close:hover{background:rgba(201,162,39,.22);} .auth-form{display:grid;gap:13px;} .auth-form .field{margin:0;} .auth-form input{width:100%;} .auth-submit{width:100%;justify-content:center;margin-top:4px;} .auth-mode-toggle,.auth-reset-btn{ display:block; width:100%; margin-top:13px; padding:8px; border:0; background:transparent; color:var(--green-700, #2d6a4f); cursor:pointer; font-family:inherit; font-size:.92rem; } .auth-reset-btn{margin-top:0;color:var(--ink-500, #757d75);font-size:.82rem;} .auth-mode-toggle:hover,.auth-reset-btn:hover{text-decoration:underline;} .auth-status{min-height:24px;margin:14px 0 0;color:var(--green-700, #2d6a4f);font-size:.9rem;line-height:1.6;} .auth-status.is-error{color:#8c2f2f;} @media (max-width:640px){ .auth-modal{padding:30px 20px 22px;} } /* =========================== رموز مكتبة الموارد =========================== */ .resource-icon{ position:relative; overflow:hidden; font-weight:800; letter-spacing:-.03em; border:1px solid rgba(201,162,39,.24); box-shadow:0 8px 18px rgba(27,67,50,.08); } .resource-icon::after{ content:''; position:absolute; width:26px; height:26px; inset-inline-end:-9px; inset-block-end:-10px; border-radius:50%; background:rgba(255,255,255,.42); } .resource-icon-nun{background:linear-gradient(135deg,#edf7ee,#cfe9d8);color:#1f6b4c;font-size:1.3rem;} .resource-icon-madd{background:linear-gradient(135deg,#fff5cc,#efd98a);color:#8c6711;font-size:.82rem;} .resource-icon-video{background:linear-gradient(135deg,#e2f2ee,#a7d7c7);color:#155b4b;font-size:1.1rem;} .resource-icon-audio{background:linear-gradient(135deg,#e9e2f7,#cbbce7);color:#584078;font-size:1.45rem;} .resource-icon-meem{background:linear-gradient(135deg,#fce8e1,#efc1b4);color:#984b37;font-size:1.3rem;} .resource-icon-cards{background:linear-gradient(135deg,#e3edf7,#b8cee5);color:#28567d;font-size:1.35rem;} .resource-card:hover .resource-icon{transform:translateY(-2px) rotate(-2deg);transition:transform .2s ease;} /* =========================== معاينات بطاقات الموارد =========================== */ .resource-preview{ display:block; width:100%; height:148px; object-fit:cover; border-radius:14px; border:1px solid rgba(27,67,50,.12); background:#f7f4e9; box-shadow:0 6px 16px rgba(27,67,50,.08); } .resource-preview-audio{object-fit:cover;} .resource-card:hover .resource-preview{box-shadow:0 10px 22px rgba(27,67,50,.13);} @media (max-width:640px){ .resource-preview{height:160px;} } /* =========================== تحدي اليوم =========================== */ .daily-challenge-wrap{padding:54px 0 18px;background:linear-gradient(180deg,#f8f3e4 0%,#eef5ee 100%);} .daily-challenge-card{display:grid;grid-template-columns:minmax(240px,.82fr) minmax(360px,1.18fr);gap:28px;align-items:stretch;padding:26px;border:1px solid rgba(201,162,39,.28);border-radius:26px;background:linear-gradient(135deg,#092923 0%,#123f32 58%,#1b5d44 100%);box-shadow:0 18px 40px rgba(11,43,33,.18);color:#fff;overflow:hidden;position:relative;} .daily-challenge-card::before{content:"";position:absolute;inset:auto -50px -85px auto;width:230px;height:230px;border:1px solid rgba(255,255,255,.13);border-radius:50%;box-shadow:0 0 0 24px rgba(255,255,255,.04),0 0 0 48px rgba(255,255,255,.025);pointer-events:none;} .daily-challenge-card-compact{margin:0 auto 26px;max-width:1050px;} .daily-challenge-intro,.daily-challenge-stage{position:relative;z-index:1;} .daily-challenge-intro{display:flex;flex-direction:column;justify-content:center;padding:8px 4px;} .daily-challenge-intro .section-eyebrow{color:#e7c94e;} .daily-challenge-intro h2,.daily-challenge-intro h3{margin:8px 0 10px;color:#fff;font-family:'Amiri',serif;font-size:clamp(1.8rem,3vw,2.35rem);} .daily-challenge-intro h3{font-size:clamp(1.5rem,2.5vw,2rem);} .daily-challenge-intro p{margin:0;color:rgba(255,255,255,.78);line-height:1.9;} .daily-challenge-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;} .daily-challenge-meta span{display:inline-flex;align-items:center;padding:7px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);color:#f5e8a3;font-size:.78rem;} .daily-challenge-stage{min-height:260px;display:flex;align-items:center;justify-content:center;padding:20px;border-radius:20px;background:rgba(247,243,228,.96);color:var(--navy-950);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);} .daily-challenge-start,.daily-challenge-question,.daily-challenge-result{width:100%;text-align:center;} .daily-challenge-start{display:flex;flex-direction:column;align-items:center;gap:8px;} .daily-challenge-icon,.daily-challenge-result-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:#e8c83b;color:#173c2e;font-size:1.55rem;box-shadow:0 8px 18px rgba(201,162,39,.25);} .daily-challenge-start strong,.daily-challenge-result strong{font-size:1.15rem;color:var(--navy-950);} .daily-challenge-start p,.daily-challenge-result p{margin:0 auto 10px;max-width:420px;color:var(--ink-600);line-height:1.8;font-size:.9rem;} .daily-challenge-question-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:15px;color:var(--ink-600);font-size:.82rem;font-weight:700;} .daily-challenge-prompt{margin:0 0 8px;color:var(--navy-950);font-weight:700;font-size:1.02rem;} .daily-challenge-ayah{margin:0 auto 15px;padding:11px 14px;border-radius:13px;background:#fff;color:var(--navy-950);font-family:'Amiri',serif;font-size:1.35rem;box-shadow:0 4px 12px rgba(11,43,33,.08);} .daily-challenge-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;} .daily-challenge-option{border:1px solid rgba(27,67,50,.2);border-radius:12px;padding:10px 9px;background:#fff;color:var(--navy-950);font:inherit;font-size:.86rem;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;} .daily-challenge-option:hover{transform:translateY(-2px);border-color:#c9a227;background:#fffbea;} .daily-challenge-option.correct{border-color:#197443;background:#dff5e6;color:#126036;} .daily-challenge-option.incorrect{border-color:#c33d43;background:#ffeaeb;color:#9c2027;} .daily-challenge-option:disabled{cursor:default;} .daily-challenge-feedback{min-height:24px;margin:10px 0 3px;color:var(--ink-600);font-size:.85rem;font-weight:700;} .daily-challenge-feedback.ok{color:#14713e;}.daily-challenge-feedback.bad{color:#a5232b;} .daily-challenge-next{padding:9px 18px;margin-top:4px;} .daily-challenge-result{display:flex;flex-direction:column;align-items:center;gap:10px;} .daily-challenge-result-icon{background:#dff5e6;color:#17673d;} .daily-challenge-result strong{font-size:1.35rem;} .daily-challenge-result p{margin-bottom:0;} .daily-challenge-result .btn{margin-top:2px;} @media (max-width:760px){ .daily-challenge-wrap{padding:38px 0 10px;} .daily-challenge-card{grid-template-columns:1fr;padding:20px;gap:16px;border-radius:20px;} .daily-challenge-intro{text-align:center;align-items:center;} .daily-challenge-meta{justify-content:center;} .daily-challenge-stage{min-height:245px;padding:16px;} } @media (max-width:430px){ .daily-challenge-options{grid-template-columns:1fr;} .daily-challenge-meta span{font-size:.72rem;padding:6px 8px;} } /* =========================== لوحات التمارين القابلة للفتح =========================== */ .exercise-panel{ max-width:900px; margin:0 auto 18px; border:1px solid rgba(201,162,39,.32); border-radius:20px; background:rgba(255,255,255,.96); box-shadow:0 8px 22px rgba(10,27,31,.08); overflow:hidden; } .exercise-panel summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer; list-style:none; color:var(--navy-950); font-family:var(--font-display); font-size:clamp(1.18rem,2vw,1.5rem); font-weight:700; background:linear-gradient(135deg,#fffdf4,#f4f7ef); transition:background .18s ease,color .18s ease; } .exercise-panel summary::-webkit-details-marker{display:none;} .exercise-panel summary::after{ content:'＋'; flex:none; display:grid; place-items:center; width:32px; height:32px; border:1px solid rgba(27,67,50,.2); border-radius:50%; color:var(--green-700); font-family:var(--font-body); font-size:1.2rem; line-height:1; transition:transform .22s cubic-bezier(.23,1,.32,1),background .18s ease; } .exercise-panel summary:hover{background:#fff8df;color:var(--green-800);} .exercise-panel summary:focus-visible{outline:3px solid var(--gold-500);outline-offset:-3px;} .exercise-panel[open] summary{background:linear-gradient(135deg,#f4ecd1,#e9f3e9);color:var(--green-800);} .exercise-panel[open] summary::after{content:'−';background:var(--gold-100);transform:rotate(180deg);} .exercise-panel-content{padding:22px 24px 26px;animation:exercisePanelReveal .22s cubic-bezier(.23,1,.32,1);} @keyframes exercisePanelReveal{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}} .exercise-panel-content > .section-head{margin:0 auto 28px;} .exercise-panel-content > .flashcards-block{margin:0 auto;} .quiz-wrap > .container > .section-head{margin-bottom:28px;} .quiz-wrap .exercise-panel{background:rgba(255,255,255,.97);} .quiz-wrap .exercise-panel .daily-challenge-card, .quiz-wrap .exercise-panel .quiz-card, .quiz-wrap .exercise-panel .audio-quiz-card{margin:0 auto;} .quiz-wrap .exercise-panel .daily-challenge-card{max-width:none;} .quiz-wrap .exercise-panel .audio-quiz-card{max-width:640px;} .exercise-panel .teacher-note{margin:22px auto 0;} @media (prefers-reduced-motion:reduce){.exercise-panel-content{animation:none}.exercise-panel summary::after{transition:none}} @media (max-width:640px){ .exercise-panel summary{padding:17px 16px;font-size:1.12rem;} .exercise-panel-content{padding:16px 12px 20px;} } /* =========================== تحسينات UI/UX — المرحلة الأولى =========================== */ .btn{ min-height:48px; min-width:132px; justify-content:center; text-align:center; line-height:1.35; padding:13px 22px; border-width:2px; box-shadow:0 5px 12px rgba(10,27,31,.08); transition:transform .16s cubic-bezier(.23,1,.32,1),background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease; } .btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(10,27,31,.12);} .btn:active{transform:scale(.97);box-shadow:0 3px 8px rgba(10,27,31,.1);} .btn:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;} .btn:disabled,.btn[aria-disabled="true"]{opacity:.58;cursor:not-allowed;transform:none;box-shadow:none;} .btn-outline{border-color:rgba(27,67,50,.3);color:var(--navy-950);background:transparent;} .btn-outline:hover{border-color:var(--green-700);color:var(--green-800);background:rgba(27,67,50,.06);} .hero .btn-outline{border-color:rgba(250,246,234,.46);color:var(--cream-50);background:transparent;} .hero .btn-outline:hover{border-color:var(--gold-300);color:var(--gold-300);background:rgba(255,255,255,.05);} .daily-challenge-stage .btn-outline,.quiz-wrap .audio-quiz-card .btn-outline{border-color:rgba(27,67,50,.3);color:var(--navy-950);} .daily-challenge-stage .btn-outline:hover,.quiz-wrap .audio-quiz-card .btn-outline:hover{border-color:var(--green-700);color:var(--green-800);background:rgba(27,67,50,.06);} /* شريط التقدم الرئيسي */ .progress-widget{ display:flex; align-items:center; gap:16px; padding:16px 18px; border:1px solid rgba(27,67,50,.13); border-radius:18px; background:linear-gradient(135deg,#fffdf5,#f3f7ef); box-shadow:0 8px 20px rgba(10,27,31,.06); } .progress-widget-text{flex:0 1 210px;min-width:150px;} .progress-widget-text strong{font-size:1rem;line-height:1.45;} .progress-widget-text span{line-height:1.5;} .progress-track{height:12px;background:rgba(27,67,50,.1);box-shadow:inset 0 1px 3px rgba(10,27,31,.08);} .progress-fill-global{background:linear-gradient(90deg,var(--green-700),var(--gold-500));box-shadow:0 0 10px rgba(201,162,39,.22);} .progress-pct{font-size:1rem;min-width:52px;padding:6px 9px;border-radius:10px;background:rgba(201,162,39,.16);} .xp-streak-widget{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;} .xp-pill{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:8px 13px;border:1px solid rgba(201,162,39,.24);border-radius:999px;background:#fffdf4;color:var(--navy-950);box-shadow:0 4px 12px rgba(10,27,31,.05);} .xp-pill b{color:var(--green-700);} /* بطاقة الحساب وإحصاءات التقدم */ .profile-stats{gap:14px;} .profile-stat{min-height:92px;display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(27,67,50,.08);box-shadow:0 5px 14px rgba(10,27,31,.04);} .profile-stat b{line-height:1.2;} .profile-stat span{margin-top:5px;} .profile-progress-track{height:12px;background:rgba(27,67,50,.09);box-shadow:inset 0 1px 3px rgba(10,27,31,.08);} .profile-progress-fill{background:linear-gradient(90deg,var(--green-700),var(--gold-500));box-shadow:0 0 10px rgba(201,162,39,.2);} .profile-progress-label{font-weight:700;color:var(--green-700);} .profile-sync-status{padding:8px 10px;border-radius:10px;background:rgba(27,67,50,.045);} /* حاويات أزرار التمارين */ .flash-actions,.lm-nav,.quiz-actions{align-items:center;gap:12px;} .flash-actions .btn,.lm-nav .btn,.quiz-actions .btn{min-width:150px;} .daily-challenge-next{min-width:160px;} @media (max-width:760px){ .progress-widget{align-items:stretch;flex-wrap:wrap;gap:10px;padding:14px;} .progress-widget-text{flex:1 1 100%;min-width:0;} .progress-track{order:3;flex:1 1 calc(100% - 62px);min-width:0;} .progress-pct{order:4;min-width:52px;text-align:center;} .xp-streak-widget{justify-content:center;} .xp-pill{flex:1 1 auto;justify-content:center;} .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:560px){ .btn{min-height:46px;min-width:0;padding:12px 16px;font-size:.93rem;} .hero-actions,.flash-actions,.lm-nav,.quiz-actions{gap:9px;} .hero-actions .btn,.flash-actions .btn,.lm-nav .btn,.quiz-actions .btn{flex:1 1 100%;width:100%;} .profile-stats{gap:9px;} .profile-stat{min-height:82px;padding:11px 6px;} .profile-stat b{font-size:1.25rem;} .profile-stat span{font-size:.72rem;} .daily-challenge-meta{gap:6px;} .daily-challenge-meta span{flex:1 1 auto;text-align:center;} } @media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover,.btn:active{transform:none}.progress-fill-global,.profile-progress-fill{transition:none}} /* رسائل الحالة وإمكانية الوصول — المرحلة الثانية */ .itqan-toast.success{border-color:#58b781;background:#123f30;color:#e7fff0;} .itqan-toast.error{border-color:#e87979;background:#5a2024;color:#fff1f1;} .auth-status{padding:9px 12px;border-radius:10px;} .auth-status:empty{padding:0;background:transparent;} .auth-status.is-success{background:#e9f7ef;border:1px solid #62b987;color:#14532d;} .auth-status.is-error{background:#fdecec;border:1px solid #df7770;color:#8b1e1e;} .audio-quiz-feedback.loading{background:#fff8df;border:1px solid #dec45a;color:#6e5812;} .quiz-option:focus-visible,.daily-challenge-option:focus-visible,.audio-quiz-options button:focus-visible,.flashcard:focus-visible,.lesson-check-input:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;} .learning-path-wrap{background:linear-gradient(180deg,#fffdf6,#f3f6ed);} .learning-path-head{margin-bottom:28px;} .learning-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1050px;margin:0 auto;} .learning-path-step{position:relative;display:flex;align-items:center;gap:11px;min-height:78px;padding:14px 16px;border:1px solid rgba(27,67,50,.13);border-radius:16px;background:#fff;color:var(--navy-950);box-shadow:0 6px 16px rgba(10,27,31,.05);transition:transform .18s cubic-bezier(.23,1,.32,1),border-color .18s ease,box-shadow .18s ease,background .18s ease;} .learning-path-step::after{content:'←';position:absolute;inset-inline-start:-11px;color:var(--gold-500);font-size:1.25rem;font-weight:700;} .learning-path-step:last-child::after{display:none;} .learning-path-step:hover{transform:translateY(-3px);border-color:rgba(201,162,39,.7);background:#fffdf5;box-shadow:0 10px 22px rgba(10,27,31,.09);} .learning-path-step:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;} .learning-path-number{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--navy-950);color:var(--gold-300);font-weight:700;} .learning-path-step strong,.learning-path-step small{display:block;} .learning-path-step strong{font-size:.92rem;line-height:1.5;} .learning-path-step small{margin-top:2px;color:var(--ink-500);font-size:.74rem;line-height:1.5;} @media (max-width:900px){.learning-path{grid-template-columns:repeat(2,minmax(0,1fr));}.learning-path-step:nth-child(2)::after{display:none;}} @media (max-width:560px){.learning-path{grid-template-columns:1fr;gap:9px;}.learning-path-step{min-height:68px;padding:12px 14px;}.learning-path-step::after{display:none;}} @media (prefers-reduced-motion:reduce){.learning-path-step{transition:none}.learning-path-step:hover{transform:none}.itqan-toast{transition:none}} /* إصلاح نهائي لمسار الطالب على الهاتف */ .learning-path-step > span:last-child{min-width:0;flex:1;} .learning-path-step strong,.learning-path-step small{white-space:normal;overflow-wrap:anywhere;} @media (max-width:560px){ .learning-path-wrap{padding:52px 0 44px;} .learning-path-head{padding:0 10px;margin-bottom:24px;} .learning-path-head h2{font-size:clamp(1.8rem,8vw,2.25rem);} .learning-path-head p{font-size:.94rem;line-height:1.9;} .learning-path{display:flex;flex-direction:column;gap:10px;width:100%;} .learning-path-step{display:flex;width:100%;min-width:0;min-height:72px;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;} .learning-path-number{width:36px;height:36px;font-size:1rem;} .learning-path-step strong{font-size:.94rem;line-height:1.55;} .learning-path-step small{font-size:.76rem;line-height:1.55;} }