/* ===== maurinote · هوية التطبيق على الموقع =====
   نفس رموز التطبيق (theme/colors.js و theme/tokens.js): خلفية رمادية فاتحة
   وبطاقات بيضاء فوقها، أخضر #00b775، الأخضر الغابي لبطاقات البث، وفي الداكن
   الكحلي بدل الأسود. يُحمَّل بعد <style> الصفحة، فيغلب ما قبله. */

:root{
  --canvas:#eef2f0; --surface:#ffffff; --surface-alt:#f0f3f2;
  --hairline:#dde3e0; --hairline-soft:#f0f3f2;
  --ink:#16201d; --ink-2:#46514d; --ink-3:#75807b;
  --g:#00b775; --g-deep:#019866; --on-g:#ffffff;
  --g-soft:#e7f7f0; --g-soft2:#dcf4ea; --g-soft3:#c9ecdd; --g-line:#bfe9d8;
  --forest:#0f4d37;
  --amber:#d97706; --amber-soft:#fef3e2; --amber-soft2:#fdeeda; --amber-line:#f6dcb0;
  --red:#dc2626; --red-soft:#fdecec; --red-line:#f6c9c9; --live:#e11d2e;
  --blue:#2563eb; --blue-soft:#eaf1fe; --blue-soft2:#d8e6fd;
  --violet:#7c3aed; --violet-soft:#f2ecfe; --violet-soft2:#e9defb;
  --glass:rgba(238,242,240,.82);
  --sh-card:0 6px 14px rgba(11,31,24,.05);
  --sh-raised:0 10px 22px rgba(11,31,24,.10);
  --sh-bar:0 -3px 12px rgba(11,31,24,.06);

  /* أسماء الموقع القديمة: تستعملها بطاقات المواد ونافذة التسجيل كما هي */
  --bg:var(--canvas); --bg-tint:var(--surface-alt);
  --panel:var(--surface); --panel-2:#fafbfb;
  --line:#dfe3e2; --line-2:#c5cdcb;
  --green:#00b775; --green-deep:#019866; --green-soft:#e7f7f0; --green-line:#bfe9d8;

  --maxw:1200px; --gut:24px;
}
[data-theme="dark"]{
  --canvas:#0b1b2d; --surface:#13263d; --surface-alt:#1a2f4a;
  --hairline:#22395a; --hairline-soft:#1a2f4a;
  --ink:#e8eef5; --ink-2:#a3b2c4; --ink-3:#6f8299;
  --g:#4ade80; --g-deep:#6ce598; --on-g:#0e1f33;
  --g-soft:#123b33; --g-soft2:#16443a; --g-soft3:#1b5043; --g-line:#2a6b55;
  --amber:#f0a742; --amber-soft:#33260f; --amber-soft2:#3d2c11; --amber-line:#5e4719;
  --red:#f2635e; --red-soft:#3a1a1a; --red-line:#5e2a2a;
  --blue:#5b9bff; --blue-soft:#1a3360; --blue-soft2:#21407a;
  --violet:#a98bff; --violet-soft:#2a2250; --violet-soft2:#362c63;
  --glass:rgba(11,27,45,.86);
  --sh-card:0 6px 14px rgba(0,0,0,.18);
  --sh-raised:0 12px 26px rgba(0,0,0,.32);
  --sh-bar:0 -3px 12px rgba(0,0,0,.25);

  --panel-2:#112238; --line:#2a4262; --line-2:#3a5578;
  --green:#1fcb8d; --green-deep:#19b67e; --green-soft:#123b33; --green-line:#2a6b55;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:clip}
body{font-family:'Rubik',system-ui,sans-serif;background:var(--canvas);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;font-feature-settings:"lnum";overflow-x:clip;transition:background .3s,color .3s}
::selection{background:var(--g);color:var(--on-g)}
a{color:inherit}
img{max-width:100%}
.wrap{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.ic{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic-fill{fill:currentColor;stroke:none}
.ltr{direction:ltr;unicode-bidi:isolate}
@media(max-width:560px){:root{--gut:18px}}

/* ========== الرأس وشريط التبويب: أنماطهما في /components.js ========== */
.wm.wm-dark{display:none}
[data-theme="dark"] .wm.wm-light{display:none}
[data-theme="dark"] .wm.wm-dark{display:block}

/* ========== عناوين الأقسام (SectionHeader) ========== */
.sec{padding:36px 0}
.sh{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.sh h2{display:flex;align-items:center;gap:10px;font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:800;line-height:1.5;color:var(--ink)}
.sh h2 .ic{font-size:.9em;stroke-width:1.6}
.sh p{font-size:.92rem;color:var(--ink-2);margin-top:2px}
.sh-more{display:inline-flex;align-items:center;gap:4px;font-size:.9rem;font-weight:600;color:var(--g-deep);text-decoration:none;white-space:nowrap}
.sh-more .ic{font-size:15px}
html[dir="ltr"] .sh-more .ic,html[dir="ltr"] .row-go{transform:scaleX(-1)}

/* ========== أزرار ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:12px;font-family:inherit;font-size:.95rem;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .15s,opacity .15s,border-color .15s;white-space:nowrap}
.btn .ic{font-size:19px;stroke-width:1.7}
.btn:active{transform:scale(.97)}
.btn-g{background:var(--g);color:var(--on-g)}
.btn-g:hover{opacity:.92}
.btn-w{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-w:hover{border-color:var(--line-2)}

/* ========== صفّ بطاقة (StudyGroups / القوائم) ========== */
.rows{display:grid;gap:14px}
.row{position:relative;display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--hairline);border-radius:22px;padding:16px 18px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .2s,border-color .2s}
.row:hover{box-shadow:var(--sh-card);border-color:var(--line)}
.row:active{transform:scale(.985)}
.row-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex-shrink:0;background:var(--g-soft2);color:var(--g-deep)}
.row-ic .ic{font-size:24px;stroke-width:1.6}
.row-tx{flex:1;min-width:0}
.row-t,.row-d{display:block}
.row-t{font-size:1rem;font-weight:600;line-height:1.5;color:var(--ink)}
.row-d{font-size:.84rem;color:var(--ink-2);line-height:1.6;margin-top:2px}
.row-go{font-size:17px;color:var(--ink-3);stroke-width:1.9}

/* ========== الأخضر الغابي بخطوط الدفتر (بطاقة البث في التطبيق) ========== */
.forest{position:relative;background-color:var(--forest);background-image:repeating-linear-gradient(180deg,transparent 0 23px,rgba(255,255,255,.07) 23px 24px);color:#fff;overflow:hidden}
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;font-size:.82rem;font-weight:600;line-height:1;white-space:nowrap}
.pill i{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.pill-g{background:var(--g-soft);color:var(--g-deep)}
.pill-w{background:#fff;color:#16201d}
.pill-w i{background:var(--live)}
.pill-glass{background:rgba(255,255,255,.12);color:#fff}

/* ========== التذييل ========== */
footer.af{margin:56px 0 0;padding:0;border:0;background:var(--surface);border-top:1px solid var(--hairline);position:relative;z-index:1}
.af-in{max-width:var(--maxw);margin:0 auto;padding:44px var(--gut) 8px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.af-brand .wm{height:28px;width:auto}
.af-brand p{margin-top:14px;font-size:.88rem;color:var(--ink-2);line-height:1.8;max-width:330px}
.af-soc{display:flex;gap:8px;margin-top:18px}
.af-soc a{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:var(--surface-alt);color:var(--ink-2);transition:color .2s,background .2s}
.af-soc a:hover{color:var(--g-deep);background:var(--g-soft)}
.af-soc .ic{font-size:18px}
.af h4{font-size:.86rem;font-weight:800;color:var(--ink);margin-bottom:12px}
.af-col a{display:block;font-size:.88rem;color:var(--ink-2);text-decoration:none;padding:5px 0;transition:color .15s}
.af-col a:hover{color:var(--g-deep)}
.af-bottom{max-width:var(--maxw);margin:0 auto;padding:22px var(--gut) 28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem;color:var(--ink-3);border-top:1px solid var(--hairline-soft)}
.af-bottom b{color:var(--ink-2);font-weight:600}
@media(max-width:900px){.af-in{grid-template-columns:1fr 1fr}.af-brand{grid-column:1/-1}}
@media(max-width:560px){.af-in{grid-template-columns:1fr 1fr;gap:26px 18px;padding-top:34px}.af-bottom{justify-content:center;text-align:center}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}