/* رتِّل — الواجهة الرئيسية وخطط الاشتراك */
.hero{display:grid;gap:2.5rem;grid-template-columns:1.05fr .95fr;align-items:center;padding:3.5rem 0 2.5rem}
.hero-copy{display:grid;gap:1.15rem;justify-items:start}
.hero h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.22}
.hero .hl{font-family:var(--font-quran);color:var(--green-700);position:relative;white-space:nowrap}
.hero .hl::after{content:'';position:absolute;inset-inline:-2px;bottom:.08em;height:.34em;background:linear-gradient(90deg,var(--gold-200),transparent);z-index:-1;border-radius:6px}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap}
.trust{display:flex;gap:1.5rem;flex-wrap:wrap;padding-top:.4rem}
.trust-item{display:grid;gap:.1rem}
.trust-num{font-size:1.35rem;font-weight:700;color:var(--green-800)}
.trust-lbl{font-size:.76rem;color:var(--text-muted)}

.mushaf-mock{
  position:relative;border-radius:var(--radius-lg);padding:1.5rem;background:linear-gradient(160deg,#FFFDF7,#F6F2E4);
  border:1px solid var(--gold-200);box-shadow:var(--shadow-lift);
}
.mushaf-frame{border:2px solid var(--gold-400);border-radius:var(--radius);padding:1.1rem;background:#FFFEFB}
.mushaf-mock .line{font-family:var(--font-quran);font-size:1.22rem;line-height:2.5;text-align:center}
.tj{font-weight:700}
.tj-ghunnah{color:#C2185B}
.tj-idgham{color:#6D4C41}
.tj-madd{color:#1565C0}
.tj-qalqalah{color:#2E7D32}
.tj-ikhfa{color:#7B1FA2}
.mock-card{
  position:absolute;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:.7rem .9rem;box-shadow:var(--shadow-lift);display:flex;gap:.6rem;align-items:center;
  font-size:.82rem;font-weight:600;animation:floaty 5s ease-in-out infinite;
}
.mock-card.c1{inset-inline-start:-1.2rem;top:16%}
.mock-card.c2{inset-inline-end:-1.4rem;bottom:20%;animation-delay:1.4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.steps{counter-reset:st;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{position:relative;padding-top:2.6rem}
.step::before{
  counter-increment:st;content:counter(st);position:absolute;top:1.1rem;inset-inline-end:1.5rem;
  width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  background:var(--green-700);color:#fff;font-weight:700;font-size:.9rem;
}

.plans{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}
.plan{display:grid;gap:1rem;align-content:start;position:relative}
.plan.featured{border:2px solid var(--green-600);box-shadow:var(--shadow-lift)}
.plan-flag{position:absolute;top:-13px;inset-inline-start:50%;transform:translateX(50%);background:linear-gradient(180deg,var(--gold-400),var(--gold-600));color:#3A2A00;font-size:.72rem;font-weight:700;padding:.25rem .8rem;border-radius:var(--radius-pill);white-space:nowrap}
.plan-price{display:flex;align-items:baseline;gap:.35rem}
.plan-price b{font-size:2.1rem;line-height:1;color:var(--green-800)}
.plan-feats{display:grid;gap:.55rem;font-size:.9rem}
.plan-feats li{display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:start}
.ck{color:var(--green-600);margin-top:.35rem;flex:0 0 auto}
.ck.off{color:var(--border-strong)}
.faq{display:grid;gap:.6rem}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow-inner)}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink-2);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq details[open]{border-color:var(--green-100)}
.faq details p{margin-top:.6rem;color:var(--text-muted);font-size:.92rem}

/* رتِّل — دروس التجويد، مختبر المخارج، الملف الشخصي */

/* الدروس */
.lesson-card{display:grid;gap:.7rem;cursor:pointer;text-align:start;font:inherit;color:inherit;border:1px solid var(--border)}
.lesson-card.done{border-color:var(--green-500);background:linear-gradient(180deg,#F4FBF7,#fff)}
.lesson-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem}
.lesson-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-family:var(--font-quran);font-size:1.35rem;font-weight:700;background:var(--green-50);color:var(--green-800);border:1px solid var(--green-100);flex:0 0 auto}
.lesson-body{display:grid;gap:.9rem;max-width:78ch}
.rule-block{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.15rem;box-shadow:var(--shadow-inner);display:grid;gap:.55rem}
.rule-block h4{display:flex;align-items:center;gap:.5rem;color:var(--green-800)}
.rule-block .letters{font-family:var(--font-quran);font-size:1.5rem;color:var(--gold-700);line-height:1.9}
.example{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.7rem;border-radius:var(--radius-sm);background:var(--muted)}
.example .ex-text{font-family:var(--font-quran);font-size:1.35rem;line-height:2.2}
.example .ex-note{font-size:.8rem;color:var(--text-muted)}
.ex-mark{background:linear-gradient(180deg,var(--gold-200),var(--gold-400));border-radius:6px;padding:0 .15rem}

/* المختبر المرئي */
.lab{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.lab-stage{background:linear-gradient(165deg,#FFFDF8,#F2F6F1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--shadow-soft)}
.tract{width:100%;height:auto}
.zone{cursor:pointer;transition:opacity .25s,filter .25s}
.zone .zone-shape{transition:fill .25s,opacity .25s;fill:#CBDDD4}
.zone:hover .zone-shape{opacity:.85;filter:brightness(1.06)}
.zone.active .zone-shape{fill:var(--green-600)}
.zone .zone-label{font-family:var(--font-quran);font-size:11px;font-weight:700;fill:var(--ink-2);pointer-events:none;text-anchor:middle}
.zone.active .zone-label{fill:#fff}
.air-path{stroke:var(--gold-600);stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:7 7;opacity:0;transition:opacity .3s}
.air-path.on{opacity:1;animation:dash 1.1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}
.pulse{animation:pulseRing 1.6s ease-out infinite}
@keyframes pulseRing{0%{opacity:.7;r:6}100%{opacity:0;r:22}}

.lab-panel{display:grid;gap:1rem}
.letter-chips{display:flex;gap:.45rem;flex-wrap:wrap}
.chip{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--gold-50);border:1px solid var(--gold-200);color:var(--gold-700);font-family:var(--font-quran);font-size:1.4rem;font-weight:700}
.sifah-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.sifah{display:grid;gap:.2rem;padding:.85rem;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-inner)}
.sifah b{color:var(--green-800);font-size:.95rem}
.sifah span{font-size:.82rem;color:var(--text-muted)}

/* الفيديو */
.video-shell{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink);aspect-ratio:16/9;box-shadow:var(--shadow-soft)}
.video-shell iframe,.video-shell video{width:100%;height:100%;border:0;display:block}
.video-list{display:grid;gap:.6rem}
.video-item{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.7rem .85rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-inner)}

/* الملف الشخصي */
.ring-wrap{display:grid;place-items:center;gap:.5rem}
.ring{--p:0;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--green-600) calc(var(--p)*1%),var(--muted) 0);transition:background .6s var(--ease)}
.ring::after{content:'';position:absolute;inset:11px;border-radius:50%;background:var(--card);box-shadow:var(--shadow-inner)}
.ring b{position:relative;z-index:1;font-size:1.6rem;color:var(--green-800)}
.stat-row{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{padding:1rem;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-inner);display:grid;gap:.15rem}
.stat b{font-size:1.5rem;color:var(--green-800)}
.stat span{font-size:.78rem;color:var(--text-muted)}
.streak-dots{display:flex;gap:.35rem;flex-wrap:wrap}
.dot{width:26px;height:26px;border-radius:9px;background:var(--muted);display:grid;place-items:center;font-size:.62rem;color:var(--text-muted);font-weight:700}
.dot.on{background:var(--green-600);color:#fff}
.bookmark-card{display:grid;gap:.5rem;padding:1.1rem;border-radius:var(--radius);background:linear-gradient(150deg,var(--gold-50),#fff);border:1px solid var(--gold-200)}
.avatar{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(150deg,var(--green-500),var(--green-800));color:var(--gold-200);font-weight:700;font-size:1.5rem}

/* الاختبار السريع */
.quiz{display:grid;gap:.8rem;padding:1.15rem;border-radius:var(--radius);background:var(--green-50);border:1px solid var(--green-100)}
.opt{display:flex;gap:.6rem;align-items:center;padding:.7rem .9rem;border-radius:var(--radius-sm);background:#fff;border:1.5px solid var(--border);cursor:pointer;font:inherit;font-size:.92rem;text-align:start;transition:all .18s var(--ease)}
.opt:hover{border-color:var(--green-500);transform:translateX(-3px)}
.opt.correct{border-color:var(--green-600);background:#EAF8F1;font-weight:700}
.opt.wrong{border-color:var(--danger);background:var(--danger-50)}
.opt .mark{width:24px;height:24px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--border-strong);display:grid;place-items:center;font-size:.75rem;font-weight:700}
.lessons-progress{height:8px;border-radius:4px;background:var(--muted);overflow:hidden}
.lessons-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green-500),var(--gold-400))}

/* تخطيط صفحة الحساب + لمسات أخيرة */
.auth-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:start}
a.tab{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:860px){.auth-wrap{grid-template-columns:1fr}}
.tract{max-height:min(56vh,420px);margin-inline:auto}
.zone{outline:none}
.zone:focus-visible .zone-shape{stroke:var(--green-700);stroke-width:3}
.video-shell svg{display:block}
.rule-block .letters{word-break:break-word}
.sep-dot{color:var(--border-strong)}
table th{font-weight:700;color:var(--green-800)}
details summary .ico{transition:transform .2s var(--ease);flex:0 0 auto;color:var(--green-600)}
details[open] summary .ico{transform:rotate(180deg)}
@media print{
  .topbar,.sitefooter,.nav,.toast-wrap,.btn{display:none!important}
  .clay{box-shadow:none!important;border-color:#ccc!important}
}