@font-face{
  font-family:"Readex Pro";
  src:url("../fonts/ReadexPro.woff2") format("woff2"), url("../fonts/ReadexPro.ttf") format("truetype");
  font-weight:200 700; /* خط متغيّر الوزن */
  font-display:swap;
}
@font-face{
  font-family:"Amiri Quran";
  src:url("../fonts/AmiriQuran.woff2") format("woff2"), url("../fonts/AmiriQuran.ttf") format("truetype");
  font-weight:400;
  font-display:swap;
}
:root{
  --primary:#0E6E5C; --primary-dark:#0B4D40; --bg:#FAF8F4; --surface:#fff;
  --text:#1F2A28; --accent:#C9A227; --border:#cfd8d5; --danger:#a12020;
}
:root.dark{ --primary:#4FD1B5; --primary-dark:#0B3B33; --bg:#0E1513; --surface:#16201D; --text:#E8EDEB; --border:#2a3a36; }
@media (prefers-color-scheme: dark){
  :root:not(.light){ --primary:#4FD1B5; --primary-dark:#0B3B33; --bg:#0E1513; --surface:#16201D; --text:#E8EDEB; --border:#2a3a36; }
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Readex Pro","Segoe UI",Tahoma,sans-serif; background:var(--bg); color:var(--text); line-height:1.7; font-size:18px; }
a{ color:var(--primary); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.skip-link{ position:absolute; inset-inline-start:-9999px; top:0; background:var(--primary-dark); color:#fff; padding:.6rem 1rem; z-index:1000; }
.skip-link:focus{ inset-inline-start:0; }
header{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; background:var(--primary); color:#fff; padding:.75rem 1rem; }
header a{ color:#fff; }
.brand a{ font-size:1.4rem; font-weight:bold; text-decoration:none; }
/* علامة سحاب المضمَّنة — غيمةٌ + ٤ قطرات، نسبتها 76:80. الغيمة ترث لون النصّ المحيط،
   والقطرات ذهبيّة. الغيمة تشغل أعلى العلامة فقط، فيُرفع الارتفاع لتقارب الغيمةُ ارتفاعَ الحروف */
.brand-mark{ width:1.5em; height:1.58em; vertical-align:-.5em; }
footer .brand-mark{ color:var(--primary); }
.lang-switch{ display:flex; gap:.4rem; align-items:center; }
.lang-switch label{ margin:0; color:#fff; }
.lang-switch select{ width:auto; min-width:120px; }
.user-area{ display:flex; gap:.75rem; align-items:center; }
main{ max-width:820px; margin:1.5rem auto; padding:0 1rem; }
h1{ color:var(--primary); }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.25rem; max-width:480px; }
.field{ margin-bottom:1rem; }
label{ display:block; font-weight:600; margin-bottom:.35rem; }
input,select,button{ font:inherit; }
input,select{ width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); min-height:48px; }
.password-wrap{ display:flex; gap:.5rem; }
.password-wrap input{ flex:1; }
button{ min-height:48px; padding:.55rem 1.1rem; border-radius:8px; border:2px solid var(--primary); background:var(--surface); color:var(--primary); cursor:pointer; font-weight:600; }
.btn-primary, button[type=submit]{ background:var(--primary); color:#fff; border-color:var(--primary); }
.alert{ background:#fdecec; color:var(--danger); border:1px solid #f0a8a8; padding:.75rem; border-radius:8px; }
.roles .role{ display:inline-block; background:var(--accent); color:#1f1500; border-radius:999px; padding:.1rem .6rem; margin-inline-end:.3rem; font-size:.9rem; }
section{ margin:1.5rem 0; padding-top:.75rem; border-top:1px solid var(--border); }
footer{ text-align:center; padding:1rem; color:#777; }
dialog.confirm-dialog{ border:2px solid var(--primary); border-radius:12px; padding:1.25rem; max-width:90vw; color:var(--text); background:var(--surface); }
dialog::backdrop{ background:rgba(0,0,0,.5); }
.dialog-actions{ margin-top:1rem; display:flex; gap:.75rem; }
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important; } }

/* البحث والنتائج */
.search-form{ max-width:100%; margin-bottom:1rem; }
.htmx-indicator{ opacity:0; color:var(--primary); font-weight:600; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator{ opacity:1; }
.results-count{ font-weight:700; }
details.teacher-card{ border:1px solid var(--border); border-radius:10px; margin:.6rem 0; background:var(--surface); }
details.teacher-card > summary{ padding:.8rem 1rem; cursor:pointer; font-weight:600; min-height:48px; }
details.teacher-card[open] > summary{ border-bottom:1px solid var(--border); }
.teacher-details{ padding:1rem; }
.btn-link{ display:inline-block; background:var(--primary); color:#fff; padding:.55rem 1.1rem; border-radius:8px; text-decoration:none; min-height:48px; font-weight:600; }

/* لوحة المعلم: بطاقات الطلبات */
.request-card{ border:1px solid var(--border); border-radius:10px; margin:.6rem 0; padding:1rem; background:var(--surface); }
.request-card h3{ margin:0 0 .4rem; color:var(--primary); }
.request-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
.request-actions form{ margin:0; }

/* الحصص والغرفة */
.session-card{ border:1px solid var(--border); border-radius:10px; margin:.6rem 0; padding:1rem; background:var(--surface); }
.session-card h3{ margin:0 0 .4rem; color:var(--primary); }
#room button{ margin-inline-end:.5rem; margin-bottom:.5rem; }
.session-state{ font-weight:700; }
#chat-log{ border:1px solid var(--border); border-radius:8px; padding:.5rem .75rem; min-height:80px; max-height:240px; overflow-y:auto; background:var(--surface); margin-bottom:.6rem; }
#chat-log p{ margin:.25rem 0; }
#chat-summary{ cursor:pointer; font-weight:700; color:var(--primary); padding:.4rem 0; }
#participants .speaking{ background:var(--accent); color:#1f1500; border-radius:6px; padding:.1rem .35rem; font-weight:700; }
.chat-badge{ background:var(--accent); color:#1f1500; border-radius:999px; padding:0 .5rem; margin-inline-start:.4rem; font-weight:700; font-size:.85rem; }

/* بطاقة صافي حصّة المنصّة (لوحة الإدارة) */
.net-card{ border:2px solid var(--primary); border-radius:12px; padding:.7rem 1rem; margin:.6rem 0; max-width:440px; background:var(--surface); }
.net-title{ font-weight:700; color:var(--primary); margin:0 0 .5rem; }
.net-breakdown{ list-style:none; margin:0; padding:0; }
.net-breakdown li{ display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0; }
.net-breakdown .net-total{ border-top:2px solid var(--primary); margin-top:.3rem; padding-top:.45rem; font-size:1.15rem; }
.net-breakdown .net-total strong{ color:var(--primary); }
.muted-note{ font-size:.85rem; color:#6a6a6a; margin:.3rem 0 0; }

/* صفحة الأقسام: تبويباتٌ بـdetails حصريّ (وصوليّة، بلا JS) */
.section-tab{ border:1px solid var(--border); border-radius:10px; margin:.6rem 0; background:var(--surface); }
.section-tab > summary{ cursor:pointer; font-size:1.1rem; padding:.6rem .9rem; border-radius:10px; }
.section-tab[open] > summary{ border-bottom:1px solid var(--border); border-radius:10px 10px 0 0; }
.section-tab > section{ padding:.2rem 1rem 1rem; }
.sections-field{ margin:.6rem 0; }
/* الرسائل الداخلية */
.convo-list{ list-style:none; padding:0; margin:.6rem 0; }
.convo-item{ border:1px solid var(--border); border-radius:10px; margin:.5rem 0; background:var(--surface); }
.convo-item > a{ display:block; padding:.7rem .9rem; text-decoration:none; color:inherit; }
.convo-pinned{ border-color:var(--primary); }
.convo-unread{ box-shadow:inset 4px 0 0 var(--primary); }
.convo-badge{ display:inline-block; min-width:1.4rem; text-align:center; background:var(--primary); color:#fff; border-radius:999px; padding:0 .4rem; font-size:.85rem; margin-inline-start:.3rem; }
.convo-preview{ display:block; opacity:.8; font-size:.9rem; margin-top:.2rem; }
.convo-time{ display:block; opacity:.6; font-size:.8rem; }
.msg-list{ list-style:none; padding:.5rem; margin:.6rem 0; border:1px solid var(--border); border-radius:10px; background:var(--surface); max-height:60vh; overflow-y:auto; overscroll-behavior:contain; }
.msg{ padding:.5rem .7rem; margin:.35rem 0; border-radius:10px; background:var(--bg); max-width:85%; }
.msg-mine{ margin-inline-start:auto; background:var(--primary); color:#fff; }
.msg-system{ background:none; text-align:center; opacity:.75; max-width:100%; font-size:.9rem; }
.msg-sender{ display:block; font-weight:700; font-size:.85rem; opacity:.85; }
.msg-body{ white-space:pre-wrap; word-break:break-word; }
.msg-time{ display:block; font-size:.75rem; opacity:.6; margin-top:.15rem; }
.msg-receipt{ display:block; font-size:.72rem; opacity:.75; }
.msg-del{ display:inline; }
.msg-del button{ padding:0 .25rem; font-size:.8rem; }
.convo-actions{ margin:.6rem 0; border:1px solid var(--border); border-radius:8px; padding:.4rem .8rem; background:var(--surface); }
.convo-actions summary{ cursor:pointer; }
.voice-recorder{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.4rem 0; }
.voice-recorder #rec-toggle.recording{ color:#fff; background:var(--danger,#b3261e); border-radius:8px; padding:.3rem .7rem; }
.rec-timer{ font-variant-numeric:tabular-nums; opacity:.8; }
.rec-status{ flex-basis:100%; font-size:.9rem; opacity:.9; }
.msg-voice{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.msg-voice audio{ max-width:220px; height:40px; vertical-align:middle; }
.msg-voice-dur{ font-size:.8rem; opacity:.7; font-variant-numeric:tabular-nums; }
.typing-indicator{ font-size:.85rem; opacity:.75; font-style:italic; margin:.2rem 0; min-height:1.2em; }
.mute-form{ margin:.2rem 0 .4rem; }
.last-seen{ font-size:.85rem; opacity:.7; margin:.1rem 0 .4rem; }
.session-context{ font-size:.85rem; opacity:.8; margin:.1rem 0 .4rem; }
.msg-search{ display:flex; gap:.5rem; margin:.6rem 0; flex-wrap:wrap; }
.msg-search input{ flex:1; min-width:180px; }
/* الفيديو الاختياريّ في الغرفة */
.video-tiles{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.6rem 0; }
.vid-tile{ margin:0; }
.vid-tile video{ width:100%; max-width:300px; aspect-ratio:4/3; object-fit:cover; background:#000; border-radius:12px; }
.vid-tile figcaption{ font-size:.85rem; text-align:center; opacity:.85; margin-top:.2rem; }
.vid-tile.vid-local video{ transform:scaleX(-1); }
.fav-tier{ font-size:.85rem; color:var(--primary); }
.msg-empty{ list-style:none; opacity:.7; text-align:center; padding:.8rem; }
#chat-form{ display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
#chat-form input{ flex:1; min-width:200px; }
#comm button{ margin-inline-end:.5rem; }
#page-text{ font-family:"Amiri Quran","Readex Pro",serif; font-size:1.7rem; line-height:2.8; padding:.75rem 1rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); margin:.6rem 0; min-height:2.5rem; max-height:65vh; overflow-y:auto; overscroll-behavior:contain; }
#page-text:empty{ display:none; }
#page-text .surah-head{ font-size:1.05rem; color:var(--primary); text-align:center; margin:.8rem 0 .4rem; }
#page-text .ayah{ border-radius:6px; padding:0 .15rem; }
/* تظليل الآية المؤشَّر عليها بثلاث إشارات: خلفية + شريط جانبيّ + سماكة (لا لونَ وحده) */
#page-text .ayah.cursor{ background:var(--accent); color:#1f1500; outline:3px solid var(--primary-dark); border-inline-start:6px solid var(--primary-dark); padding-inline-start:.35rem; font-weight:700; }
#page-text .hidden-note{ font-size:1rem; color:#777; margin:0; }
/* وضع المصحف (الافتراضي): طبقة قارئ الشاشة الإملائيّة مخفيّةٌ بصريًّا، وصفحة QPC مرئيّة */
#page-text .sr-ayat{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#page-text .ayah-num{ color:var(--primary); }
/* صفحة مصحف المدينة المطابقة (QPC V2): خطّ الصفحة + أسطرٌ مُسوّاةٌ من الحافة للحافة */
#page-text .qpc-page{ font-family:'qpcpage', "Amiri Quran", serif; font-size:1.9rem; }
#page-text .qpc-line{ display:flex; direction:rtl; justify-content:space-between; align-items:center; line-height:2.4; }
#page-text .qpc-line.qpc-surah{ justify-content:center; font-family:"Amiri Quran", serif; color:var(--primary); border:1px solid var(--border); border-radius:8px; margin:.5rem 0; padding:.3rem; font-size:1.15rem; }
#page-text .qpc-line.qpc-basmala{ justify-content:center; font-family:"Amiri Quran", serif; font-size:1.4rem; }
#page-text .qpc-w{ white-space:nowrap; }
#page-text .qpc-w.cursor{ background:var(--accent); color:#1f1500; border-radius:6px; padding:0 .1rem; }
/* مؤشّر الكلمة: توهّجٌ أقوى على الكلمة المحدّدة وحدها داخل سياق الآية */
#page-text .qpc-w.cursor-word{ background:var(--primary); color:#fff; box-shadow:0 0 0 3px var(--primary-dark); border-radius:6px; }
/* موضع خطأٍ معلَّم: تسطيرٌ متموّجٌ أحمر (يتعايش مع توهّج المؤشّر) */
#page-text .qpc-w.word-error{ text-decoration:underline wavy #b3261e; text-decoration-thickness:2px; text-underline-offset:4px; }
#page-text .qpc-w{ cursor:pointer; }
/* خريطة أخطاء الطالب (كلمات تحتاج مراجعة) */
.errmap{ list-style:none; padding:0; margin:.4rem 0; }
.errmap li{ display:flex; gap:.5rem; align-items:center; padding:.3rem .2rem; border-bottom:1px solid var(--border); }
.errmap .ew-word{ font-weight:700; }
.errmap .ew-ref{ opacity:.7; font-size:.85rem; }
.errmap .ew-count{ margin-inline-start:auto; background:var(--accent); color:#1f1500; border-radius:999px; padding:0 .5rem; font-size:.85rem; }
/* مراجعة اليوم */
.review-list{ list-style:none; padding:0; margin:.4rem 0; }
.review-item{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; padding:.5rem .2rem; border-bottom:1px solid var(--border); }
.rv-range{ font-size:1.05rem; }
.rv-meta{ font-size:.8rem; opacity:.7; }
.rv-grade{ display:flex; gap:.4rem; margin-inline-start:auto; }
.rv-grade .inline-form{ display:inline; }
.rv-strong{ color:#1a7f37; font-weight:700; } .rv-medium{ color:#9a6700; font-weight:700; } .rv-weak{ color:#b3261e; font-weight:700; }
/* وضع الأسطر (للكفيف): الإملائيّ مرئيٌّ آيةً لكل سطر */
#page-text.layout-lines .sr-ayat{ position:static; width:auto; height:auto; clip:auto; }
#page-text.layout-lines .ayah{ display:block; white-space:nowrap; overflow-x:auto; padding:.4rem .15rem; border-bottom:1px solid var(--border); }
.attribution{ font-size:.8rem; color:#777; }
.fav-btn{ font-size:.95rem; }
.dash-links{ list-style:none; padding:0; margin:.5rem 0; }
.dash-links li{ margin:.5rem 0; }
.month-nav{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:.5rem 0; }
.month-nav a{ display:inline-block; border:2px solid var(--primary); border-radius:8px; padding:.35rem .8rem; text-decoration:none; min-height:42px; }
.month-nav a[aria-current="true"]{ background:var(--primary); color:#fff; }
table{ border-collapse:collapse; width:100%; background:var(--surface); }
th, td{ border:1px solid var(--border); padding:.5rem .7rem; text-align:start; }
th{ background:var(--primary-dark); color:#fff; }

/* التخطيط الجانبي الموحّد (نمط راكان): قائمة جانبية + منطقة الصفحة */
.layout-sidebar{ display:flex; gap:1.25rem; align-items:flex-start; max-width:1200px; margin:0 auto; padding:0 1rem; }
.page-area{ flex:1; min-width:0; }
.page-area main{ max-width:none; margin:1rem 0; padding:0; }
.side-nav{ flex:0 0 250px; margin-top:1rem; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1rem; }
.side-nav .brand{ margin:0 0 .75rem; }
.side-nav .brand a{ color:var(--primary); font-size:1.25rem; font-weight:bold; text-decoration:none; }
.side-nav ul{ list-style:none; margin:0; padding:0; }
.side-nav li{ margin:.15rem 0; }
.side-nav a{ display:block; padding:.45rem .6rem; border-radius:8px; text-decoration:none; }
.side-nav a:hover, .side-nav a:focus-visible{ background:var(--bg); }
.side-nav details > summary{ padding:.45rem .6rem; cursor:pointer; font-weight:700; color:var(--primary); min-height:40px; }
.side-nav details ul{ padding-inline-start:.75rem; }
.side-search label{ font-size:.9rem; }
.side-search input{ margin:.25rem 0; }
.side-search button{ min-height:40px; padding:.3rem .8rem; }
.search-details summary{ cursor:pointer; padding:.45rem .6rem; border-radius:8px; color:var(--primary); font-weight:600; min-height:40px; }
.search-details summary:hover, .search-details summary:focus-visible{ background:var(--bg); }
.search-details[open] summary{ margin-bottom:.3rem; }
.month-nav{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.month-nav a{ display:inline-block; border:1px solid var(--border); border-radius:8px; padding:.35rem .7rem; text-decoration:none; }
.month-nav a[aria-current="true"]{ background:var(--primary); color:#fff; }
.side-bottom{ margin-top:1rem; padding-top:.75rem; border-top:1px solid var(--border); }
.lang-buttons{ display:flex; gap:.5rem; flex-wrap:wrap; }
.lang-buttons button{ min-height:42px; padding:.35rem .8rem; }
.topbar{ display:flex; gap:1rem; align-items:center; justify-content:space-between; background:var(--primary); color:#fff; padding:.6rem 1rem; border-radius:0 0 12px 12px; }
.topbar button{ background:var(--surface); }
/* جرس الإشعارات + عدّاده */
.topbar-bell{ display:inline-flex; align-items:center; gap:.3rem; color:#fff; text-decoration:none; padding:.35rem .6rem; border-radius:8px; min-height:42px; }
.topbar-bell:hover, .topbar-bell:focus-visible{ background:rgba(255,255,255,.18); }
.notif-count{ background:var(--accent); color:#1f1500; border-radius:999px; padding:0 .45rem; font-weight:700; font-size:.85rem; min-width:1.5em; text-align:center; }
/* تبويبات وقائمة صفحة الإشعارات */
.notif-tabs{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; }
.notif-tabs a{ display:inline-block; border:1px solid var(--border); border-radius:999px; padding:.4rem .85rem; text-decoration:none; min-height:42px; }
.notif-tabs a[aria-current="page"]{ background:var(--primary); color:#fff; border-color:var(--primary); }
.notif-list{ list-style:none; padding:0; margin:0; }
.notif-item{ border:1px solid var(--border); border-radius:12px; padding:.7rem 1rem; margin-bottom:.7rem; background:var(--surface); }
.notif-item.is-new{ border-inline-start:4px solid var(--accent); }
.notif-title{ font-size:1.05rem; margin:.1rem 0; }
.notif-body{ margin:.2rem 0; }
.notif-meta{ font-size:.85rem; color:#777; margin:.2rem 0 0; }
.badge-new{ background:var(--accent); color:#1f1500; border-radius:999px; padding:0 .5rem; font-size:.75rem; font-weight:700; margin-inline-start:.4rem; }
/* الجداول على الهاتف: تمرير أفقيّ احتياطًا، وبطاقات مكدّسة دون 860px (data-label من sahab.js) */
.table-scroll{ overflow-x:auto; }
@media (max-width: 860px){
  table.card-table, table.card-table tbody{ display:block; width:100%; border:none; background:none; }
  table.card-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  table.card-table tr{ display:block; border:1px solid var(--border); border-radius:12px; margin-bottom:.8rem; background:var(--surface); }
  table.card-table td{ display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; border:none; border-bottom:1px solid var(--border); padding:.5rem .8rem; }
  table.card-table tr > td:last-child{ border-bottom:none; }
  table.card-table td[data-label]::before{ content:attr(data-label) ":"; font-weight:700; color:var(--primary); flex:0 0 auto; }
}

/* روابط تقليب الصفحات: مساحة لمسٍ مريحة */
.pager a{ display:inline-block; padding:.5rem .9rem; border:1px solid var(--border); border-radius:8px; text-decoration:none; margin-inline:.15rem; }

/* زرّ العودة إلى أعلى الصفحة */
#back-to-top{ position:fixed; bottom:1rem; inset-inline-start:50%; transform:translateX(-50%); z-index:140; border-radius:999px; min-width:48px; box-shadow:0 4px 14px rgba(0,0,0,.3); }
html[dir="rtl"] #back-to-top{ transform:translateX(50%); }

/* درج القائمة على الهاتف (نمط راكان): القائمة تنزلق من جانب البداية، زرّ ☰ يفتحها وطبقة تعتيم خلفها */
.nav-toggle{ display:none; font-size:1.3rem; min-height:42px; min-width:48px; padding:.3rem .7rem; }
.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:150; }
.sidebar-overlay.active{ display:block; }
@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .side-nav{ position:fixed; top:0; bottom:0; margin:0; width:min(85vw, 320px); height:100dvh; overflow-y:auto; border-radius:0; z-index:200; transition:transform .25s ease; }
  html[dir="rtl"] .side-nav{ right:0; transform:translateX(100%); }
  html[dir="ltr"] .side-nav{ left:0; transform:translateX(-100%); }
  /* لا بدّ من مطابقة تخصّص القاعدتين أعلاه (html[dir] .side-nav) وإلا بقيت القائمة خارج الشاشة عند الفتح */
  html[dir="rtl"] .side-nav.open,
  html[dir="ltr"] .side-nav.open{ transform:none; }
  /* الشريط العلوي لاصقٌ وأنيق: القائمة في طرف، وأيقونتا الإشعارات والوضع في الطرف الآخر، والترحيب سطرٌ خفيفٌ أسفله */
  .topbar{ position:sticky; top:0; z-index:120; border-radius:0; flex-wrap:wrap; gap:.4rem .5rem; padding:.5rem .75rem; }
  #nav-toggle{ order:1; }
  .topbar-bell{ order:2; margin-inline-start:auto; }   /* يدفع الإشعارات والوضع إلى الطرف المقابل للقائمة */
  #theme-toggle{ order:3; font-size:0; min-width:44px; min-height:42px; padding:.3rem .45rem; }
  #theme-toggle::before{ content:"🌓"; font-size:1.2rem; line-height:1; }
  .bell-label{ display:none; }                          /* الجرس أيقونةٌ + عدّاد؛ وaria-label يبقى كاملًا لقارئ الشاشة */
  .topbar > span{ order:4; flex-basis:100%; margin:0; font-size:.85rem; opacity:.85; }   /* الترحيب سطرٌ كاملٌ خفيف */
  /* أزرار قوائم الإجراءات (اللوحة/المفضّلة/الطلبات…) بعرضٍ موحَّدٍ كاملٍ بدل حبوبٍ متفاوتةٍ متناثرة */
  li > .btn-link{ display:block; width:100%; box-sizing:border-box; }
}
/* مناطق الأمان للهواتف ذات الكاميرا المغروسة (مع viewport-fit=cover) */
@supports (padding: env(safe-area-inset-top)){
  @media (max-width: 860px){
    .side-nav{ padding-top:calc(1rem + env(safe-area-inset-top)); padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
    .topbar{ padding-top:calc(.6rem + env(safe-area-inset-top)); }
  }
}
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#teacher-mushaf button{ margin-inline-end:.4rem; margin-bottom:.3rem; }
fieldset{ border:1px solid var(--border); border-radius:8px; padding:.5rem 1rem; }
.radio-row{ display:block; font-weight:400; margin:.3rem 0; }
.radio-row input{ width:auto; min-height:auto; margin-inline-end:.4rem; }
textarea{ width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; }

/* لوحة سحاب الداخلية (إدارة الأشخاص) */
.inline-form{ display:inline-block; margin-inline-end:.5rem; }
button.danger{ border-color:var(--danger); color:var(--danger); }
table{ border-collapse:collapse; width:100%; margin:.6rem 0; }
th,td{ border:1px solid var(--border); padding:.5rem .6rem; text-align:start; }
thead th{ background:var(--primary); color:#fff; }

/* ═══ الصفحة الرئيسيّة العامّة ═══ */
.landing{ max-width:960px; margin:0 auto; }
.home-sec{ margin:3rem 0; }
.home-sec > h2{ text-align:center; font-size:1.6rem; color:var(--primary); margin:0 0 1.4rem; }

/* البطل */
.hero{ text-align:center; padding:2.5rem 1rem 1rem; position:relative; overflow:hidden; }
.hero > *{ position:relative; z-index:1; }
.hero-emblem{ width:200px; height:auto; max-width:60vw; }

/* المطر الذهبيّ — زخّةٌ لطيفةٌ من الغيمة (تحسينٌ فقط؛ يُطفَأ مع تقليل الحركة) */
.hero-rain{ position:absolute; z-index:0; top:0; left:50%; transform:translateX(-50%);
  width:min(460px,94vw); height:270px; pointer-events:none; }
.hero-rain span{ position:absolute; top:0; left:var(--x); width:3px; height:16px; border-radius:3px;
  background:linear-gradient(var(--accent),rgba(201,162,39,0));
  opacity:0; will-change:transform,opacity;
  animation:sahab-rain var(--t) linear var(--d) infinite; }
@keyframes sahab-rain{
  0%{ transform:translateY(-12px) scaleY(.55); opacity:0; }
  12%{ opacity:.72; }
  78%{ opacity:.64; }
  100%{ transform:translateY(240px) scaleY(1); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .hero-rain{ display:none; } }
.hero h1{ font-size:clamp(1.6rem,4.5vw,2.4rem); line-height:1.4; margin:1rem auto .6rem; max-width:22ch; text-wrap:balance; }
.hero-lede{ color:var(--text); opacity:.85; font-size:1.1rem; max-width:44ch; margin:0 auto 1.6rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.btn-cta{ display:inline-block; background:var(--primary); color:#fff; padding:.7rem 1.4rem; border-radius:10px;
  text-decoration:none; font-weight:600; min-height:48px; border:2px solid var(--primary); }
.btn-cta-alt{ background:var(--accent); border-color:var(--accent); color:#1f1500; }
.btn-cta-ghost{ background:transparent; color:var(--primary); }
.btn-cta:hover{ opacity:.92; }

/* قسمَا الدراسة */
.two-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.study-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.6rem; text-align:center; }
.study-icon{ font-size:2.4rem; }
.study-card h3{ color:var(--primary); margin:.6rem 0 .5rem; font-size:1.25rem; }
.study-card p{ opacity:.85; margin:0 0 1.1rem; }
.study-link{ display:inline-block; background:var(--primary); color:#fff; padding:.55rem 1.2rem; border-radius:8px;
  text-decoration:none; font-weight:600; min-height:44px; }

/* المميّزات */
.feature-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.feature-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.3rem; text-align:center; }
.feature-icon{ font-size:2rem; display:block; margin-bottom:.5rem; }
.feature-card h4{ color:var(--primary); font-size:1.1rem; margin:0 0 .4rem; }
.feature-card p{ opacity:.85; font-size:.95rem; margin:0; }
/* محاور الميزات الثلاثة */
.feature-group{ margin-top:1.6rem; }
.feature-group:first-of-type{ margin-top:0; }
.feature-group-title{ text-align:center; color:var(--text); opacity:.72; font-size:1rem; font-weight:700;
  letter-spacing:.02em; margin:0 0 1rem; }
.feature-group-title::before, .feature-group-title::after{ content:"·"; color:var(--accent); margin:0 .6rem; opacity:.8; }

/* الأسئلة الشائعة (أكورديون أصيل details/summary) */
.faq-list{ max-width:720px; margin:0 auto; }
.faq-item{ border:1px solid var(--border); border-radius:10px; background:var(--surface); margin:.6rem 0; }
.faq-item > summary{ cursor:pointer; padding:1rem 1.1rem; font-weight:600; color:var(--primary); min-height:48px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::after{ content:"+"; font-size:1.4rem; color:var(--accent); flex:0 0 auto; }
.faq-item[open] > summary::after{ content:"−"; }
.faq-item[open] > summary{ border-bottom:1px solid var(--border); }
.faq-answer{ padding:1rem 1.1rem; line-height:1.8; }

/* شريط الدعوة */
.cta-band{ background:var(--primary); color:#fff; border-radius:16px; padding:2.4rem 1.2rem; text-align:center; }
.cta-band h2{ color:#fff; margin:0 0 .5rem; }
.cta-band p{ opacity:.92; margin:0 0 1.3rem; }
.cta-band .btn-cta{ background:#fff; color:var(--primary); border-color:#fff; }
.cta-band .btn-cta-ghost{ background:transparent; color:#fff; border-color:#fff; }

/* لوحة تحكّم المدير بالرئيسيّة */
.ph-table{ width:100%; border-collapse:collapse; margin:.5rem 0 2rem; }
.ph-table th, .ph-table td{ text-align:start; padding:.55rem .5rem; border-bottom:1px solid var(--border); }
.ph-list{ list-style:none; padding:0; margin:0 0 2rem; }
.ph-list li{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.6rem .3rem; border-bottom:1px solid var(--border); }
.ph-toggle{ min-height:40px; border-radius:8px; padding:.35rem .9rem; cursor:pointer; font-weight:600; border:2px solid; }
.ph-toggle.on{ background:var(--primary); color:#fff; border-color:var(--primary); }
.ph-toggle.off{ background:var(--surface); color:var(--primary); border-color:var(--border); }
.ph-move{ display:flex; gap:.3rem; }
.ph-move form{ margin:0; }
.ph-move button{ min-height:40px; min-width:40px; }

/* الشريط المتحرّك (أخبار/مميّزات) — يتوقّف عند التمرير/التركيز، يحترم reduced-motion */
.ticker{ background:var(--primary); color:#fff; overflow:hidden; padding:.55rem 0; margin:2rem 0; border-radius:10px; }
.ticker-track{ display:flex; width:max-content; direction:ltr; animation:ticker-scroll 60s linear infinite; }
.ticker-list{ display:flex; align-items:center; list-style:none; margin:0; padding:0; }
.ticker-list li{ white-space:nowrap; unicode-bidi:isolate; font-weight:500; font-size:.98rem; }
.ticker-list li::before{ content:"◈"; color:var(--accent); margin:0 1.4rem; opacity:.75; }
.ticker{ cursor:pointer; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track,
.ticker.paused .ticker-track{ animation-play-state:paused; }
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; width:100%; }
  .ticker-list{ overflow-x:auto; flex:1; }
  .ticker-list[aria-hidden]{ display:none; }
}

/* قسم «كيف تنضمّ كطالبٍ؟» — خطواتٌ مرقّمة */
.step-list{ list-style:none; padding:0; margin:0 0 1.5rem; display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:520px){ .step-list{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:820px){ .step-list{ grid-template-columns:repeat(3,1fr); } }
.step-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.3rem; text-align:center; position:relative; }
.step-icon{ display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--primary); color:#fff; font-size:1.3rem; font-weight:700; margin-bottom:.5rem; }
.step-card h3{ color:var(--primary); font-size:1.1rem; margin:0 0 .4rem; }
.step-card p{ opacity:.85; font-size:.95rem; margin:0; }
.steps .hero-cta{ margin-top:.5rem; }

/* قسم «رسالتنا» */
.about-card{ background:var(--primary); color:#fff; border-radius:16px; padding:2rem 1.6rem; max-width:760px; margin:0 auto; text-align:center; }
.about-card h2{ color:#fff; margin:0 0 .8rem; }
.about-card p{ margin:0; font-size:1.12rem; line-height:1.9; opacity:.95; }

/* روابط التذييل */
.footer-links{ list-style:none; display:flex; flex-wrap:wrap; gap:1rem 1.4rem; justify-content:center; padding:0; margin:.6rem 0 0; }
.footer-links a{ color:var(--primary); text-decoration:none; font-weight:600; }

/* ═══ صقلٌ بصريٌّ للرئيسيّة (احترافيّة) ═══ */
/* عناوين الأقسام بخطّ المصحف (العربيّة فقط) + خطٌّ ذهبيٌّ رقيق تحتها */
html[lang="ar"] .hero h1, html[lang="ar"] .home-sec > h2,
html[lang="ar"] .about-card h2, html[lang="ar"] .cta-band h2{ font-family:"Amiri Quran","Readex Pro",serif; }
.home-sec > h2{ position:relative; }
.home-sec > h2::after{ content:""; display:block; width:56px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent); margin:.7rem auto 0; }
.landing .home-sec{ margin:2.9rem auto; }
/* تدفّقٌ بصريٌّ بين الخطوات حين تتراصّ عموديًّا (جوّال) */
@media (max-width:519px){
  .step-card{ position:relative; }
  .step-card:not(:last-child)::after{ content:""; position:absolute; left:50%; transform:translateX(-50%);
    bottom:-1rem; width:2px; height:1rem; background:var(--accent); opacity:.55; }
}

/* عمقٌ وارتفاعٌ لطيفٌ للبطاقات */
.study-card, .feature-card, .step-card{ box-shadow:0 1px 2px rgba(31,42,40,.05), 0 6px 16px rgba(31,42,40,.04);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.study-card:hover, .feature-card:hover, .step-card:hover{ transform:translateY(-4px);
  box-shadow:0 6px 14px rgba(14,110,92,.10), 0 14px 34px rgba(14,110,92,.10); border-color:var(--accent); }

/* أزرارٌ بظلٍّ وانتقالٍ ناعم */
.btn-cta{ box-shadow:0 2px 8px rgba(14,110,92,.22); transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(14,110,92,.28); }

/* شريطٌ سفليٌّ ثابتٌ للجوّال — دعوةٌ دائمةُ الوصول */
.sticky-cta{ position:fixed; inset-inline:0; bottom:0; z-index:50; display:none;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); background:var(--surface);
  border-top:1px solid var(--border); box-shadow:0 -4px 16px rgba(0,0,0,.10);
  transform:translateY(110%); transition:transform .25s ease; }
@media (max-width:640px){ .sticky-cta{ display:block; } }
.sticky-cta.visible{ transform:translateY(0); }
.sticky-cta .btn-cta{ display:block; text-align:center; width:100%; min-height:48px; }
@media (prefers-reduced-motion:reduce){ .sticky-cta{ transition:none; } }

/* شرائح الثقة تحت أزرار البطل */
.hero-badges{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:1.3rem 0 0; padding:0; }
.hero-badges li{ display:inline-flex; align-items:center; gap:.45rem; font-size:.95rem; font-weight:600; color:var(--primary);
  background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.42rem .95rem;
  box-shadow:0 2px 8px rgba(14,110,92,.06); }
.hero-badges .ic{ width:1.15rem; height:1.15rem; }
.btn-cta-alt{ box-shadow:0 2px 8px rgba(201,162,39,.28); }

/* ظهورٌ متدرّجٌ مع التمرير (يُضاف .reveal بالـJS فقط؛ بلا JS يظهر عاديًّا) */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1!important; transform:none!important; } }

/* أيقونات SVG المخصّصة في دوائرَ ناعمة (هالةٌ ذهبيّةٌ + أيقونةٌ خضراء) */
.ic{ display:block; width:1.75rem; height:1.75rem; }
.feature-icon, .study-icon{ display:inline-flex; align-items:center; justify-content:center;
  width:3.4rem; height:3.4rem; border-radius:50%; background:rgba(201,162,39,.15);
  color:var(--primary); margin-bottom:.75rem; font-size:0; }
.feature-icon .ic, .study-icon .ic{ width:1.8rem; height:1.8rem; }

/* ═══ خلفيّاتٌ متكيّفةٌ مع الثيم: إيقاع الأقسام + فواصل غيميّة + توهّج الواجهة ═══ */
:root{
  --band:#F1ECE1;
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0 H120 V6 a6 6 0 0 1 -12 0 a6 6 0 0 1 -12 0 a6 6 0 0 1 -12 0 a6 6 0 0 1 -12 0 a6 6 0 0 1 -12 0 a6 6 0 0 1 -12 0 a6 6 0 0 1 -12 0 a6 6 0 0 1 -12 0 a6 6 0 0 1 -12 0 a6 6 0 0 1 -12 0 Z'/%3E%3C/svg%3E");
}
:root.dark{ --band:#131E1A; }
@media (prefers-color-scheme:dark){ :root:not(.light){ --band:#131E1A; } }

html{ overflow-x:clip; }   /* أمانٌ ضدّ أيّ تجاوزٍ أفقيٍّ من الخلفيّات الممتدّة بعرض الشاشة */

/* إيقاع الأقسام — باندةٌ خفيفةٌ تمتدّ بعرض الشاشة، والمحتوى يبقى في العمود الموسَّط */
.landing .home-sec.band{
  position:relative;
  width:100vw; margin:2rem calc(50% - 50vw);
  padding-block:3rem;
  padding-inline:max(1rem, calc((100vw - 788px)/2));
  background:var(--band);
}
/* فواصل غيميّة — حافّتان بلون الصفحة على هيئة غيماتٍ متقشّرة (تتكيّف مع الثيم عبر mask) */
.landing .home-sec.band::before,
.landing .home-sec.band::after{
  content:""; position:absolute; left:0; right:0; height:24px; pointer-events:none;
  background-color:var(--bg);
  -webkit-mask:var(--wave) center/100% 100% no-repeat;
  mask:var(--wave) center/100% 100% no-repeat;
}
.landing .home-sec.band::before{ top:-1px; }
.landing .home-sec.band::after{ bottom:-1px; transform:scaleY(-1); }

/* توهّجٌ ناعمٌ ذهبيٌّ خلف الواجهة يمنح عمقًا */
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:0; left:50%; transform:translateX(-50%);
  width:min(720px,125%); height:440px;
  background:radial-gradient(50% 50% at 50% 40%,
    rgba(201,162,39,.20), rgba(201,162,39,.06) 42%, transparent 68%);
}

/* خلفيّةُ السحب — طبقتان ثابتتان (صورة + تعتيمٌ متدرّج)؛ اللون يُحدَّد خادميًّا: أخضر/ذهبيّ */
.ph-bg-modes{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0; }
.ph-bg-modes form{ margin:0; }
.page-clouds, .page-scrim{ position:fixed; inset:0; pointer-events:none; }
.page-clouds{ z-index:-2; background:url("../brand/bg-clouds.jpg") center center / cover no-repeat; }
.page-scrim{ z-index:-1; }
.page-clouds--green{ opacity:.5; filter:saturate(.9) brightness(1.08); }
.page-scrim--green{ background:linear-gradient(180deg, rgba(250,248,244,.5), rgba(250,248,244,.82)); }
.page-clouds--gold{ opacity:.55; filter:grayscale(1) sepia(1) saturate(1.9) hue-rotate(2deg) brightness(1.04); }
.page-scrim--gold{ background:linear-gradient(180deg, rgba(250,247,238,.48), rgba(250,247,238,.8)); }
:root.dark .page-clouds{ opacity:.32; }
:root.dark .page-scrim--green{ background:linear-gradient(180deg, rgba(14,21,19,.6), rgba(14,21,19,.86)); }
:root.dark .page-scrim--gold{ background:linear-gradient(180deg, rgba(20,17,12,.58), rgba(20,17,12,.84)); }
@media (prefers-color-scheme:dark){
  :root:not(.light) .page-clouds{ opacity:.32; }
  :root:not(.light) .page-scrim--green{ background:linear-gradient(180deg, rgba(14,21,19,.6), rgba(14,21,19,.86)); }
  :root:not(.light) .page-scrim--gold{ background:linear-gradient(180deg, rgba(20,17,12,.58), rgba(20,17,12,.84)); }
}