/* ══════════════════════════════════════════════════════════════════════════
   موسوعة درِّسني العَقَديَّة — هويّة الواجهة
   أرضيّةٌ كالورق، وحبرٌ أخضرُ داكن، ونُحاسٌ للجهاز العلميّ (الحواشي والآيات).
   الألواحُ بارزةٌ بظلٍّ مركّبٍ وحافّةٍ عُليا مضيئة، والخلفيّةُ نسيجٌ نجميٌّ خفيف.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F5F2EA; --paper-2:#EFEADD; --surface:#FFFDF8; --surface-2:#F3EFE5;
  --ink:#16211D; --ink-2:#4A5852; --ink-3:#7E8B84;
  --line:#DED7C6; --line-2:#C9C0AB;
  --accent:#0C6A5A; --accent-2:#08503F; --accent-soft:#DCEDE6; --accent-ring:rgba(12,106,90,.16);
  --gold:#8F6420; --gold-2:#A9762F; --gold-soft:#F3E9D6;
  --good:#1E7A52; --good-soft:#DFF0E5;
  --bad:#9B3226; --bad-soft:#F7E4E0;
  --warn:#8A6412; --warn-soft:#F6EDD7;

  --r:14px; --r-sm:10px;
  --sh-1:0 1px 0 rgba(255,255,255,.75) inset, 0 1px 2px rgba(30,45,40,.05), 0 8px 20px -14px rgba(30,45,40,.35);
  --sh-2:0 1px 0 rgba(255,255,255,.8) inset, 0 2px 4px rgba(30,45,40,.06), 0 18px 40px -22px rgba(30,45,40,.45);
  --sh-3:0 1px 0 rgba(255,255,255,.85) inset, 0 3px 8px rgba(30,45,40,.08), 0 30px 60px -28px rgba(30,45,40,.5);

  --ui:"Noto Kufi Arabic","Segoe UI",system-ui,sans-serif;
  --serif:"Amiri","Times New Roman",serif;
  --read-size:17.5px; --read-lh:2.1;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0C1110; --paper-2:#101817; --surface:#141D1A; --surface-2:#1A2422;
    --ink:#E7ECE8; --ink-2:#A6B2AC; --ink-3:#77837D;
    --line:#26312D; --line-2:#334039;
    --accent:#4CB99A; --accent-2:#6DD0B2; --accent-soft:#16302A; --accent-ring:rgba(76,185,154,.22);
    --gold:#CFA263; --gold-2:#E0B87E; --gold-soft:#2B2217;
    --good:#4CB98A; --good-soft:#142A21;
    --bad:#D9786A; --bad-soft:#2C1917;
    --warn:#D3A957; --warn-soft:#2A2314;
    --sh-1:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px rgba(0,0,0,.4);
    --sh-2:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 26px -14px rgba(0,0,0,.75);
    --sh-3:0 1px 0 rgba(255,255,255,.06) inset, 0 22px 50px -22px rgba(0,0,0,.85);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0C1110; --paper-2:#101817; --surface:#141D1A; --surface-2:#1A2422;
  --ink:#E7ECE8; --ink-2:#A6B2AC; --ink-3:#77837D;
  --line:#26312D; --line-2:#334039;
  --accent:#4CB99A; --accent-2:#6DD0B2; --accent-soft:#16302A; --accent-ring:rgba(76,185,154,.22);
  --gold:#CFA263; --gold-2:#E0B87E; --gold-soft:#2B2217;
  --good:#4CB98A; --good-soft:#142A21;
  --bad:#D9786A; --bad-soft:#2C1917;
  --warn:#D3A957; --warn-soft:#2A2314;
  --sh-1:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px rgba(0,0,0,.4);
  --sh-2:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 26px -14px rgba(0,0,0,.75);
  --sh-3:0 1px 0 rgba(255,255,255,.06) inset, 0 22px 50px -22px rgba(0,0,0,.85);
  color-scheme:dark;
}
:root[data-font="kufi"] .articlebody{font-family:var(--ui)}
:root[data-font="system"] .articlebody{font-family:system-ui,"Segoe UI",sans-serif}
:root[data-tashkeel="off"] .articlebody{font-feature-settings:"mark" 0}

*{box-sizing:border-box}
html,body{padding:0;margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:16px; line-height:1.8;
  direction:rtl; text-align:right;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
h1,h2,h3,h4{margin:0; line-height:1.4; text-wrap:balance; font-weight:700}
p{margin:0 0 1em}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px}
[hidden]{display:none!important}
.muted{color:var(--ink-3)}
.num,.k-v,.lv-meta{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,Consolas,monospace; direction:ltr; display:inline-block}

/* رابطُ التخطّي يُخفى بالإزاحة رأسيًّا لا بـ-9999px أفقيًّا: الإزاحةُ الأفقيّة
   في صفحةٍ RTL تُنشئ امتدادًا وهميًّا يُزيح لقطةَ الشاشة. */
.skip{position:absolute; inset-inline-start:12px; top:-120px; background:var(--accent); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 8px; z-index:200; transition:top .15s}
.skip:focus{top:0}

/* خلفيّة: نسيجٌ نجميٌّ خفيفٌ ووهجٌ علويّ */
.bg-weave{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--paper);
  background-image:
    radial-gradient(1100px 520px at 88% -6%, var(--accent-ring), transparent 62%),
    radial-gradient(780px 420px at 4% 8%, rgba(143,100,32,.09), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230C6A5A' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M36 4 44 14 58 14 58 28 68 36 58 44 58 58 44 58 36 68 28 58 14 58 14 44 4 36 14 28 14 14 28 14Z'/%3E%3Cpath d='M36 18 48 24 48 48 36 54 24 48 24 24Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto,auto,72px 72px;
}
:root[data-theme="dark"] .bg-weave{opacity:.5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bg-weave{opacity:.5}}

.shell{max-width:1220px; margin-inline:auto; padding-inline:20px}
.page{padding-block:28px 60px}
.page.narrow{max-width:820px}

/* ── الترويسة ───────────────────────────────────────────────────────────── */
.masthead{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:60;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.top{display:flex; align-items:center; gap:18px; min-height:70px}
.brand{display:flex; align-items:center; gap:11px; color:var(--ink); flex:none}
.brand:hover{text-decoration:none}
.brand-mark{width:38px; height:38px; color:var(--accent); display:block; flex:none}
.brand-mark svg{width:100%; height:100%}
.brand-text b{display:block; font-size:16px; line-height:1.3}
.brand-text i{display:block; font-style:normal; font-size:11px; color:var(--ink-3); line-height:1.4}
.mainnav{display:flex; gap:2px; margin-inline-start:6px}
.navlink{
  display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px;
  color:var(--ink-2); font-size:14px; font-weight:500; white-space:nowrap;
  transition:background .15s, color .15s;
}
.navlink:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.navlink.on{background:var(--accent-soft); color:var(--accent-2)}
.ic{width:19px; height:19px; flex:none}
.topactions{display:flex; align-items:center; gap:9px; margin-inline-start:auto}
.searchtrigger{
  display:flex; align-items:center; gap:9px; padding:8px 14px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-3);
  font-size:13.5px; box-shadow:var(--sh-1); transition:border-color .15s, transform .15s;
}
.searchtrigger:hover{border-color:var(--accent); color:var(--ink-2); transform:translateY(-1px)}
kbd{
  font-family:var(--ui); font-size:10.5px; border:1px solid var(--line-2); border-bottom-width:2px;
  border-radius:5px; padding:1px 6px; color:var(--ink-3); background:var(--surface-2);
}
.iconbtn{
  width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); box-shadow:var(--sh-1);
}
.iconbtn:hover{border-color:var(--accent); color:var(--accent)}
.avatar{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  background:var(--gold-soft); color:var(--gold); font-weight:700; border:1px solid var(--line); flex:none;
}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar.big{width:64px; height:64px; font-size:24px}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 17px; border-radius:11px;
  font-size:14px; font-weight:600; border:1px solid transparent; white-space:nowrap;
  transition:transform .14s, box-shadow .14s, background .14s;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-solid{background:var(--accent); color:#fff; box-shadow:0 8px 20px -10px var(--accent)}
.btn-solid:hover{background:var(--accent-2)}
.btn-ghost{background:var(--surface); color:var(--ink-2); border-color:var(--line); box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-danger{background:var(--bad); color:#fff}
.btn.tiny{padding:4px 10px; font-size:12px; border-radius:8px}

/* ── اللوح البارز ───────────────────────────────────────────────────────── */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); padding:20px; position:relative;
}
.panel.raised{box-shadow:var(--sh-2)}
.panel-title{
  display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  color:var(--ink-3); letter-spacing:.02em; margin-bottom:14px;
}
.panel-title .ic{width:16px; height:16px; color:var(--accent)}
.panel-note{font-size:12.5px; color:var(--ink-3); margin:-6px 0 12px}

.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:46px 0 20px; flex-wrap:wrap}
.sechead h2{font-family:var(--ui); font-size:clamp(24px,3.3vw,32px)}
.sechead .sub{color:var(--ink-2); margin:6px 0 0; font-size:14.5px; max-width:640px}
.kicker{font-size:11.5px; font-weight:700; color:var(--accent); letter-spacing:.08em; margin-bottom:5px}

.crumbs{font-size:12.5px; color:var(--ink-3); margin-bottom:14px; line-height:2}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--accent)}
.crumbs i{font-style:normal; margin-inline:7px; color:var(--line-2)}

.empty{text-align:center; padding:38px 20px; color:var(--ink-3)}
.empty-mark{font-size:30px; color:var(--line-2); margin-bottom:8px}
.empty p{margin:0 0 4px; font-weight:600; color:var(--ink-2)}
.empty span{font-size:13px}

.alert{padding:11px 15px; border-radius:var(--r-sm); font-size:13.5px; margin-bottom:14px; border:1px solid transparent}
.alert.ok{background:var(--good-soft); color:var(--good); border-color:var(--good)}
.alert.err{background:var(--bad-soft); color:var(--bad); border-color:var(--bad)}
.alert.warn{background:var(--warn-soft); color:var(--warn); border-color:var(--warn)}

/* ── الواجهة الأولى ─────────────────────────────────────────────────────── */
.hero{padding-block:48px 26px}
.hero-in{display:grid; grid-template-columns:1.35fr .65fr; gap:36px; align-items:center}
.hero-kicker{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); padding:6px 13px; border-radius:999px; margin-bottom:16px}
.hero h1{font-family:var(--ui); font-size:clamp(32px,5.4vw,54px); line-height:1.3; letter-spacing:-.01em}
.hero-lede{color:var(--ink-2); font-size:16.5px; margin:16px 0 22px; max-width:620px; line-height:1.95}
.hero-search{
  display:flex; align-items:center; gap:11px; width:100%; max-width:560px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:14px;
  padding:13px 18px; color:var(--ink-3); font-size:14.5px; box-shadow:var(--sh-2);
  transition:border-color .16s, transform .16s;
}
.hero-search:hover{border-color:var(--accent); transform:translateY(-2px)}
.hero-search .ic{color:var(--accent)}
.hero-search kbd{margin-inline-start:auto}
.hero-stats{display:flex; gap:24px; flex-wrap:wrap; margin-top:24px; font-size:13px; color:var(--ink-3)}
.hero-stats b{display:block; font-size:22px; color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.hero-art{display:grid; place-items:center}
.hero-book{
  width:min(268px,64vw); height:auto; aspect-ratio:1; border-radius:50%; display:block;
  box-shadow:0 22px 56px -20px rgba(20,35,30,.5), 0 0 0 1px var(--line);
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.hero-book:hover{transform:translateY(-4px) scale(1.02)}
@media (prefers-reduced-motion:reduce){.hero-book{transition:none}}

.resume{
  display:flex; align-items:center; gap:16px; padding:16px 20px; margin-top:6px;
  background:var(--gold-soft); border:1px solid var(--line); border-inline-start:4px solid var(--gold);
  border-radius:var(--r); box-shadow:var(--sh-1); color:var(--ink); position:relative; overflow:hidden;
}
.resume:hover{text-decoration:none; transform:translateY(-2px); box-shadow:var(--sh-2)}
.resume-ic{color:var(--gold)}
.resume-body b{display:block; font-size:11.5px; color:var(--gold); letter-spacing:.06em}
.resume-body i{display:block; font-style:normal; font-weight:700; font-size:16px; margin-top:2px}
.resume-body em{display:block; font-style:normal; font-size:12.5px; color:var(--ink-3)}
.resume-bar{position:absolute; inset-inline:0; bottom:0; height:3px; background:rgba(0,0,0,.06)}
.resume-bar i{display:block; height:100%; background:var(--gold)}

/* ── بطاقات الكتب ───────────────────────────────────────────────────────── */
.grid-books{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px}
.bookcard{
  position:relative; display:block; padding:20px 20px 22px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); color:var(--ink); overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
}
.bookcard::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:linear-gradient(var(--accent), var(--gold)); opacity:.75;
}
.bookcard.is-empty{opacity:.72; border-style:dashed}
.bc-meta .tag.soon{background:var(--surface-2); color:var(--ink-3); padding:1px 9px; border-radius:999px; font-weight:600}
.bookcard:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--accent); text-decoration:none}
.medallion{
  position:absolute; inset-inline-end:16px; top:14px; width:40px; height:40px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-2); font-family:var(--serif); font-weight:700; font-size:17px;
  box-shadow:inset 0 0 0 1px var(--accent-ring), 0 0 0 5px color-mix(in srgb, var(--accent-soft) 55%, transparent);
}
.medallion.big{position:static; width:58px; height:58px; font-size:24px; flex:none}
.medallion i{font-style:normal}
.bc-kicker{display:block; font-size:11.5px; color:var(--gold); font-weight:700; letter-spacing:.05em}
.bookcard h3{font-family:var(--ui); font-size:19px; margin:6px 0 12px; padding-inline-end:46px; line-height:1.55}
.bc-meta{display:flex; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3)}
.bc-meta .tag{color:var(--accent); font-weight:600}
.bc-bar{display:block; height:3px; background:var(--surface-2); border-radius:2px; margin-top:14px; overflow:hidden}
.bc-bar i{display:block; height:100%; background:var(--accent); border-radius:2px; transition:width .4s}

.grid-topics{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.topiccard{
  display:block; padding:15px 17px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--sh-1); color:var(--ink); transition:transform .16s, border-color .16s;
}
.topiccard:hover{transform:translateY(-3px); border-color:var(--accent); text-decoration:none}
.tc-ord{font-size:11px; color:var(--gold); font-weight:700}
.topiccard b{display:block; font-size:15px; margin:4px 0 6px}
.tc-meta{font-size:12px; color:var(--ink-3)}

.grid-articles{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.artcard{
  display:block; padding:18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-1); color:var(--ink); transition:transform .16s, box-shadow .16s;
}
.artcard:hover{transform:translateY(-3px); box-shadow:var(--sh-2); text-decoration:none}
.ac-book{font-size:11.5px; color:var(--accent); font-weight:600}
.artcard b{display:block; font-family:var(--ui); font-size:18px; margin:6px 0 8px; line-height:1.55}
.artcard p{font-size:13px; color:var(--ink-3); margin:0 0 10px; line-height:1.85}
.ac-meta{font-size:11.5px; color:var(--ink-3)}

.attrib-band{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin:46px 0 0; padding:26px 28px; border-radius:var(--r);
  background:linear-gradient(135deg, var(--accent-soft), var(--gold-soft));
  border:1px solid var(--line); box-shadow:var(--sh-1);
}
.attrib-band h3{font-family:var(--ui); font-size:21px; margin-bottom:8px}
.attrib-band p{margin:0; font-size:14px; color:var(--ink-2); max-width:720px}

/* ── صفحة الكتاب ────────────────────────────────────────────────────────── */
.bookhead,.topichead,.libhead,.quizhead{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:22px;
}
/* العنوانُ العربيُّ الطويل لا يَقبَل الانكماشَ افتراضيًّا (min-width:auto)،
   فيدفع الصفَّ أعرضَ من الشاشة ويُحدِث تمريرًا أفقيًّا. هذه القاعدةُ تُلزِمه. */
.bookhead>div,.topichead>div,.libhead>div,.quizhead>div,.tb-head>div,.sechead>div{
  min-width:0; flex:1 1 240px;
}
.bookhead h1,.topichead h1,.quizhead h1,.tb-head h3,.sechead h2,.bookcard h3,.artcard b{
  overflow-wrap:anywhere;
}
/* الميداليّةُ مُطلَقةُ الموضع داخل بطاقة الكتاب فقط؛ وفي ترويسة الاختبارات
   هي عنصرٌ في الصفّ. */
.tb-head .medallion{position:static; width:44px; height:44px; font-size:18px; flex:none}
.bookhead h1,.topichead h1{font-family:var(--ui); font-size:clamp(24px,3.6vw,34px); margin-top:4px}
.bh-meta{display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-3); margin-top:8px}
.bookhead .btn,.topichead .btn,.libhead .btn{margin-inline-start:auto}
.booklayout{display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start}
.bookside{display:grid; gap:14px}
.quizrow{display:block; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:8px; color:var(--ink)}
.quizrow:hover{border-color:var(--accent); text-decoration:none}
.quizrow b{display:block; font-size:14px}
.quizrow span{font-size:12px; color:var(--ink-3)}
.side-note p{font-size:13.5px; color:var(--ink-2); margin:0; line-height:1.9}

.tree details{margin:2px 0}
.tree summary{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm);
  cursor:pointer; list-style:none; font-size:14.5px; transition:background .14s;
}
.tree summary::-webkit-details-marker{display:none}
.tree summary::before{content:"◂"; color:var(--accent); font-size:11px; transition:transform .18s}
.tree details[open]>summary::before{transform:rotate(-90deg)}
.tree summary:hover{background:var(--surface-2)}
.t-title{font-weight:600}
.t-count{margin-inline-start:auto; font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.t-body{padding-inline-start:16px; border-inline-start:1px dashed var(--line); margin-inline-start:14px}
.t-arts{list-style:none; margin:4px 0; padding:0}
.t-arts a{display:flex; gap:10px; padding:7px 11px; border-radius:8px; color:var(--ink-2); font-size:13.5px}
.t-arts a:hover{background:var(--accent-soft); color:var(--accent-2); text-decoration:none}
.t-arts i{margin-inline-start:auto; font-style:normal; font-size:11px; color:var(--ink-3)}

.artlist{padding:6px}
.artrow{display:flex; align-items:flex-start; gap:14px; padding:13px 14px; border-radius:var(--r-sm); color:var(--ink)}
.artrow:hover{background:var(--surface-2); text-decoration:none}
.ar-n{width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--accent-soft);
  color:var(--accent-2); font-size:13px; font-weight:700; flex:none}
.ar-body b{display:block; font-size:15px; font-family:var(--ui)}
.ar-body i{display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px}
.ar-meta{margin-inline-start:auto; font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.grid-nodes{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:16px}
.nodecard{display:block; padding:16px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--sh-1); color:var(--ink)}
.nodecard:hover{border-color:var(--accent); transform:translateY(-2px); text-decoration:none}
.nodecard b{display:block; font-size:14.5px; margin-bottom:5px}
.nodecard span{font-size:12px; color:var(--ink-3)}

/* ── صفحة القراءة ───────────────────────────────────────────────────────── */
.readprogress{position:fixed; top:0; inset-inline:0; height:3px; background:transparent; z-index:70}
.readprogress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--accent))}
.readlayout{display:grid; grid-template-columns:250px minmax(0,1fr) 280px; gap:18px; align-items:start; padding-block:22px 60px}
.side{position:sticky; top:96px; display:grid; gap:14px}
.side-index{max-height:calc(100vh - 130px); display:flex; flex-direction:column}
.sidescroll{overflow-y:auto; overscroll-behavior:contain; padding-inline-end:4px; scrollbar-width:thin}
.side-index .sidescroll{max-height:calc(100vh - 200px)}
.st-root{display:grid; gap:1px}
.st-node>summary{padding:7px 9px; border-radius:7px; cursor:pointer; font-size:12.5px; color:var(--ink-2); list-style:none}
.st-node>summary::-webkit-details-marker{display:none}
.st-node>summary:hover{background:var(--surface-2)}
.st-node>div{padding-inline-start:10px; border-inline-start:1px dashed var(--line); margin-inline-start:8px}
.st-art{display:block; padding:6px 9px; border-radius:7px; font-size:12.5px; color:var(--ink-3); line-height:1.6}
.st-art:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.st-art.on{background:var(--accent-soft); color:var(--accent-2); font-weight:600}

.reader{padding:30px 34px 34px}
.readtitle{font-family:var(--ui); font-size:clamp(25px,3.7vw,36px); line-height:1.45; margin-bottom:12px}
.readmeta{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); padding-bottom:14px; border-bottom:1px solid var(--line)}
.readmeta .ic{width:15px; height:15px}
.readmeta span{display:inline-flex; align-items:center; gap:5px}
.readtools{display:flex; gap:7px; flex-wrap:wrap; margin:14px 0}
.tool{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:12.5px;
  box-shadow:var(--sh-1); transition:border-color .14s, background .14s;
}
.tool:hover{border-color:var(--accent); color:var(--accent)}
.tool.on{background:var(--accent-soft); border-color:transparent; color:var(--accent-2); font-weight:600}
.tool .ic{width:15px; height:15px}
.typepanel{display:grid; gap:12px; padding:15px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); margin-bottom:14px}
.typepanel label{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-2)}
.typepanel input[type=range]{flex:1; accent-color:var(--accent)}
.fonts{display:flex; gap:7px; flex-wrap:wrap}
.fonts button{padding:6px 13px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:var(--surface)}
.fonts button.on{background:var(--accent); color:#fff; border-color:transparent}

.articlebody{
  font-family:var(--serif); font-size:var(--read-size); line-height:var(--read-lh);
  color:var(--ink); margin-top:20px; max-width:72ch;
}
/* ضبطُ الأسطر: متنُ المقالة وحواشيها مضبوطةُ الطرفين، والسطرُ الأخيرُ من الفقرة إلى اليمين.
   والعناوينُ والآياتُ المفردةُ في سطرها لا تُمَدّ. */
.articlebody p,.articlebody li,.articlebody .framed,.fnlist li,.lq-text{text-align:justify; text-justify:inter-word; text-align-last:start}
.articlebody h2,.articlebody h3,.articlebody h4{text-align:start}
.articlebody p{margin:0 0 1.05em}
.articlebody h3.sub{
  font-family:var(--ui); font-size:1.02em; color:var(--accent-2); margin:1.6em 0 .6em;
  padding-inline-start:13px; border-inline-start:3px solid var(--accent); line-height:1.6;
}
.articlebody .ayah{
  color:var(--gold); font-weight:700; background:color-mix(in srgb, var(--gold-soft) 70%, transparent);
  padding:1px 6px; border-radius:5px; box-decoration-break:clone;
}
.articlebody .ayah::before{content:"﴿"; margin-inline-end:3px; opacity:.6}
.articlebody .ayah::after{content:"﴾"; margin-inline-start:3px; opacity:.6}
.articlebody .qcite{font-family:var(--ui); font-size:.72em; color:var(--gold); white-space:nowrap; vertical-align:.12em}
.articlebody q.hadith{
  color:var(--accent-2); background:color-mix(in srgb, var(--accent-soft) 58%, transparent);
  padding:1px 5px; border-radius:5px; quotes:"«" "»"; box-decoration-break:clone; font-weight:600;
  box-shadow:inset 0 -1px 0 var(--accent-ring);
}
.articlebody .naql{color:var(--ink-2)}
.articlebody sup.fnref{
  font-family:var(--ui); font-size:.58em; vertical-align:super; margin-inline-start:2px;
}
.articlebody sup.fnref a{
  background:var(--gold-soft); color:var(--gold); border-radius:5px; padding:1px 5px; font-weight:700;
}
.articlebody sup.fnref a:hover{background:var(--gold); color:#fff; text-decoration:none}
.articlebody mark.user-hl{background:var(--gold-soft); border-bottom:2px solid var(--gold); border-radius:3px; padding:0 2px}
body.focus-mode .articlebody p{opacity:.32; transition:opacity .25s}
body.focus-mode .articlebody p.near{opacity:1}
body.hide-footnotes .side-notes .notes-panel{display:none}

.edited-note{margin:26px 0 0; font-size:13px; color:var(--ink-3)}
.reportbox{margin:28px 0 0; border:1px solid var(--bad-soft); border-radius:var(--r); background:var(--surface); padding:0 16px}
.reportbox>summary{cursor:pointer; padding:12px 0; font-size:14px; font-weight:600; color:var(--bad); display:flex; align-items:center; gap:8px; list-style:none}
.reportbox>summary::-webkit-details-marker{display:none}
.reportbox[open]>summary{border-bottom:1px solid var(--bad-soft)}
.rb-form{display:grid; gap:12px; padding:14px 0 16px}
.rb-form label{display:grid; gap:5px; font-size:13.5px; color:var(--ink-2)}
.rb-form label i{font-style:normal; color:var(--ink-3); font-size:12px}
.rb-form select,.rb-form textarea,.rb-form input{font:inherit; font-size:14.5px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink)}
.rb-form .btn{justify-self:start}
.rb-hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden}
.rb-note{margin:12px 0; padding:10px 14px; border-radius:10px; font-size:14px}
.rb-note.ok{background:var(--accent-soft); color:var(--accent-2)}
.rb-note.warn{background:var(--warn-soft); color:var(--warn)}
.footnotes{margin-top:44px; padding-top:22px; border-top:2px solid var(--line)}
.footnotes h2{font-family:var(--ui); font-size:20px; margin-bottom:14px; color:var(--ink-2)}
.fnlist{margin:0; padding-inline-start:20px; font-size:13.5px; line-height:2; color:var(--ink-2)}
.fnlist li{margin-bottom:7px; scroll-margin-top:110px}
.fnlist li:target{background:var(--gold-soft); border-radius:6px; padding:4px 8px}
.fnlist b{color:var(--gold); font-weight:700}
.fnback{color:var(--ink-3); margin-inline-end:6px}
cite.work{font-style:normal; color:var(--accent); font-weight:600}
.vol{color:var(--ink-3); font-size:.92em}

.readnav{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:34px}
.rn{padding:14px 17px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink)}
.rn:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-2px)}
.rn i{display:block; font-style:normal; font-size:11.5px; color:var(--accent); font-weight:700}
.rn b{display:block; font-size:14px; margin-top:3px; font-family:var(--ui)}
.rn.next{text-align:start}

.cite-band{
  margin-top:26px; padding:15px 18px; border:1px dashed var(--line-2); border-radius:var(--r-sm);
  background:var(--surface-2); font-size:12.5px; color:var(--ink-2); display:flex; gap:12px;
  align-items:center; flex-wrap:wrap;
}
.cite-band b{color:var(--ink)}
.cite-text{flex:1; min-width:240px; color:var(--ink-3)}

.readstate{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1)}
.ring{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:conic-gradient(var(--accent) calc(var(--p,0)*1%), var(--surface-2) 0);
  position:relative;
}
.ring::after{content:""; position:absolute; inset:5px; background:var(--surface); border-radius:50%}
.ring i{position:relative; z-index:1; font-style:normal; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums}
.rs-label{font-size:12.5px; color:var(--ink-3)}
.notes-panel{max-height:46vh; display:flex; flex-direction:column}
.notes-panel .sidescroll{max-height:38vh}
.sidefn{font-size:12px; line-height:1.85; color:var(--ink-2); padding:9px 0; border-bottom:1px solid var(--line)}
.sidefn:last-child{border-bottom:0}
.sidefn b{color:var(--gold)}
.sidefn.lit{background:var(--gold-soft); border-radius:7px; padding-inline:9px}
.relrow{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.relrow:last-child{border-bottom:0}
.relrow i{margin-inline-start:auto; font-style:normal; font-size:11px; color:var(--ink-3)}
.quiz-cta{display:block; text-align:center; background:linear-gradient(140deg,var(--accent-soft),var(--gold-soft)); color:var(--ink)}
.quiz-cta:hover{text-decoration:none; transform:translateY(-2px)}
.quiz-cta .ic{width:26px; height:26px; color:var(--accent); margin-bottom:6px}
.quiz-cta b{display:block; font-size:14.5px}
.quiz-cta span{font-size:12px; color:var(--ink-3)}

.fnpop{
  position:absolute; z-index:80; max-width:min(420px,88vw); padding:14px 16px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  box-shadow:var(--sh-3); font-size:13px; line-height:1.9; color:var(--ink-2);
}
.fnpop b{color:var(--gold)}
.selbar{
  position:absolute; z-index:85; display:flex; gap:4px; padding:5px;
  background:var(--ink); border-radius:11px; box-shadow:var(--sh-3);
}
.selbar button{padding:7px 12px; border-radius:8px; font-size:12.5px; color:#fff}
.selbar button:hover{background:rgba(255,255,255,.14)}

/* ── البحث ──────────────────────────────────────────────────────────────── */
.searchform{margin-bottom:20px}
.sf-row{display:flex; align-items:center; gap:11px}
.sf-row .ic{color:var(--accent)}
.sf-row input{flex:1; border:0; background:none; font-size:17px; padding:8px 0; min-width:0}
.sf-row input:focus{outline:none}
.sf-opts{display:flex; gap:18px; flex-wrap:wrap; margin-top:13px; padding-top:13px; border-top:1px solid var(--line)}
.chk{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); cursor:pointer}
.chk input{accent-color:var(--accent)}
.searchlayout{display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:start}
.facets .facet{display:flex; gap:10px; padding:8px 11px; border-radius:8px; font-size:13.5px; color:var(--ink-2)}
.facets .facet:hover{background:var(--surface-2); text-decoration:none}
.facets .facet.on{background:var(--accent-soft); color:var(--accent-2); font-weight:600}
.facets .facet i{margin-inline-start:auto; font-style:normal; font-size:11.5px; color:var(--ink-3)}
.searchsum{font-size:14px; color:var(--ink-2); margin-bottom:14px}
.searchsum b{color:var(--accent); font-size:17px}
.hintpill{display:inline-block; font-size:11.5px; background:var(--warn-soft); color:var(--warn); padding:2px 9px; border-radius:999px}
.hit{display:block; margin-bottom:12px; color:var(--ink); transition:transform .14s, border-color .14s}
.hit:hover{transform:translateY(-2px); border-color:var(--accent); text-decoration:none}
.hit-path{font-size:11.5px; color:var(--ink-3)}
.hit b{display:block; font-family:var(--ui); font-size:19px; color:var(--accent); margin:5px 0 7px}
.hit p{font-family:var(--serif); font-size:14.5px; color:var(--ink-2); line-height:1.95; margin:0 0 8px}
.hit-meta{font-size:11.5px; color:var(--ink-3)}
mark{background:var(--gold-soft); color:inherit; border-radius:3px; padding:0 2px; font-weight:700}
.pager{display:flex; gap:14px; align-items:center; justify-content:center; margin-top:22px; font-size:13.5px; color:var(--ink-3)}
.pager a{padding:7px 15px; border:1px solid var(--line); border-radius:9px; background:var(--surface)}

.worksgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:9px}
.workchip{display:flex; gap:10px; padding:11px 13px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:13px; box-shadow:var(--sh-1)}
.workchip b{font-weight:600; color:var(--ink)}
.workchip i{margin-inline-start:auto; font-style:normal; color:var(--accent); font-variant-numeric:tabular-nums}

/* ── الاختبارات ─────────────────────────────────────────────────────────── */
.testbooks{display:grid; gap:16px}
.testbook{padding:20px 22px}
.tb-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.tb-head h3{font-family:var(--ui); font-size:20px}
.tb-head .btn{margin-inline-start:auto}
.tb-topics{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
.tb-topic{display:block; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink)}
.tb-topic:hover{border-color:var(--accent); background:var(--accent-soft); text-decoration:none; transform:translateY(-2px)}
.tb-topic b{display:block; font-size:14.5px}
.tb-topic span{font-size:12px; color:var(--ink-3)}

.levels{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.levelcard{display:block; padding:22px; text-align:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-1); color:var(--ink)}
.levelcard:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--accent); text-decoration:none}
.lv-badge{display:grid; place-items:center; width:52px; height:52px; margin:0 auto 12px; border-radius:50%;
  font-family:var(--serif); font-size:23px; font-weight:700; color:#fff; background:var(--accent)}
.lv-badge.lv2{background:var(--gold)}
.lv-badge.lv3{background:var(--ink)}
.levelcard b{display:block; font-size:17px; font-family:var(--ui)}
.lv-meta{display:block; font-size:12.5px; color:var(--ink-3); margin-top:4px}
.lv-best{display:block; font-size:12px; color:var(--accent); margin-top:9px; font-weight:600}
.lv-best.muted{color:var(--ink-3); font-weight:400}

.modeswitch{display:flex; gap:4px; padding:4px; background:var(--surface-2); border-radius:11px; margin-inline-start:auto}
.modeswitch button{padding:8px 14px; border-radius:8px; font-size:12.5px; color:var(--ink-3)}
.modeswitch button.on{background:var(--surface); color:var(--accent-2); font-weight:700; box-shadow:var(--sh-1)}
.quizbar{display:flex; align-items:center; gap:14px; padding:12px 18px; margin-bottom:16px; position:sticky; top:84px; z-index:30}
.qb-progress{flex:1; height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden}
.qb-progress i{display:block; height:100%; width:0; background:var(--accent); transition:width .3s}
.qb-text{font-size:13px; color:var(--ink-3); white-space:nowrap}
.qb-score{font-size:13px; font-weight:700; color:var(--accent)}
.questions{display:grid; gap:12px; margin:0; padding:0; border:0}
.qcard{margin:0; border-radius:var(--r); transition:border-color .2s, box-shadow .2s}
.qcard legend{display:flex; gap:11px; align-items:flex-start; font-family:var(--serif); font-size:18px;
  font-weight:700; line-height:1.7; padding:0; margin-bottom:14px}
.q-n{display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--accent-soft);
  color:var(--accent-2); font-family:var(--ui); font-size:13px; flex:none}
.opts{display:grid; gap:8px}
.opt{display:flex; align-items:center; gap:11px; padding:12px 15px; border:1px solid var(--line);
  border-radius:var(--r-sm); cursor:pointer; font-size:15px; background:var(--surface); transition:.16s}
.opt:hover{border-color:var(--accent); background:var(--accent-soft)}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt-mark{width:20px; height:20px; border:2px solid var(--line-2); border-radius:50%; flex:none; position:relative; transition:.16s}
.opt input:checked + .opt-mark{border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px var(--surface)}
.opt-text{font-family:var(--serif); font-size:16.5px}
.opt.right{border-color:var(--good); background:var(--good-soft)}
.opt.right .opt-mark{border-color:var(--good); background:var(--good)}
.opt.wrong{border-color:var(--bad); background:var(--bad-soft)}
.opt.wrong .opt-mark{border-color:var(--bad); background:var(--bad)}
.qcard.answered{border-color:var(--line-2)}
.qcard.is-right{box-shadow:inset 3px 0 0 var(--good), var(--sh-1)}
.qcard.is-wrong{box-shadow:inset 3px 0 0 var(--bad), var(--sh-1)}
.qfeedback{margin-top:11px; font-size:13px; padding:9px 13px; border-radius:8px}
.qfeedback.good{background:var(--good-soft); color:var(--good)}
.qfeedback.bad{background:var(--bad-soft); color:var(--bad)}
.quizactions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.result{display:flex; align-items:center; gap:24px; margin-top:20px; flex-wrap:wrap}
.result-ring{width:120px; height:120px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:conic-gradient(var(--accent) calc(var(--p,0)*1%), var(--surface-2) 0); position:relative}
.result-ring::after{content:""; position:absolute; inset:11px; background:var(--surface); border-radius:50%}
.result-ring b{position:relative; z-index:1; font-size:27px; font-variant-numeric:tabular-nums}
.result-body h3{font-family:var(--ui); font-size:23px}
.result-body p{color:var(--ink-2); margin:7px 0 14px}
.result-actions{display:flex; gap:9px; flex-wrap:wrap}

/* ── الدخول والمكتبة ────────────────────────────────────────────────────── */
.authbox{max-width:430px; margin:36px auto; text-align:center; padding:34px 30px}
.auth-mark{display:block; width:52px; height:52px; margin:0 auto 16px; color:var(--accent)}
.authbox h1{font-family:var(--ui); font-size:26px}
.auth-lede{font-size:14px; color:var(--ink-3); margin:8px 0 22px; line-height:1.9}
.oauth{display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; margin-bottom:10px;
  border:1px solid var(--line-2); border-radius:11px; font-size:15px; font-weight:600;
  background:var(--surface); color:var(--ink); box-shadow:var(--sh-1)}
.oauth:hover{border-color:var(--accent); transform:translateY(-2px); text-decoration:none}
.oauth.disabled{color:var(--ink-3); font-weight:400; font-size:13px; border-style:dashed; cursor:not-allowed}
.oa-ic{width:19px; height:19px}
.or{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--ink-3); font-size:12.5px}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line)}
.emailform{display:flex; gap:8px; margin-bottom:10px}
.emailform input{flex:1; padding:11px 14px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; min-width:0}
.authnote{font-size:11.5px; color:var(--ink-3); line-height:1.9; margin-top:18px}

.libstats{display:flex; gap:20px; font-size:12.5px; color:var(--ink-3); margin-inline-start:auto}
.libstats b{display:block; font-size:20px; color:var(--ink)}
.libactions{display:flex; gap:8px}
.libgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:16px}
.libgrid .span2{grid-column:1/-1}
.librow{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); color:var(--ink); font-size:14px}
.librow:last-child{border-bottom:0}
.librow:hover{text-decoration:none; color:var(--accent)}
.librow b{font-weight:600; flex:1; min-width:0}
.librow i{font-style:normal; font-size:12px; color:var(--ink-3); white-space:nowrap}
.librow i.good{color:var(--good); font-weight:700}
.librow i.mid{color:var(--warn); font-weight:700}
.librow i.bad{color:var(--bad); font-weight:700}
.lib-bar{width:90px; height:5px; background:var(--surface-2); border-radius:3px; overflow:hidden; flex:none}
.lib-bar i{display:block; height:100%; background:var(--accent)}
.hlrow{padding:13px 0; border-bottom:1px solid var(--line)}
.hlrow blockquote{margin:0 0 6px; padding-inline-start:12px; border-inline-start:3px solid var(--gold);
  font-family:var(--serif); font-size:15px; color:var(--ink-2); line-height:1.95}
.hl-note{font-size:13px; color:var(--ink-3); margin:0 0 5px}
.hlrow a{font-size:12.5px}

/* ── لوحة الأوامر ───────────────────────────────────────────────────────── */
.palette{position:fixed; inset:0; z-index:100; display:grid; place-items:start center; padding-top:11vh}
.palette-scrim{position:absolute; inset:0; background:rgba(12,22,18,.5); backdrop-filter:blur(3px)}
.palette-box{position:relative; width:min(660px,92vw); background:var(--surface); border:1px solid var(--line-2);
  border-radius:16px; box-shadow:var(--sh-3); overflow:hidden; animation:pop .18s ease-out}
@keyframes pop{from{opacity:0; transform:translateY(-10px) scale(.985)}}
.palette-head{display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line)}
.palette-head .ic{color:var(--accent)}
.palette-head input{flex:1; border:0; background:none; font-size:17px; min-width:0}
.palette-head input:focus{outline:none}
.palette-body{max-height:52vh; overflow-y:auto; padding:8px}
.palette-hint{font-size:13px; color:var(--ink-3); padding:20px; text-align:center; margin:0}
.pres{display:block; padding:11px 14px; border-radius:var(--r-sm); color:var(--ink)}
.pres:hover,.pres.sel{background:var(--accent-soft); text-decoration:none}
.pres b{display:block; font-family:var(--ui); font-size:16px}
.pres span{font-size:11.5px; color:var(--ink-3)}
.palette-foot{display:flex; gap:16px; align-items:center; padding:10px 18px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3); background:var(--surface-2)}
.palette-foot a{margin-inline-start:auto}

/* ── التذييل ────────────────────────────────────────────────────────────── */
.sitefoot{margin-top:60px; border-top:1px solid var(--line); background:var(--surface)}
.footgrid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; padding-block:38px}
.fbrand{font-family:var(--ui); font-size:20px; font-weight:700; margin-bottom:9px}
.fdesc{font-size:13.5px; color:var(--ink-3); max-width:380px; line-height:1.9}
.fattrib{font-size:13px; color:var(--ink-2); line-height:2; margin:0}
.fcol h4{font-size:12.5px; color:var(--ink-3); margin-bottom:11px; letter-spacing:.04em}
.fcol a{display:block; font-size:13.5px; color:var(--ink-2); padding:4px 0}
.fcol a:hover{color:var(--accent)}
.footbar{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:16px;
  border-top:1px solid var(--line); font-size:12px; color:var(--ink-3)}

/* ── لوحة التحكّم ───────────────────────────────────────────────────────── */
.adminwrap{padding-block:22px 60px}
.admintabs{display:flex; gap:4px; flex-wrap:wrap; align-items:center; padding:9px; margin-bottom:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1)}
.at-brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; padding:0 12px 0 6px; color:var(--accent)}
.at{display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:9px; font-size:13.5px; color:var(--ink-2)}
.at:hover{background:var(--surface-2); text-decoration:none}
.at.on{background:var(--accent); color:#fff}
.at.on .ic{color:#fff}
.at.end{margin-inline-start:auto; color:var(--ink-3)}
.adminhead{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.adminhead h1{font-family:var(--ui); font-size:26px}
.adminhead .btn,.head-actions{margin-inline-start:auto}
.head-actions{display:flex; gap:8px}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px; margin-bottom:16px}
.kpi{padding:15px 17px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1)}
.k-l{display:block; font-size:12px; color:var(--ink-3)}
.k-v{display:block; font-size:28px; font-weight:700; margin-top:3px; letter-spacing:-.02em}
.k-n{display:block; font-size:11.5px; color:var(--accent)}
.chartpanel{margin-bottom:16px}
.ylab{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.chart{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; align-items:end; height:150px;
  border-bottom:1px solid var(--line); margin-top:8px}
.chart .bar{display:block; height:100%; display:flex; align-items:flex-end}
.chart .bar i{display:block; width:100%; height:calc(var(--hpct,0)*1%); min-height:2px;
  background:linear-gradient(var(--accent), var(--accent-2)); border-radius:4px 4px 0 0; transition:height .5s}
.xlab{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3); margin-top:7px}
.admingrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.admingrid .span2{grid-column:span 2}
.adminrow{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink)}
.adminrow:last-child{border-bottom:0}
.adminrow b{flex:1; font-weight:500; min-width:0}
.readbar{display:block; height:10px; width:var(--w,0); min-width:2px; background:var(--accent); border-radius:5px}
.adminrow i{font-style:normal; color:var(--accent); font-variant-numeric:tabular-nums; font-weight:700}
.panel.alarm{border-color:var(--warn)}
.adminfilter{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:14px; padding:13px}
.adminfilter input,.adminfilter select{padding:9px 13px; border:1px solid var(--line); border-radius:9px; background:var(--surface)}
.adminfilter input{flex:1; min-width:180px}
.tablepanel{padding:0; overflow-x:auto}
.admintable{width:100%; border-collapse:collapse; font-size:13.5px}
.admintable th{text-align:right; font-size:11.5px; color:var(--ink-3); font-weight:600; padding:11px 14px;
  background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap}
.admintable td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.admintable tr:last-child td{border-bottom:0}
.admintable tr.on{background:var(--accent-soft)}
.tmeta{display:block; font-size:11px; color:var(--ink-3)}
.st{display:inline-block; font-size:11.5px; padding:2px 9px; border-radius:6px; font-weight:600}
.st-published{background:var(--good-soft); color:var(--good)}
.st-draft{background:var(--warn-soft); color:var(--warn)}
.st-hidden{background:var(--surface-2); color:var(--ink-3)}
.st-deleted{background:var(--bad-soft); color:var(--bad)}
.acts{display:flex; gap:9px; white-space:nowrap}
.acts a{font-size:12.5px}
.editorlayout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start}
.editorside{display:grid; gap:14px; position:sticky; top:90px}
.editorside .sidescroll{max-height:40vh}
.editor{display:grid; gap:15px}
.fld{display:grid; gap:6px}
.fld>span{font-size:12px; color:var(--ink-3); font-weight:600}
.fld input,.fld select,.fld textarea{padding:11px 14px; border:1px solid var(--line-2); border-radius:10px;
  background:var(--surface); width:100%}
.fld textarea{font-family:var(--serif); font-size:15.5px; line-height:2; resize:vertical}
.edtools{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px}
.edtools button{padding:5px 11px; font-size:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2)}
.edtools button:hover{border-color:var(--accent); color:var(--accent)}
.editor-actions{display:flex; gap:9px; flex-wrap:wrap}
.check{font-size:12.5px; padding:7px 11px; border-radius:8px; margin-bottom:6px}
.check.good{background:var(--good-soft); color:var(--good)}
.check.warn{background:var(--warn-soft); color:var(--warn)}
.check.bad{background:var(--bad-soft); color:var(--bad)}
.fnedit,.qedit{display:grid; gap:6px; padding:9px 0; border-bottom:1px solid var(--line)}
.fnedit textarea,.qedit textarea{padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; width:100%}
.qopt{display:flex; gap:7px; align-items:center}
.qopt input[type=text]{flex:1; padding:6px 9px; border:1px solid var(--line); border-radius:7px; font-size:12.5px}
.qopt input[type=radio]{accent-color:var(--good)}
.revrow{display:flex; gap:10px; align-items:center; font-size:12px; color:var(--ink-3); padding:7px 0; border-bottom:1px solid var(--line)}
.revrow span{flex:1}
.panel.danger{border-color:var(--bad)}
.inlineform{display:flex; gap:6px; align-items:center}
.inlineform input,.inlineform select{padding:6px 10px; border:1px solid var(--line); border-radius:8px;
  font-size:12.5px; background:var(--surface); max-width:260px}
.prose h1{font-family:var(--ui); font-size:30px; margin-bottom:14px}
.prose h2{font-family:var(--ui); font-size:21px; margin:26px 0 10px; color:var(--accent-2)}
.prose p,.prose li{color:var(--ink-2); font-size:15px; line-height:2}
.prose ul{padding-inline-start:20px}
.cite-block{border-inline-start:3px solid var(--gold); background:var(--gold-soft); margin:14px 0;
  padding:13px 16px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:14px; color:var(--ink-2)}
.notfound{text-align:center}
.nf-mark{font-family:var(--serif); font-size:70px; color:var(--line-2); line-height:1}
.nf-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px}

/* ── تجاوب ──────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .readlayout{grid-template-columns:230px minmax(0,1fr)}
  .side-notes{display:none}
}
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr}
  .hero-art{display:none}
  .booklayout,.searchlayout,.editorlayout{grid-template-columns:1fr}
  .editorside{position:static}
  .footgrid{grid-template-columns:1fr 1fr}
  .admingrid .span2{grid-column:span 1}
}
@media (max-width:860px){
  .readlayout{grid-template-columns:1fr}
  .side-index{display:none}
  .reader{padding:22px 18px 26px}
  .mainnav{display:none}
  .st-label{display:none}
  .searchtrigger kbd{display:none}
  .top{min-height:62px; gap:10px}
  .readnav{grid-template-columns:1fr}
}
@media (max-width:620px){
  .shell{padding-inline:16px}
  .footgrid{grid-template-columns:1fr}
  .quizbar{top:72px}
  .libstats{width:100%; margin-inline-start:0}
  .result{justify-content:center; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
@media print{
  .masthead,.sitefoot,.side,.readtools,.readnav,.palette,.quizbar{display:none!important}
  body{background:#fff}
  .panel{box-shadow:none; border:0}
}

/* ── بوّابة اللوحة ───────────────────────────────────────────────────────── */
.gatefields{display:grid; gap:12px; margin-bottom:16px; text-align:start}
.gatefields .fld>span{font-size:12px; color:var(--ink-3); font-weight:600}
.gatefields input{width:100%; padding:11px 14px; border:1px solid var(--line-2);
  border-radius:10px; background:var(--surface); font-size:15px}
.gatefields input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-ring)}
.gatebtn{width:100%; justify-content:center; padding:12px}
.gatebtn:disabled{opacity:.5; cursor:not-allowed}
body.is-gate .mainnav,
body.is-gate .startpaths,
body.is-admin .startpaths,
body.is-gate .searchtrigger,
body.is-gate .signin{display:none}

/* ── إضافةُ حاشيةٍ أو سؤال ───────────────────────────────────────────────── */
.fnnew,.qnew{display:grid; gap:7px; padding:12px; margin-bottom:12px; border:1px dashed var(--line-2);
  border-radius:var(--r-sm); background:var(--surface-2)}
.fnnew-head{font-size:12.5px; font-weight:700; color:var(--accent)}
.fnnew-marker{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-3)}
.fnnew-marker input{width:70px; padding:5px 9px; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); font-size:12.5px; text-align:center}
.fnnew textarea,.qnew textarea{padding:7px 10px; border:1px solid var(--line); border-radius:8px;
  font-size:12.5px; width:100%; background:var(--surface)}
.fnnew .chk{font-size:12px}
.qnew-hint{margin:0; font-size:11px; color:var(--ink-3)}
.fnrow,.qrow{display:flex; gap:8px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line)}
.fnrow:last-child,.qrow:last-child{border-bottom:0}
.fnrow .fnedit,.qrow .qedit{flex:1; min-width:0; border-bottom:0; padding:0}
.qrow-head{font-size:11.5px; color:var(--ink-3); font-weight:700}
.danger-btn{color:var(--bad); border-color:var(--bad-soft)}
.danger-btn:hover{border-color:var(--bad); background:var(--bad-soft)}

/* ── نماذجُ الإضافة في اللوحة ────────────────────────────────────────────── */
.addgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-bottom:16px}
.addform{display:grid; gap:10px; align-content:start; border-style:dashed}
.addform .fld{gap:4px}
.addform .fld input,.addform .fld select{padding:9px 12px; font-size:13.5px}
.addform .btn{justify-self:start}
tr.artline td{background:color-mix(in srgb, var(--surface-2) 45%, transparent); font-size:13px}
tr.artline .artdot{color:var(--accent); margin-inline-end:4px}
tr.artline .st{margin-inline-start:8px}
.addform.move{border-color:var(--accent); border-style:solid; background:var(--accent-soft)}
.t-empty{margin:4px 0 8px; padding-inline-start:11px; font-size:12.5px; color:var(--ink-3)}

/* ══ الأيقونة العائمة: أدوات القارئ ═══════════════════════════════════════ */
.toolsdock{position:fixed; inset-inline-end:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.fab{
  display:inline-flex; align-items:center; gap:9px; padding:13px 20px; border-radius:999px;
  background:linear-gradient(140deg, var(--gold-2, #A9762F), var(--gold)); color:#fff;
  font-family:var(--ui); font-size:14.5px; font-weight:700; border:0; cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(143,100,32,.65), 0 3px 8px rgba(30,45,40,.25),
             0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s;
}
.fab:hover{transform:translateY(-3px); box-shadow:0 16px 34px -10px rgba(143,100,32,.7), 0 4px 10px rgba(30,45,40,.28)}
.fab:active{transform:translateY(-1px)}
.fab .ic{width:20px; height:20px}
.fab[aria-expanded="true"]{background:var(--ink); box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}

.toolsheet,.benefitbox{
  width:min(330px, calc(100vw - 40px)); background:var(--surface);
  border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--sh-3);
  padding:12px; display:grid; gap:8px; order:-1;
  animation:tools-rise .2s cubic-bezier(.2,.8,.3,1) both;
}
.benefitbox{width:min(400px, calc(100vw - 40px))}
@keyframes tools-rise{from{opacity:0; transform:translateY(10px) scale(.97)}}
.ts-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:2px 6px 8px; border-bottom:1px solid var(--line); font-size:14px}
.iconbtn.tiny{width:28px; height:28px; border-radius:8px}
.iconbtn.tiny .ic{width:15px; height:15px}
.tsbtn{
  display:flex; align-items:center; gap:12px; width:100%; text-align:start;
  padding:11px 12px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer; font-family:var(--ui);
  transition:border-color .14s, background .14s, transform .14s;
}
.tsbtn:hover{border-color:var(--accent); background:var(--accent-soft); transform:translateY(-1px); text-decoration:none}
.ts-ic{width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px;
  background:var(--accent-soft); color:var(--accent-2); font-size:17px}
.brandbtn .ts-ic{background:var(--gold-soft); color:var(--gold)}
.ts-txt b{display:block; font-size:14px}
.ts-txt i{display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); margin-top:1px}

.benefitbox textarea{width:100%; padding:11px 13px; border:1px solid var(--line-2); border-radius:11px;
  background:var(--paper); font-family:var(--serif); font-size:15px; line-height:1.95; resize:vertical}
.benefitbox textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
.bf-from{margin:0; font-size:11.5px; color:var(--ink-3)}
.bf-actions{display:flex; gap:8px}
.bf-note{margin:0; font-size:12px; color:var(--accent); min-height:1.2em}
.bf-note.warn{color:var(--warn)}
.bf-list{max-height:40vh; overflow-y:auto; display:grid; gap:8px; padding-top:4px;
  border-top:1px solid var(--line)}
.bf-item{border:1px solid var(--line); border-inline-start:3px solid var(--gold); border-radius:0 10px 10px 0;
  padding:9px 11px; background:var(--surface-2)}
.bf-item p{margin:0 0 4px; font-family:var(--serif); font-size:13.5px; line-height:1.9; color:var(--ink-2)}
.bf-item .bf-meta{display:flex; gap:10px; align-items:center; font-size:10.5px; color:var(--ink-3)}
.bf-item .bf-meta a{margin-inline-start:auto}
.bf-item button{font-size:10.5px; color:var(--bad); background:none; border:0; cursor:pointer; padding:0}
.bf-empty{font-size:12.5px; color:var(--ink-3); text-align:center; padding:10px}

@media (max-width:620px){
  .toolsdock{inset-inline-end:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .fab{padding:12px 17px; font-size:13.5px}
}
@media print{ .toolsdock{display:none!important} }

/* ── الموسوعات الثلاث ─────────────────────────────────────────────────────
   لكلّ موسوعةٍ لونُها: العقيدةُ بالأخضر الأصليّ، والفِرَقُ بالذهبيّ،
   والأديانُ بالأرجوانيّ — تمييزٌ سريعٌ للعين في الشريط والبحث والبطاقات. */
:root{ --plum:#6B3A5B; --plum-2:#804A6E; --plum-soft:#F0E3EC; }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --plum:#C99AB8; --plum-2:#DDB3CE; --plum-soft:#2A1B25;
}}
:root[data-theme="dark"]{ --plum:#C99AB8; --plum-2:#DDB3CE; --plum-soft:#2A1B25; }

.colswitch{display:flex; gap:3px; padding:3px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:12px; margin-inline-start:8px}
.colswitch .cs{
  font-size:12.5px; font-weight:600; color:var(--ink-2); padding:7px 13px;
  border-radius:9px; text-decoration:none; white-space:nowrap; transition:background .15s, color .15s;
}
.colswitch .cs:hover{background:var(--surface); color:var(--ink); text-decoration:none}
.colswitch .cs.on{background:var(--surface); color:var(--accent-2); box-shadow:var(--sh-1)}
.colswitch .cs[data-col="firaq"].on{color:var(--gold)}
.colswitch .cs[data-col="adyan"].on{color:var(--plum)}

.colband{display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:16px}
.colcard{
  position:relative; display:flex; flex-direction:column; gap:7px; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px 18px; box-shadow:var(--sh-1); color:var(--ink);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.colcard::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:linear-gradient(var(--accent), var(--accent-2))}
.colcard.col-firaq::before{background:linear-gradient(var(--gold), var(--gold-2))}
.colcard.col-adyan::before{background:linear-gradient(var(--plum), var(--plum-2))}
.colcard:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--accent); text-decoration:none}
.colcard.col-firaq:hover{border-color:var(--gold)}
.colcard.col-adyan:hover{border-color:var(--plum)}
.cc-kicker{font-size:11.5px; font-weight:700; letter-spacing:.05em; color:var(--accent)}
.colcard.col-firaq .cc-kicker{color:var(--gold)}
.colcard.col-adyan .cc-kicker{color:var(--plum)}
.colcard b{font-family:var(--serif); font-size:21px; line-height:1.5}
.colcard p{font-size:13.5px; color:var(--ink-2); margin:0; line-height:1.85}
.cc-meta{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--ink-3); margin-top:4px}
.cc-meta .tag{background:var(--accent-soft); color:var(--accent-2); padding:1px 9px; border-radius:999px}
.cc-go{margin-top:auto; padding-top:10px; font-size:13px; font-weight:600; color:var(--accent);
  display:inline-flex; align-items:center; gap:6px}
.colcard.col-firaq .cc-go{color:var(--gold)}
.colcard.col-adyan .cc-go{color:var(--plum)}

.colbadge{font-size:11px; font-weight:600; padding:1px 9px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-2); margin-inline-end:7px; white-space:nowrap}
.colbadge.col-firaq{background:var(--gold-soft); color:var(--gold)}
.colbadge.col-adyan{background:var(--plum-soft); color:var(--plum)}

.colchips{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px}
.colchip{
  font-size:13px; padding:7px 15px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); text-decoration:none; box-shadow:var(--sh-1);
}
.colchip i{font-style:normal; font-size:11.5px; color:var(--ink-3); margin-inline-start:4px}
.colchip:hover{border-color:var(--accent); color:var(--ink); text-decoration:none}
.colchip.on{background:var(--accent); border-color:var(--accent); color:#fff}
.colchip.on i{color:rgba(255,255,255,.75)}
.colchip.col-firaq.on{background:var(--gold); border-color:var(--gold)}
.colchip.col-adyan.on{background:var(--plum); border-color:var(--plum)}

.bookcard.col-firaq .medallion{background:var(--gold-soft); color:var(--gold)}
.bookcard.col-adyan .medallion{background:var(--plum-soft); color:var(--plum)}
.bookcard.col-firaq .bc-kicker{color:var(--gold)}
.bookcard.col-adyan .bc-kicker{color:var(--plum)}

@media (max-width:980px){
  .colswitch .cs{padding:6px 10px; font-size:12px}
}
/* في الجوّال: الشريطُ العُلويُّ يلتفّ سطرَين — الهُويّةُ والأدواتُ في سطر،
   ومُبدِّلُ الأقسام في سطرٍ كاملٍ تحتَه. وإلّا خرج الشريطُ عن عرض الشاشة
   فانزاحتِ الصفحةُ كلُّها أفقيًّا. */
@media (max-width:860px){
  .top{flex-wrap:wrap; gap:10px 12px; min-height:0; padding-block:10px}
  .brand{flex:1 1 auto; min-width:0}
  .brand-text b{font-size:15px}
  .brand-text i{font-size:10.5px}
  .topactions{flex:none; margin-inline-start:auto}
  .colswitch{order:3; flex:1 0 100%; width:100%; margin-inline-start:0; justify-content:space-between}
  .colswitch .cs{flex:1; text-align:center; padding:8px 6px; font-size:13px}
}
/* وفي الشاشات الأضيق: الهُويّةُ والأدواتُ في سطرٍ واحدٍ لا سطرَين،
   فيبقى الشريطُ سطرَين اثنين لا ثلاثة، ولا يأكل من الشاشة ثُلُثَها. */
@media (max-width:700px){
  .top{gap:8px 10px; padding-block:9px}
  .brand{flex:0 1 auto; gap:8px; min-width:0}
  .brand-mark{width:30px; height:30px}
  .brand-text b{font-size:14.5px; white-space:nowrap}
  .brand-text i{display:none}
  .topactions{gap:6px}
  .searchtrigger{padding:8px 11px}
  .iconbtn,.signin{padding:8px 11px}
  .colswitch{padding:3px}
  .colswitch .cs{padding:7px 4px; font-size:12.5px}
}
/* وفي أضيق الهواتف: كلمةُ «دخول» تُطوى إلى أيقونتها، فيبقى السطرُ واحدًا */
@media (max-width:400px){
  .signin span{display:none}
  .signin{padding:8px 10px}
  .brand-text b{font-size:14px}
  .top{gap:8px}
}
.prescol{font-style:normal; font-size:10.5px; padding:1px 7px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-2)}
.cc-sub{font-size:12px; color:var(--ink-3); margin-top:-3px}

/* ── موضعُ إحالة الحاشية ─────────────────────────────────────────────────── */
.fnnew .fld{display:grid; gap:5px}
.fnnew .fld>span{font-size:11.5px; color:var(--ink-3); font-weight:600}
.fnnew select,.fnnew textarea{width:100%; font-family:var(--ui); font-size:13px;
  border:1px solid var(--line-2); border-radius:9px; padding:8px 10px; background:var(--surface)}
.fnmove{display:grid; grid-template-columns:1fr auto; gap:6px; align-items:end; margin-top:6px}
.fnmove textarea{font-family:var(--ui); font-size:12.5px; border:1px dashed var(--line-2);
  border-radius:8px; padding:7px 9px; background:var(--surface-2); resize:vertical}
.fnmove textarea:focus{border-style:solid; border-color:var(--accent); outline:none}

/* ── تلوينُ النصّ وتأطيرُه (في صفحة القارئ وفي معاينة المحرِّر) ─────────────
   أصنافٌ لا ألوانٌ مكتوبةٌ في المَتن: فيتبدّل اللونُ مع الوضع الليليّ وحده،
   ويُغيَّر لونٌ في الموقع كلِّه من هنا لا من ألفِ مقالة. */
:root{
  --tc-green:#0C6A5A; --tc-gold:#8F6420; --tc-red:#A3321F; --tc-blue:#1F5C99; --tc-plum:#6B3A5B;
  --boxed-bg:#FBF1D9; --boxed-line:#D9B86C;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --tc-green:#5CCBAA; --tc-gold:#E0B87E; --tc-red:#EE8A76; --tc-blue:#86B6EC; --tc-plum:#D9A9C8;
  --boxed-bg:#2E2617; --boxed-line:#8A6A34;
}}
:root[data-theme="dark"]{
  --tc-green:#5CCBAA; --tc-gold:#E0B87E; --tc-red:#EE8A76; --tc-blue:#86B6EC; --tc-plum:#D9A9C8;
  --boxed-bg:#2E2617; --boxed-line:#8A6A34;
}
.tc{font-weight:700}
.tc-green{color:var(--tc-green)}
.tc-gold{color:var(--tc-gold)}
.tc-red{color:var(--tc-red)}
.tc-blue{color:var(--tc-blue)}
.tc-plum{color:var(--tc-plum)}

/* إطارٌ حول عبارةٍ داخل السطر: يُظلَّل ويُحاط، وإن انكسر السطرُ أُعيد الإطارُ
   على كلِّ جزءٍ منه (box-decoration-break) فلا يبقى نصفُ إطار. */
.boxed{
  background:var(--boxed-bg); border:1px solid var(--boxed-line); border-radius:6px;
  padding:1px 7px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
/* صندوقٌ حول فقرةٍ كاملة */
.framed{
  display:block; margin:16px 0; padding:14px 18px; border-radius:14px;
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-inline-start:4px solid var(--accent); box-shadow:var(--sh-1);
}
.framed.framed-gold{
  background:var(--gold-soft); border-color:color-mix(in srgb, var(--gold) 45%, transparent);
  border-inline-start-color:var(--gold);
}
.framed > p:last-child{margin-bottom:0}

/* ── شريطُ التلوين في المحرِّر ───────────────────────────────────────────── */
.edtools-2{align-items:center; padding:7px 9px; margin:4px 0 6px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px}
.edlabel{font-size:11.5px; color:var(--ink-3); font-weight:600; margin-inline-end:2px}
.edsep{width:1px; height:22px; background:var(--line-2); margin-inline:4px}
.edtools .swatch{width:30px; height:30px; padding:0; border-radius:50%; font-weight:700; font-size:14px;
  display:inline-grid; place-items:center; background:var(--surface)}
.edtools .sw-green{color:var(--tc-green); border-color:var(--tc-green)}
.edtools .sw-gold{color:var(--tc-gold); border-color:var(--tc-gold)}
.edtools .sw-red{color:var(--tc-red); border-color:var(--tc-red)}
.edtools .sw-blue{color:var(--tc-blue); border-color:var(--tc-blue)}
.edtools .sw-plum{color:var(--tc-plum); border-color:var(--tc-plum)}
.edtools .swatch:hover{transform:scale(1.08); box-shadow:var(--sh-1)}
.edtools button.warn{background:var(--warn-soft); color:var(--warn); border-color:var(--warn)}

/* ── المعاينةُ الفوريّة ──────────────────────────────────────────────────── */
.edpreview-head{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-top:12px; font-size:12.5px}
.edpreview-head b{color:var(--accent); font-size:13px}
.edpreview{
  max-height:520px; overflow:auto; margin-top:6px; padding:18px 22px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:inset 0 1px 3px rgba(0,0,0,.05);
  font-family:var(--serif); font-size:17px; line-height:2.1;
}

/* ── صفُّ الحاشية في المحرِّر: ثلاثةُ نماذج كانت تتزاحم في سطرٍ واحد ─────────
   فصارت طبقتين: النصُّ وحفظُه بعرض العمود، ثمّ نقلُ الإحالة والحذفُ تحته. */
.fnrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end}
.fnrow .fnedit{grid-column:1 / -1; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 8px; align-items:start}
.fnrow .fnedit b{padding-top:6px; color:var(--accent); font-variant-numeric:tabular-nums}
.fnrow .fnedit textarea{min-height:64px; resize:vertical}
.fnrow .fnedit button{grid-column:2; justify-self:start}
.fnrow .fnmove{grid-column:1; margin-top:0}
.fnrow .fnmove textarea{min-height:38px}
.fnrow > form:last-child{grid-column:2}
.editorside .sidescroll{max-height:62vh}
.panel-title.fnhead{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}

/* ── تظليلُ نتائج البحث بالأصفر (في قائمة النتائج وفي المقالة) ─────────── */
:root{ --find-bg:#FFE45C; --find-line:#E0B400; --find-cur:#FFB020; --find-ink:inherit; }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --find-bg:#6E5A08; --find-line:#C9A227; --find-cur:#9C6A00; --find-ink:#FFF6CC;
}}
:root[data-theme="dark"]{ --find-bg:#6E5A08; --find-line:#C9A227; --find-cur:#9C6A00; --find-ink:#FFF6CC; }
mark.find{background:var(--find-bg); color:var(--find-ink); border-radius:3px; padding:0 2px;
  box-shadow:inset 0 -2px 0 var(--find-line); font-weight:inherit;
  box-decoration-break:clone; -webkit-box-decoration-break:clone}
.hit b mark.find, .hit p mark.find{font-weight:700}
mark.find.cur{background:var(--find-cur); box-shadow:0 0 0 2px var(--find-line)}
.hitcount{color:var(--accent-2); font-weight:700}

.findbar{
  position:fixed; z-index:70; inset-inline-start:50%; transform:translateX(50%);
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; gap:6px; padding:7px 8px 7px 14px;
  background:var(--surface); border:1px solid var(--find-line); border-radius:999px; box-shadow:var(--sh-2);
  font-size:13px; max-width:calc(100vw - 32px)
}
.findbar .fb-q{font-weight:700; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.findbar .fb-n{color:var(--ink-3); font-variant-numeric:tabular-nums; margin-inline:4px}
.findbar button{width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2);
  cursor:pointer; font-size:14px; color:var(--ink)}
.findbar button:hover{border-color:var(--find-line); background:var(--find-bg)}
@media (max-width:620px){ .findbar{bottom:calc(76px + env(safe-area-inset-bottom,0px))} }
.hit .hit-note{display:block; margin-top:6px; padding:6px 10px; border-inline-start:3px solid var(--gold);
  background:var(--gold-soft); border-radius:0 8px 8px 0; font-size:13.5px; color:var(--ink-2); line-height:1.9}
.hit .hit-note i{font-style:normal; font-weight:700; color:var(--gold); margin-inline-end:4px}
.hit .hit-note.more{background:transparent; border-inline-start-color:var(--line-2); color:var(--ink-3); font-size:12.5px}
.synline{margin:-4px 0 14px; padding:9px 14px; border-radius:12px; background:var(--accent-soft);
  font-size:13.5px; color:var(--ink-2); line-height:1.9}
.synline b{color:var(--accent-2)}
.synline a{margin-inline-start:8px; font-weight:600}
.synline.off{background:var(--surface-2)}

/* ── قاموس المرادفات في اللوحة ── */
.synhelp{font-size:13.5px; line-height:1.9; margin-bottom:16px}
.synhelp p{margin:0 0 6px}
.synhelp ul{margin:0; padding-inline-start:20px; display:grid; gap:4px}
.synchip{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; margin:2px 0; border-radius:999px;
  background:var(--accent-soft); border:1px solid var(--line); font-size:13px; white-space:nowrap}
.synchip i{font-style:normal; font-size:11px; color:var(--ink-3)}
.synchip.from{background:transparent; border-style:dashed}
.synchip.zero{opacity:.55; text-decoration:line-through}
.syntable td.synterms{line-height:2.1}
.syntable tr.off{opacity:.55}
.syntable .acts{white-space:nowrap}
.syntable .acts{display:flex; gap:6px; flex-wrap:wrap}
.syntry{display:flex; gap:8px}
.syntry input{flex:1; min-width:0; padding:9px 12px; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:var(--surface); color:inherit}
.syntry-out{display:grid; gap:6px; padding:10px 12px; border-radius:10px; background:var(--surface-2)}
.syntry-row{line-height:2}
.syndead{display:flex; flex-wrap:wrap; gap:6px}
.syndead a{padding:3px 10px; border-radius:999px; border:1px solid var(--line); font-size:13px; text-decoration:none}
.syndead a i{font-style:normal; font-size:11px; color:var(--ink-3)}
.stalebox p{margin:6px 0 8px; color:var(--ink-2)}
.stalebox summary{cursor:pointer; font-weight:600}
.stalebox .staletext{width:100%; margin-top:8px; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px;
  font-family:var(--serif); font-size:15px; line-height:1.9; background:var(--surface); color:var(--ink); resize:vertical}

/* ── ترتيبُ الشجرة في اللوحة: مقبضُ السحب و▲▼ والنوع ── */
.treehint{font-size:13px; margin:0 0 10px}
.treetable .mover{display:inline-flex; align-items:center; gap:2px; margin-inline-end:8px; vertical-align:middle}
.treetable .dnd{display:none; cursor:grab; touch-action:none; user-select:none; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-3); border-radius:7px; width:26px; height:26px; font-size:15px; line-height:1; padding:0}
.treetable .dnd:hover,.treetable .dnd:focus-visible{color:var(--accent); border-color:var(--accent); outline:none}
.treetable.dnd-on .dnd{display:inline-grid; place-items:center}
.treetable .stepform{display:inline-flex; gap:1px}
.treetable .stepform button{border:0; background:none; color:var(--ink-3); cursor:pointer; font-size:10px; padding:2px 3px; line-height:1}
.treetable .stepform button:hover{color:var(--accent)}
.treetable.dnd-on .stepform{opacity:.55}
.treetable tr.dnd-drag td{background:var(--accent-soft) !important}
.treetable tr.dnd-drag .dnd{cursor:grabbing; color:var(--accent); border-color:var(--accent)}
.treetable tr.dnd-saved td{animation:dndsaved 1.4s ease}
@keyframes dndsaved{from{background:var(--accent-soft)}to{background:transparent}}
body.dnd-active{cursor:grabbing; user-select:none}
.kindform select{padding:5px 8px; font-size:13px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-family:inherit}
.dndtoast{position:fixed; inset-inline-start:50%; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); transform:translate(50%, 20px);
  background:var(--ink); color:var(--paper); padding:9px 16px; border-radius:10px; font-size:13.5px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:90; box-shadow:0 8px 24px rgba(0,0,0,.2)}
[dir="rtl"] .dndtoast{transform:translate(50%, 20px)}
.dndtoast.on{opacity:1; transform:translate(50%, 0)}
.dndtoast.bad{background:var(--bad)}

/* ── عباراتُ الثناء في شريط المحرِّر ── */
.edtools-3{align-items:center; padding:7px 9px; margin:0 0 6px; border:1px dashed var(--line); border-radius:10px}
.edtools .hon-glyph,.edtools .hon-word{height:32px; display:inline-flex; align-items:center; justify-content:center}
.edtools .hon-glyph{font-family:var(--serif); font-size:20px; line-height:1; min-width:36px; padding:0 8px}
.edtools .hon-glyph[data-insert="﷽"]{font-size:13px}
.edtools .hon-word{font-family:var(--serif); font-size:14px; padding:0 9px}

/* بلاغاتُ القرّاء في اللوحة */
.reports{display:grid; gap:12px}
.report{padding:14px 16px}
.report.is-new{border-inline-start:3px solid var(--warn)}
.rp-head{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:14px}
.rp-art{font-size:13.5px; margin-top:6px}
.rp-quote{margin:10px 0 0; padding:8px 12px; border-inline-start:3px solid var(--line-2, var(--line)); background:var(--surface-2); border-radius:0 8px 8px 0; font-size:14px}
.rp-body{margin:10px 0 0; font-size:14.5px; line-height:1.9}
.rp-contact,.rp-done{margin:8px 0 0; font-size:13px}
.rp-acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.rp-acts input{padding:6px 10px; border:1px solid var(--line); border-radius:8px; min-width:220px; background:var(--surface)}
.rp-bulk{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 14px; margin-bottom:12px}
.rp-all{display:flex; gap:6px; align-items:center; font-size:13px; color:var(--ink-2); margin-inline-end:auto}
.rp-head input[type=checkbox]{width:16px; height:16px}

/* مساراتُ التعلّم */
.pathgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.pathcard{display:flex; flex-direction:column; gap:8px; padding:20px; color:var(--ink); text-decoration:none}
.pathcard:hover{border-color:var(--accent); text-decoration:none}
.pathcard h3{margin:0; font-size:19px}
.pathcard p{margin:0; color:var(--ink-2); font-size:14px; line-height:1.8}
.pc-kicker{font-size:12px; font-weight:700; color:var(--accent)}
.pc-meta{display:flex; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3)}
.pc-mine{font-size:13px; font-weight:600; color:var(--accent-2)}
.draftmark{color:var(--warn)}
.pathhead{margin:6px 0 16px}
.pathhead .kicker{font-size:12.5px; font-weight:700; color:var(--accent)}
.pathhead h1{margin:4px 0 8px}
.pathhead p{color:var(--ink-2); margin:0}
.pathsum,.joinbox{padding:18px 20px; margin-bottom:16px; display:grid; gap:10px}
.joinbox input,.joinbox label{display:grid; gap:5px; font-size:14px}
.joinbox input{font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink)}
.joinbox .btn{justify-self:start}
.joinbox .rules{font-size:13px}
.ps-top{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px}
.ps-pct{font-size:28px; color:var(--accent-2)}
.bc-bar.big{height:10px}
.ps-next,.ps-done{margin:0; font-size:15px}
.ps-done{display:flex; gap:12px; align-items:center; flex-wrap:wrap; color:var(--accent-2); font-weight:600}
.stages{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.stagebox{padding:14px 16px}
.stagebox.complete{border-color:var(--accent)}
.stagebox.current{border-color:var(--gold, var(--warn)); box-shadow:0 0 0 2px var(--warn-soft)}
.stagebox.locked{opacity:.78}
.sb-head{display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:start}
.sb-head b{font-size:16.5px}
.sb-head p{margin:2px 0 0; font-size:13.5px}
.sb-n{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:var(--surface-2); color:var(--ink-2)}
.stagebox.complete .sb-n{background:var(--accent); color:#fff}
.stagebox.current .sb-n{background:var(--warn-soft); color:var(--warn)}
.sb-count{font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.sb-lock{margin:8px 0 0; font-size:13px}
.pitems{list-style:none; margin:10px 0 0; padding:0; display:grid}
.pi{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line); font-size:14px}
.pi a{display:flex; gap:8px; align-items:center; color:var(--ink); min-width:0}
.pi a span{overflow-wrap:anywhere}
.pi.done a{color:var(--ink-3)}
.pi.quiz a{font-weight:600}
.pi.link a{color:var(--accent)}
.pi-st{font-size:12px; white-space:nowrap; color:var(--ink-3)}
.pi-st.ok{color:var(--good, var(--accent-2)); font-weight:600}
.pi-st.part{color:var(--warn)}
.pi-st.bad{color:var(--bad)}
.numform{display:grid; gap:12px; margin-bottom:10px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.numform-head{display:flex; gap:8px; align-items:center; font-weight:700; font-size:15px}
.nf-row{display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:center; font-size:14px; color:var(--ink-2)}
.nf-row input,.joinbox input{width:100%; font:inherit; font-size:16px; padding:11px 14px; border:1px solid var(--line-2); border-radius:10px;
  background:var(--paper); color:var(--ink); letter-spacing:.04em}
.nf-row input::placeholder,.joinbox input::placeholder{color:var(--ink-3); letter-spacing:0; font-size:14px}
.numform .btn{justify-self:start; padding-inline:28px}
@media (max-width:520px){ .nf-row{grid-template-columns:1fr; gap:5px} }

/* اللوحة: المساراتُ والطلاب */
.lpill{display:inline-block; font-size:12px; padding:2px 10px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); white-space:nowrap}
.lpill.ok{background:var(--accent-soft); color:var(--accent-2)}
.lpill.warn{background:var(--warn-soft); color:var(--warn)}
.lpill.bad{background:var(--bad-soft); color:var(--bad)}
.lbar{display:inline-block; vertical-align:middle; width:80px; height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden}
.lbar i{display:block; height:100%; background:var(--accent)}
.lfunnel{display:grid; gap:8px}
.lfunnel div{display:grid; grid-template-columns:minmax(140px,280px) 1fr 60px; gap:12px; align-items:center; font-size:13.5px}
.lfunnel .track{height:16px; background:var(--surface-2); border-radius:6px; overflow:hidden}
.lfunnel .track i{display:block; height:100%; background:var(--accent)}
.lfunnel b{text-align:left; font-variant-numeric:tabular-nums}
.lp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px}
.lp-stage{margin-top:14px; padding:14px 16px}
.lp-stage-head{display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center}
.lp-stage-form{display:flex; gap:8px; flex-wrap:wrap}
.lp-stage-form input{flex:1; min-width:180px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
.lp-stage-head .acts{display:flex; gap:4px; align-items:center}
.lp-items{margin-top:10px}
.lp-items td{padding:7px 10px}
.lp-items .acts{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.lp-add{margin-top:10px}
.lp-add>summary{cursor:pointer; color:var(--accent); font-weight:600; font-size:14px}
.lp-addgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; margin-top:10px}
.lp-addgrid form{display:grid; gap:7px; padding:12px}
.lp-addgrid p{margin:0; font-size:12.5px}
.lp-addgrid select,.lp-addgrid input,.lp-addgrid textarea{width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font:inherit; font-size:13.5px}
.lp-addgrid .btn{justify-self:start}
.lp-sd{border-top:1px solid var(--line); padding:8px 0}
.lp-sd>summary{cursor:pointer; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.lp-list{margin:8px 0 0; padding-inline-start:18px; font-size:13.5px; line-height:2}
.lp-list li.done{color:var(--ink-3)}
.lp-stage-pub{display:flex; gap:10px; align-items:center; margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed var(--line)}
.lp-stage.is-draft{border-inline-start:3px solid var(--warn)}
.lp-stage.is-pub{border-inline-start:3px solid var(--accent)}
.stagebox.is-draft{border-style:dashed}
.draftnote{font-size:12px; font-weight:700; color:var(--warn)}

/* أسئلةُ التعلّم: في آخر المقالة، واختبارُ المرحلة */
.lqbox{margin:28px 0 0; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.lqbox h2{display:flex; gap:8px; align-items:center; font-size:18px; margin:0 0 6px}
.lq-note{font-size:13px; margin:0 0 6px}
.lq-list{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.lq-item{padding-top:12px; border-top:1px solid var(--line)}
.lq-list > .lq-item:first-child{border-top:0; padding-top:4px}
.lq-text{margin:0 0 8px; font-weight:600; line-height:1.9}
.lq-form,.lq-again{display:grid; gap:6px}
.lq-opt{display:flex; gap:8px; align-items:flex-start; padding:7px 10px; border:1px solid var(--line); border-radius:9px; cursor:pointer; background:var(--paper); font-size:14.5px}
.lq-opt:hover{border-color:var(--accent)}
.lq-opt input{margin-top:6px}
.lq-form .btn,.lq-again .btn,.stageform > .btn{justify-self:start; margin-top:4px}
.lq-opts{list-style:none; margin:0; padding:0; display:grid; gap:5px; font-size:14.5px}
.lq-opts li{padding:6px 10px; border-radius:8px; background:var(--paper)}
.lq-opts li.right{background:var(--accent-soft); color:var(--accent-2); font-weight:600}
.lq-opts li.wrong{background:var(--bad-soft); color:var(--bad)}
.lq-res{margin:8px 0 0; font-size:14px; line-height:1.9}
.lq-res.ok{color:var(--accent-2)} .lq-res.bad{color:var(--ink-2)}
.lq-list.test{margin-top:14px}
.stageform{display:grid; gap:10px}
.pathsum.pass{border-color:var(--accent)} .pathsum.fail{border-color:var(--warn)}
.pi.stagetest{background:var(--accent-soft); border-radius:8px; padding-inline:8px; margin-top:4px}
/* اللوحة */
.lq-editor{margin-top:16px}
.lq-q{border-top:1px solid var(--line); padding:8px 0}
.lq-q > summary{cursor:pointer; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:14px}
.lq-q.is-draft{opacity:.85}
.lq-stat{font-size:12px; color:var(--ink-3)}
.lq-edit{display:grid; gap:8px; margin-top:8px}
.lq-edit textarea,.lq-edit input,.lq-edit select{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px}
.lq-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px}
.lq-acts{display:flex; gap:6px; flex-wrap:wrap}
.lq-add{margin-top:10px} .lq-add > summary{cursor:pointer; color:var(--accent); font-weight:600}
.lp-qsum{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-size:13.5px}
.lq-marks{display:inline-flex; gap:2px; margin-inline-start:6px}
.lq-marks i{font-style:normal; font-size:11px; width:18px; height:18px; border-radius:50%; display:inline-grid; place-items:center; background:var(--surface-2); color:var(--ink-3)}
.lq-marks i.ok{background:var(--accent-soft); color:var(--accent-2)} .lq-marks i.bad{background:var(--bad-soft); color:var(--bad)}
.lq-quick{display:inline-flex; margin-inline-start:4px}

/* اختبارُ المرحلة: الساعة، والتعهّد، والنتيجةُ بلا كشف الإجابة */
.testclock{position:sticky; top:calc(env(safe-area-inset-top, 0px) + 8px); z-index:5; justify-self:start; padding:6px 14px; border:1px solid var(--line); border-radius:999px; background:var(--paper); font-size:14.5px; box-shadow:0 2px 10px rgba(0,0,0,.06)}
.testclock b{font-variant-numeric:tabular-nums; font-size:16px}
.stageform.ending .testclock{border-color:var(--bad); color:var(--bad)}
.testrules ul{margin:0; padding-inline-start:1.2em; display:grid; gap:6px; line-height:1.9}
.pledge{padding:16px 18px; display:grid; gap:12px}
.pledge .btn{justify-self:start}
.lq-list.results .lq-item.is-bad{border-inline-start:3px solid var(--bad)}
.lq-list.results .lq-item.is-ok{border-inline-start:3px solid var(--accent)}
.lq-mark{margin:6px 0 0; font-size:14px; font-weight:600}
.lq-mark.ok{color:var(--accent-2)}
.lq-mark.bad{color:var(--bad)}

/* تفصيلُ النتيجة بإذن المشرف، والإجاباتُ الخاطئة في ملفّ الطالب */
.lq-mine{margin:6px 0 0; font-size:14px; color:var(--ink-2)}
.reveal-box{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; padding:12px 16px; margin:12px 0}
.lp-wrong{margin-top:10px}
.lp-wrong summary{cursor:pointer; font-weight:600; font-size:14px}
.lp-wrong-att{margin-top:8px}
.lp-wrong ol{list-style:arabic-indic; margin:6px 0 0; padding-inline-start:1.4em; display:grid; gap:8px; font-size:14px}
.lp-wrong li p{margin:0}
.lp-wrong .bad{color:var(--bad)}
.lp-wrong .ok{color:var(--accent-2)}

/* بريدُ الرقم الأكاديميّ في قائمة الأرقام */
.emailform{display:flex; gap:6px; align-items:center}
.emailform input{width:min(220px,46vw); padding:4px 8px; font-size:13px}

/* زرُّ «من هنا ابدأ - المسارات»: للجوّال وحده، سطرٌ كاملٌ تحت مُبدِّل الأقسام */
.startpaths{display:none}
@media (max-width:860px){
  .startpaths{order:4; flex:1 0 100%; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 14px; border-radius:12px; background:var(--accent); color:var(--paper); font-weight:700; font-size:14.5px;
    text-decoration:none; box-shadow:var(--sh-1)}
  .startpaths:hover{text-decoration:none; filter:brightness(1.06)}
  .startpaths svg{width:18px; height:18px}
  .startpaths.on{background:var(--accent-2)}
}

/* ── متابعةُ المنقطع ─────────────────────────────────────────────────────── */
/* بطاقةُ «أكمل من حيث توقّفت» في صفحة المسار */
.pathresume{display:grid; gap:8px; padding-top:12px; border-top:1px solid var(--line)}
.pathresume .rs-back{margin:0; font-weight:600; color:var(--gold)}
.pathresume .rs-stage{font-size:15.5px}
.pathresume .rs-left{margin:0; font-size:14px; color:var(--ink-2)}
.pathresume .rs-go{justify-self:start; max-width:100%; white-space:normal; text-align:start}
.rs-wird{display:grid; gap:6px; font-size:14px; color:var(--ink-2)}
.rs-wird .ok{color:var(--accent-2); font-weight:600}
.rs-wird .bad{color:var(--bad); font-weight:600}
.rs-change summary{cursor:pointer; color:var(--accent); font-size:13.5px}
.rs-wirdform{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.chip{padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-2); font-weight:700}
.rs-push{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px}
/* الوِردُ في نموذج الالتحاق */
.wirdpick{border:1px solid var(--line); border-radius:12px; padding:8px 12px; display:flex; flex-wrap:wrap; gap:6px 16px; margin:0}
.wirdpick legend{padding-inline:6px; font-size:14px}
.wirdpick label{display:flex; align-items:center; gap:6px; font-size:14px}
/* بطاقةُ المسار في الرئيسة */
.pathcard-wrap{padding-top:14px}
/* اللوحة: قائمةُ المتابعة وخانةُ التذكير */
.followup{margin-bottom:14px; border-inline-start:3px solid var(--gold)}
.followup .panel-title{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between}
.remindcell{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.remindcell .tmeta{flex-basis:100%}
.remindmsg summary{cursor:pointer; font-size:12.5px; color:var(--accent)}
.remindmsg textarea{width:min(420px,80vw); font:inherit; font-size:13px; margin-top:6px}
.tplpreview{white-space:pre-wrap; font-family:inherit; font-size:15px; line-height:1.9; margin:0; padding:12px 14px; background:var(--surface-2); border-radius:10px}