/* ═══════════ حريص — Material 3 ═══════════
   نظام Google Material 3 بتخطيط Classroom، وهويتنا: لازورد بوابة عشتار وذهبها.
   الألوان كلها من @material/material-color-utilities 0.4.0 (SchemeContent، مواصفة 2025، البذرة #1D4E9E،
   والمفتاح الثالثي ذهب #875300): لا دور مكتوب باليد، وكل زوج «لون / on-لون» ≥ 4.5:1.
   المقاسات والخطوط من رموز Google Material 3 v34.0.21 (طبقة المطابقة في آخر الملف).
   الخط Roboto، والعربي Noto Sans Arabic، كما في Google.
   ═══════════════════════════════════════════ */

:root{
  /* ── md.sys.color (مولّد) ── */
  --md-sys-color-primary:#00377e;            --md-sys-color-on-primary:#ffffff;
  --md-sys-color-primary-container:#1d4e9e;  --md-sys-color-on-primary-container:#aac3ff;
  --md-sys-color-inverse-primary:#aec6ff;
  --md-sys-color-primary-fixed:#d8e2ff;      --md-sys-color-on-primary-fixed:#001a43;
  --md-sys-color-secondary:#505e7f;          --md-sys-color-on-secondary:#ffffff;
  --md-sys-color-secondary-container:#c8d7fd; --md-sys-color-on-secondary-container:#4f5d7e;
  /* الثالثي: ذهب عشتار مفتاحاً ثالثياً (#875300) كما يسمح Theme Builder، والأدوار من الخوارزمية نفسها */
  --md-sys-color-tertiary:#553200;           --md-sys-color-on-tertiary:#ffffff;
  --md-sys-color-tertiary-container:#744700; --md-sys-color-on-tertiary-container:#fcb662;
  --md-sys-color-error:#ba1a1a;              --md-sys-color-on-error:#ffffff;
  --md-sys-color-error-container:#ffdad6;    --md-sys-color-on-error-container:#93000a;
  --md-sys-color-background:#faf9ff;         --md-sys-color-on-background:#1a1b21;
  --md-sys-color-surface:#faf9ff;            --md-sys-color-on-surface:#1a1b21;
  --md-sys-color-surface-variant:#dfe2ef;    --md-sys-color-on-surface-variant:#434751;
  --md-sys-color-surface-container-lowest:#ffffff;
  --md-sys-color-surface-container-low:#f3f3fa;
  --md-sys-color-surface-container:#ededf5;
  --md-sys-color-surface-container-high:#e8e7ef;
  --md-sys-color-surface-container-highest:#e2e2e9;
  --md-sys-color-inverse-surface:#2f3036;    --md-sys-color-inverse-on-surface:#f0f0f8;
  --md-sys-color-outline:#737783;            --md-sys-color-outline-variant:#c3c6d3;
  --md-sys-color-scrim:#000000;              --md-sys-color-surface-tint:#2f5cad;
  /* الأدوار الثابتة (fixed): نغمة واحدة في الفاتح والداكن، للتمييز الفاتح على أي سطح. من الخوارزمية نفسها */
  --md-sys-color-primary-fixed-dim:#aec6ff; --md-sys-color-on-primary-fixed-variant:#0a4393;
  --md-sys-color-secondary-fixed:#d8e2ff; --md-sys-color-secondary-fixed-dim:#b8c6ec; --md-sys-color-on-secondary-fixed:#0b1b38; --md-sys-color-on-secondary-fixed-variant:#384666;
  --md-sys-color-tertiary-fixed:#ffddb9; --md-sys-color-tertiary-fixed-dim:#ffb964; --md-sys-color-on-tertiary-fixed:#2b1700; --md-sys-color-on-tertiary-fixed-variant:#663e00;
  --md-sys-color-surface-dim:#d9d9e1; --md-sys-color-surface-bright:#faf9ff; --md-sys-color-shadow:#000000;

  /* بانرات المواد: ثماني درجات بنغمة 40 متناغمة مع اللازورد (نص أبيض ≥ 4.5:1) */
  --harees-lapis:#2f5cad; --harees-palm:#006d43; --harees-terracotta:#a73641; --harees-turquoise:#00677f;
  --harees-date:#8d4d30; --harees-gold:#875300; --harees-indigo:#4656b3; --harees-rose:#963b83;

  /* ── الأسماء القديمة تشير إلى نظام M3 (لا تُعرّف ألواناً جديدة هنا) ── */
  --primary:var(--md-sys-color-primary); --on-primary:var(--md-sys-color-on-primary);
  --primary-container:var(--md-sys-color-primary-fixed); --on-primary-container:var(--md-sys-color-on-primary-fixed);
  --secondary:var(--md-sys-color-tertiary); --on-secondary:var(--md-sys-color-on-tertiary);
  --secondary-container:var(--md-sys-color-tertiary-fixed); --on-secondary-container:var(--md-sys-color-on-tertiary-fixed);
  --tertiary:var(--md-sys-color-tertiary); --tertiary-container:var(--md-sys-color-tertiary-fixed);
  --on-tertiary-container:var(--md-sys-color-on-tertiary-fixed);
  --error:var(--md-sys-color-error); --error-container:var(--md-sys-color-error-container);
  --on-error-container:var(--md-sys-color-on-error-container);
  --surface:var(--md-sys-color-surface-container-lowest);
  --surface-dim:var(--md-sys-color-surface);
  --surface-container:var(--md-sys-color-surface-container);
  --surface-container-high:var(--md-sys-color-surface-container-high);
  --on-surface:var(--md-sys-color-on-surface); --on-surface-variant:var(--md-sys-color-on-surface-variant);
  --outline:var(--md-sys-color-outline-variant); --outline-variant:var(--md-sys-color-surface-container-high);
  --focus:var(--md-sys-color-primary-container);
  --sun:var(--md-sys-color-tertiary); --sun-soft:var(--md-sys-color-tertiary-fixed);
  --dusk:var(--md-sys-color-error); --frost:var(--md-sys-color-primary-fixed); --winter:var(--md-sys-color-primary-container);
  --dusk-gradient:linear-gradient(135deg,var(--md-sys-color-primary-container),var(--harees-indigo));

  /* ── md.sys.typescale (بخط Plex العربي) ── */
  --md-ref-typeface-brand:Roboto,"Noto Sans Arabic",system-ui,sans-serif;
  --md-ref-typeface-plain:Roboto,"Noto Sans Arabic",system-ui,sans-serif;

  /* ── md.sys.shape ── */
  --md-sys-shape-xs:4px; --md-sys-shape-sm:8px; --md-sys-shape-md:12px; --md-sys-shape-lg:16px; --md-sys-shape-xl:28px;

  /* ── طبقات الحالة ── */
  --state-hover:.08;
  --state-focus:.1;
  --state-press:.1;

  /* ── الشكل ── */
  --r-xs:var(--md-sys-shape-xs); --r-sm:var(--md-sys-shape-sm); --r-md:var(--md-sys-shape-md);
  --r-lg:var(--md-sys-shape-lg); --r-xl:var(--md-sys-shape-xl); --r-full:999px;

  /* ── الارتفاع ── */
  /* md.sys.elevation 1-3 كما في المواصفة */
  --e1:0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --e2:0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --e3:0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);

  /* ── الإيقاع ── */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px;
  --wrap:1200px;

  /* ── الحركة: منحنيات MD3 ── */
  --emph:cubic-bezier(.2,0,0,1);
  --emph-dec:cubic-bezier(.05,.7,.1,1);
  --standard:cubic-bezier(.2,0,0,1);
  --d-short:.15s; --d-med:.3s; --d-long:.5s;

  --ff:var(--md-ref-typeface-plain);
  --ff-read:var(--ff);
  --ff-en:Roboto,system-ui,sans-serif;
  color-scheme:light;
}

/* ═══ الوضع الداكن: الخطة نفسها (SchemeContent، مواصفة 2025، البذرة #1D4E9E، المفتاح الثالثي #875300) بـ isDark.
   يتبع الجهاز، إلا إن اختار الطالب «فاتح» أو «داكن» من القائمة (html[data-theme]، يضعه theme.js قبل أول رسم). ═══ */
:root[data-theme="dark"]{
  --md-sys-color-primary:#aec6ff;
  --md-sys-color-on-primary:#002e6b;
  --md-sys-color-primary-container:#1d4e9e;
  --md-sys-color-on-primary-container:#aac3ff;
  --md-sys-color-inverse-primary:#2f5cad;
  --md-sys-color-primary-fixed:#d8e2ff;
  --md-sys-color-primary-fixed-dim:#aec6ff;
  --md-sys-color-on-primary-fixed:#001a43;
  --md-sys-color-on-primary-fixed-variant:#0a4393;
  --md-sys-color-secondary:#b8c6ec;
  --md-sys-color-on-secondary:#21304e;
  --md-sys-color-secondary-container:#384666;
  --md-sys-color-on-secondary-container:#a6b5da;
  --md-sys-color-secondary-fixed:#d8e2ff;
  --md-sys-color-secondary-fixed-dim:#b8c6ec;
  --md-sys-color-on-secondary-fixed:#0b1b38;
  --md-sys-color-on-secondary-fixed-variant:#384666;
  --md-sys-color-tertiary:#ffb964;
  --md-sys-color-on-tertiary:#472a00;
  --md-sys-color-tertiary-container:#744700;
  --md-sys-color-on-tertiary-container:#fcb662;
  --md-sys-color-tertiary-fixed:#ffddb9;
  --md-sys-color-tertiary-fixed-dim:#ffb964;
  --md-sys-color-on-tertiary-fixed:#2b1700;
  --md-sys-color-on-tertiary-fixed-variant:#663e00;
  --md-sys-color-error:#ffb4ab;
  --md-sys-color-on-error:#690005;
  --md-sys-color-error-container:#93000a;
  --md-sys-color-on-error-container:#ffdad6;
  --md-sys-color-background:#111318;
  --md-sys-color-on-background:#e2e2e9;
  --md-sys-color-surface:#111318;
  --md-sys-color-on-surface:#e2e2e9;
  --md-sys-color-surface-variant:#434751;
  --md-sys-color-on-surface-variant:#c3c6d3;
  --md-sys-color-surface-container-lowest:#0c0e13;
  --md-sys-color-surface-container-low:#1a1b21;
  --md-sys-color-surface-container:#1e1f25;
  --md-sys-color-surface-container-high:#282a2f;
  --md-sys-color-surface-container-highest:#33353a;
  --md-sys-color-surface-dim:#111318;
  --md-sys-color-surface-bright:#37393f;
  --md-sys-color-inverse-surface:#e2e2e9;
  --md-sys-color-inverse-on-surface:#2f3036;
  --md-sys-color-outline:#8d909d;
  --md-sys-color-outline-variant:#434751;
  --md-sys-color-scrim:#000000;
  --md-sys-color-shadow:#000000;
  --md-sys-color-surface-tint:#aec6ff;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --md-sys-color-primary:#aec6ff;
  --md-sys-color-on-primary:#002e6b;
  --md-sys-color-primary-container:#1d4e9e;
  --md-sys-color-on-primary-container:#aac3ff;
  --md-sys-color-inverse-primary:#2f5cad;
  --md-sys-color-primary-fixed:#d8e2ff;
  --md-sys-color-primary-fixed-dim:#aec6ff;
  --md-sys-color-on-primary-fixed:#001a43;
  --md-sys-color-on-primary-fixed-variant:#0a4393;
  --md-sys-color-secondary:#b8c6ec;
  --md-sys-color-on-secondary:#21304e;
  --md-sys-color-secondary-container:#384666;
  --md-sys-color-on-secondary-container:#a6b5da;
  --md-sys-color-secondary-fixed:#d8e2ff;
  --md-sys-color-secondary-fixed-dim:#b8c6ec;
  --md-sys-color-on-secondary-fixed:#0b1b38;
  --md-sys-color-on-secondary-fixed-variant:#384666;
  --md-sys-color-tertiary:#ffb964;
  --md-sys-color-on-tertiary:#472a00;
  --md-sys-color-tertiary-container:#744700;
  --md-sys-color-on-tertiary-container:#fcb662;
  --md-sys-color-tertiary-fixed:#ffddb9;
  --md-sys-color-tertiary-fixed-dim:#ffb964;
  --md-sys-color-on-tertiary-fixed:#2b1700;
  --md-sys-color-on-tertiary-fixed-variant:#663e00;
  --md-sys-color-error:#ffb4ab;
  --md-sys-color-on-error:#690005;
  --md-sys-color-error-container:#93000a;
  --md-sys-color-on-error-container:#ffdad6;
  --md-sys-color-background:#111318;
  --md-sys-color-on-background:#e2e2e9;
  --md-sys-color-surface:#111318;
  --md-sys-color-on-surface:#e2e2e9;
  --md-sys-color-surface-variant:#434751;
  --md-sys-color-on-surface-variant:#c3c6d3;
  --md-sys-color-surface-container-lowest:#0c0e13;
  --md-sys-color-surface-container-low:#1a1b21;
  --md-sys-color-surface-container:#1e1f25;
  --md-sys-color-surface-container-high:#282a2f;
  --md-sys-color-surface-container-highest:#33353a;
  --md-sys-color-surface-dim:#111318;
  --md-sys-color-surface-bright:#37393f;
  --md-sys-color-inverse-surface:#e2e2e9;
  --md-sys-color-inverse-on-surface:#2f3036;
  --md-sys-color-outline:#8d909d;
  --md-sys-color-outline-variant:#434751;
  --md-sys-color-scrim:#000000;
  --md-sys-color-shadow:#000000;
  --md-sys-color-surface-tint:#aec6ff;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
[hidden]{display:none !important}   /* خاصية hidden تغلب أي display في المكوّنات */
:where(a,button,input,select,summary,label){touch-action:manipulation; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--surface-dim); color:var(--on-surface);
  font-family:var(--ff); font-size:16px; font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-height:100dvh;
}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s3)}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs); scroll-margin-top:140px}
.muted{color:var(--on-surface-variant)} .sm{font-size:.875rem}
.num{font-variant-numeric:tabular-nums}

/* ── سلّم الطباعة (MD3) ── */
h1{font-size:clamp(1.75rem,3.4vw,2.25rem); line-height:1.25; font-weight:600; letter-spacing:-.2px; margin:0 0 var(--s1); text-wrap:balance}
h2{font-size:1.375rem; line-height:1.35; font-weight:500; margin:0 0 var(--s2); letter-spacing:-.1px}
h3{font-size:1rem; font-weight:500; margin:0; line-height:1.4}
.lede{color:var(--on-surface-variant); font-size:1.0625rem; margin:0; text-wrap:pretty; max-width:70ch}
.label{font-size:.75rem; font-weight:500; letter-spacing:.6px; color:var(--on-surface-variant)}

/* ── رابط التخطي ── */
.skip{position:fixed; top:-64px; inset-inline-start:16px; z-index:200; background:var(--primary);
  color:var(--on-primary); padding:12px 20px; border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top var(--d-short) var(--standard)}
.skip:focus-visible{top:0}   /* بلوحة المفاتيح وحدها: لا يظهر فوق العنوان بعد لمسة أو نقرة */

/* ── الفاتحة ── */
.fatiha{position:relative}
.fatiha-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s2);
  padding:12px var(--s3); font-size:.9375rem; font-weight:400; text-align:center; line-height:1.8}
.fatiha .sep{opacity:.45}

/* ── شريط التطبيق ── */
.appbar{position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--outline); transition:box-shadow var(--d-med) var(--standard)}
.appbar.raised{box-shadow:var(--e1); border-bottom-color:transparent}
.appbar-in{display:flex; align-items:center; gap:var(--s3); height:72px}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto; border-radius:var(--r-sm); padding:4px}
.brand-mark{width:42px;height:42px; display:block; border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--e1)}
.brand-mark svg{width:100%;height:100%;display:block;stroke:none}
.brand-text{display:flex; flex-direction:column; line-height:1.2}
.brand-text strong{font-size:1.25rem; font-weight:600; letter-spacing:-.3px}
.brand-text small{color:var(--on-surface-variant); font-size:.6875rem; letter-spacing:.8px}

.search{position:relative; flex:1 1 auto; max-width:560px}
.search svg{position:absolute; inset-inline-start:16px; top:50%; transform:translateY(-50%);
  color:var(--on-surface-variant); width:20px;height:20px; transition:color var(--d-short)}
.search input{width:100%; height:48px; padding-inline:48px 48px; border-radius:var(--r-full);
  border:1px solid transparent; background:var(--surface-container); font-size:.9375rem;
  transition:background var(--d-short), box-shadow var(--d-short), border-color var(--d-short)}
.search input::placeholder{color:var(--on-surface-variant)}
.search input:hover{background:var(--surface-container-high)}
.search input:focus{outline:none; background:var(--surface); border-color:var(--outline); box-shadow:var(--e2)}
.search:focus-within svg{color:var(--primary)}
.search kbd{position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%);
  font-family:var(--ff); font-size:.6875rem; color:var(--on-surface-variant);
  border:1px solid var(--outline); border-radius:6px; padding:1px 7px; background:var(--surface)}
.search:focus-within kbd{opacity:0}

.appbar-nav{display:flex; align-items:center; gap:var(--s1); flex:0 0 auto}
.nav-link{position:relative; padding:9px 14px; border-radius:var(--r-full); font-size:.875rem;
  font-weight:500; color:var(--on-surface-variant); overflow:hidden; isolation:isolate}
.nav-link::before{content:""; position:absolute; inset:0; background:currentColor; opacity:0; z-index:-1;
  transition:opacity var(--d-short)}
.nav-link:hover::before{opacity:var(--state-hover)}
.nav-link[aria-current="page"]{background:var(--primary-container); color:var(--on-primary-container)}

/* ── الأزرار (MD3) ── */
.btn{position:relative; overflow:hidden; isolation:isolate; border:none; cursor:pointer;
  background:var(--primary); color:var(--on-primary); font-size:.9375rem; font-weight:500;
  padding:11px 24px; border-radius:var(--r-full); display:inline-flex; align-items:center; gap:8px;
  min-height:44px; transition:box-shadow var(--d-short) var(--standard), transform var(--d-short) var(--standard)}
.btn::before{content:""; position:absolute; inset:0; background:currentColor; opacity:0; z-index:-1;
  transition:opacity var(--d-short)}
.btn:hover{box-shadow:var(--e1)} .btn:hover::before{opacity:var(--state-hover)}
.btn:active{transform:scale(.97)}
.btn.tonal{background:var(--primary-container); color:var(--on-primary-container)}
.btn.outlined{background:transparent; color:var(--primary); border:1px solid var(--outline)}
.btn.text{background:transparent; color:var(--primary); padding-inline:16px}
.btn.danger{background:var(--error); color:var(--md-sys-color-on-error)}
.btn.sm{padding:8px 16px; font-size:.875rem; min-height:36px}
.btn[disabled]{opacity:.38; cursor:not-allowed; box-shadow:none}
.btn .spin{width:16px;height:16px; border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; animation:spin .7s linear infinite}

.icon-btn{position:relative; width:44px;height:44px; display:grid;place-items:center;
  border-radius:var(--r-full); border:none; background:none; color:var(--on-surface-variant);
  cursor:pointer; overflow:hidden; isolation:isolate; transition:color var(--d-short)}
.icon-btn::before{content:""; position:absolute; inset:0; background:currentColor; opacity:0; z-index:-1;
  transition:opacity var(--d-short)}
.icon-btn:hover{color:var(--on-surface)} .icon-btn:hover::before{opacity:var(--state-hover)}
.icon-btn[aria-pressed="true"]{color:var(--primary)}
.icon-btn .badge{position:absolute; top:5px; inset-inline-end:5px; min-width:18px;height:18px; padding:0 5px;
  border-radius:var(--r-full); background:var(--error); color:#fff; font-size:.6875rem; line-height:18px;
  text-align:center; animation:pop .3s var(--emph-dec)}

/* ── تموّج Material ── */
.ripple{position:absolute; border-radius:50%; transform:scale(0); background:currentColor;
  opacity:.22; pointer-events:none; animation:ripple .6s var(--emph-dec) forwards}
@keyframes ripple{to{transform:scale(2.6); opacity:0}}
@keyframes pop{from{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── الزر العائم ── */
.fab{position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:50;
  display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 20px;
  border:none; border-radius:var(--r-md); background:var(--primary); color:var(--on-primary);
  font-size:.9375rem; font-weight:500; cursor:pointer; box-shadow:var(--e3);
  overflow:hidden; isolation:isolate;
  transition:transform var(--d-med) var(--emph-dec), box-shadow var(--d-short)}
.fab::before{content:""; position:absolute; inset:0; background:currentColor; opacity:0; z-index:-1; transition:opacity var(--d-short)}
.fab:hover::before{opacity:var(--state-hover)}
.fab:active{transform:scale(.96)}
.fab.tucked{transform:translateY(120px)}
.fab span{white-space:nowrap}
body.no-fab .fab{display:none}

/* ── المسرح ── */
main{flex:1 1 auto; padding-block:var(--s4) var(--s6); outline:none; position:relative}

/* ── الظهور ── */
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.stagger>*{animation:rise .45s var(--emph-dec) both; animation-delay:calc(var(--i,0)*45ms)}
.page-head{animation:rise .5s var(--emph-dec) both}
.reveal{opacity:0; transform:translateY(22px)}
.reveal.in{opacity:1; transform:none; transition:opacity .55s var(--emph-dec), transform .55s var(--emph-dec)}

::view-transition-old(root){animation:vt-out .2s var(--standard) both}
::view-transition-new(root){animation:vt-in .35s var(--emph-dec) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0; transform:translateY(10px)}}

/* ── فتات الخبز ── */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.8125rem;
  color:var(--on-surface-variant); margin-bottom:var(--s3)}
.crumbs a{padding:3px 8px; border-radius:var(--r-xs)}
.crumbs a:hover{background:var(--surface-container); color:var(--on-surface)}
.crumbs i{font-style:normal; opacity:.4}

/* ── رأس الصفحة ── */
.page-head{margin-bottom:var(--s4)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-size:.75rem;
  font-weight:600; letter-spacing:1.4px; margin:0 0 10px}
.head-row{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s2)}

.section{margin-top:var(--s5)}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s2)}
.section-head h2{margin:0}

/* ── البطاقات (نمط Classroom) ── */
.grid{display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
.grid.tight{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

.card{position:relative; display:block; background:var(--surface); border:1px solid var(--outline);
  border-radius:var(--r-sm); overflow:hidden; isolation:isolate;
  transition:box-shadow var(--d-med) var(--standard), transform var(--d-med) var(--emph-dec),
             border-color var(--d-short)}
a.card::before,button.card::before{content:""; position:absolute; inset:0; background:var(--on-surface);
  opacity:0; z-index:1; pointer-events:none; transition:opacity var(--d-short)}
a.card:hover,button.card:hover{box-shadow:var(--e2); transform:translateY(-2px)}
a.card:hover::before,button.card:hover::before{opacity:.03}
.card-banner{height:88px; padding:var(--s2); display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--primary); color:#fff; position:relative; overflow:hidden}
.card-banner::after{content:""; position:absolute; inset-inline-end:-30px; top:-40px; width:150px;height:150px;
  border-radius:50%; background:rgba(255,255,255,.10)}
.card-banner h3{color:#fff; font-size:1.0625rem; font-weight:500; position:relative}
.card-banner p{margin:2px 0 0; font-size:.8125rem; opacity:.9; position:relative}
.card-body{padding:var(--s2)}
.card-body p{margin:0; color:var(--on-surface-variant); font-size:.875rem}
.card-foot{padding:12px var(--s2); border-top:1px solid var(--outline-variant); display:flex;
  align-items:center; justify-content:space-between; gap:var(--s1); font-size:.8125rem;
  color:var(--on-surface-variant)}
.card.plain{padding:var(--s3)}

.card .card-banner{position:relative; overflow:hidden; background:var(--b, var(--primary))}
.card .card-banner::after{content:""; position:absolute; inset-inline-start:-18px; bottom:-34px; width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.14); box-shadow:62px -40px 0 -22px rgba(255,255,255,.10); pointer-events:none}

.meta{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.8125rem; color:var(--on-surface-variant)}
.meta span{display:inline-flex; align-items:center; gap:6px}
.meta svg{width:16px;height:16px}

.pill{display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:500;
  padding:5px 12px; border-radius:var(--r-full); background:var(--primary-container);
  color:var(--on-primary-container)}
.pill.dim{background:var(--surface-container); color:var(--on-surface-variant)}
.pill.warn{background:var(--tertiary-container); color:var(--on-tertiary-container)}
.pill.info{background:var(--secondary-container); color:var(--on-secondary-container)}

/* ── التقدم ── */
.bar{height:4px; border-radius:var(--r-full); background:var(--surface-container-high); overflow:hidden}
.bar i{display:block; height:100%; border-radius:var(--r-full); background:var(--primary);
  animation:fill .8s var(--emph-dec) both; transform-origin:100% 50%}
@keyframes fill{from{transform:scaleX(0)}}

/* ── القوائم ── */
.list{display:flex; flex-direction:column; gap:var(--s1)}
.row{position:relative; display:flex; align-items:center; gap:var(--s2); background:var(--surface);
  border:1px solid var(--outline); border-radius:var(--r-sm); padding:14px var(--s2);
  overflow:hidden; isolation:isolate;
  transition:box-shadow var(--d-short) var(--standard), border-color var(--d-short)}
.row:hover{box-shadow:var(--e1)}
.row .grow{flex:1 1 auto; min-width:0}
.row h3{margin:0 0 2px; font-size:.9375rem; font-weight:500}
.row p{margin:0; font-size:.8125rem; color:var(--on-surface-variant);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .idx{flex:0 0 auto; width:40px;height:40px; display:grid;place-items:center; border-radius:var(--r-full);
  background:var(--surface-container); color:var(--on-surface-variant); font-size:.9375rem;
  font-weight:500; font-variant-numeric:tabular-nums; transition:background var(--d-short), color var(--d-short)}
.row.done .idx{background:var(--primary); color:var(--on-primary)}
.row .chev{color:var(--on-surface-variant); transition:transform var(--d-short) var(--emph-dec)}
.row:hover .chev{transform:translateX(-4px)}

/* ── المواد ── */
.mat{align-items:flex-start}
.mat .ico{flex:0 0 auto; width:40px;height:40px; display:grid;place-items:center; border-radius:var(--r-xs);
  background:var(--secondary-container); color:var(--on-secondary-container);
  transition:transform var(--d-med) var(--emph-dec)}
.mat:hover .ico{transform:scale(1.08)}
.mat h3{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.mat audio{width:100%; margin-top:10px; height:38px}
.mat .acts{display:flex; gap:2px; flex:0 0 auto}

/* ── الشرائح ── */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s3)}
.chip{position:relative; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--outline);
  background:var(--surface); color:var(--on-surface-variant); cursor:pointer; font-size:.8125rem;
  font-weight:500; padding:7px 16px; border-radius:var(--r-xs); min-height:36px; overflow:hidden;
  isolation:isolate; transition:background var(--d-short), color var(--d-short), border-color var(--d-short)}
.chip::before{content:""; position:absolute; inset:0; background:currentColor; opacity:0; z-index:-1;
  transition:opacity var(--d-short)}
.chip:hover::before{opacity:var(--state-hover)}
.chip[aria-pressed="true"],.chip[aria-current="true"]{background:var(--primary-container);
  color:var(--on-primary-container); border-color:transparent}

.mat-group{margin-top:var(--s3)}
.mat-group h2{display:flex; align-items:center; gap:10px; font-size:.875rem; font-weight:600;
  color:var(--on-surface-variant); letter-spacing:.8px; margin-bottom:12px}
.mat-group h2 svg{width:16px;height:16px}

/* ── الخريطة ── */
.map-wrap{position:relative; display:grid; grid-template-columns:minmax(280px,1fr) minmax(300px,420px);
  gap:var(--s3); align-items:start}
.map-card{background:var(--surface); border:1px solid var(--outline); border-radius:var(--r-md);
  padding:var(--s2); position:relative; overflow:hidden}
.iraq-map{width:100%; height:auto; display:block; max-height:min(72vh,620px); overflow:visible}
.iraq-map path{fill:var(--surface-container-high); stroke:var(--surface); stroke-width:2.2;
  cursor:pointer; transition:fill var(--d-short) var(--standard), transform var(--d-med) var(--emph-dec);
  transform-origin:center; transform-box:fill-box}
.iraq-map path:hover{fill:#B9DCC2}
.iraq-map path.has:not(.on){fill:var(--primary-container)}
.iraq-map path.on{fill:var(--primary); stroke:var(--surface); transform:scale(1.02)}
.iraq-map path:focus-visible{outline:none; fill:var(--secondary)}
.map-legend{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2); font-size:.75rem;
  color:var(--on-surface-variant)}
.map-legend span{display:inline-flex; align-items:center; gap:7px}
.map-legend i{width:12px;height:12px; border-radius:3px; display:inline-block}
.map-side{position:sticky; top:96px}
.gov-list{display:flex; flex-direction:column; gap:6px; max-height:min(64vh,560px); overflow:auto;
  overscroll-behavior:contain; padding-inline-end:4px}
.gov-item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-xs);
  border:1px solid transparent; cursor:pointer; text-align:start; background:none; width:100%;
  transition:background var(--d-short)}
.gov-item:hover{background:var(--surface-container)}
.gov-item[aria-current="true"]{background:var(--primary-container); color:var(--on-primary-container)}
.gov-item .n{flex:1 1 auto; font-size:.9375rem; font-weight:500}

/* ── اللافتات ── */
.notice{display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s3);
  background:var(--surface); border:1px solid var(--outline); border-radius:var(--r-sm);
  padding:14px var(--s2); animation:rise .45s var(--emph-dec) both}
.notice .ico{flex:0 0 auto; width:40px;height:40px; display:grid;place-items:center;
  border-radius:var(--r-full); background:var(--tertiary-container); color:var(--on-tertiary-container)}
.notice .grow{flex:1 1 auto; min-width:0}
.notice strong{display:block; font-weight:500; font-size:.9375rem}
.notice p{margin:2px 0 0; font-size:.8125rem; color:var(--on-surface-variant)}
.notice p a{color:var(--secondary); text-decoration:underline; text-underline-offset:3px}
.notice.ok .ico{background:var(--primary-container); color:var(--on-primary-container)}
.notice.vote .ico{background:var(--secondary-container); color:var(--on-secondary-container)}

.warn{display:flex; align-items:flex-start; gap:10px; margin:0 0 var(--s3); padding:12px 16px;
  border-radius:var(--r-sm); background:var(--tertiary-container); color:var(--on-tertiary-container);
  font-size:.8125rem}
.warn svg{flex:0 0 auto; width:18px;height:18px; margin-top:2px}

/* ── الحالات ── */
.empty{text-align:center; padding:var(--s6) var(--s3); border:1px dashed var(--outline);
  border-radius:var(--r-md); color:var(--on-surface-variant); background:var(--surface);
  animation:rise .45s var(--emph-dec) both}
.empty .ico{width:56px;height:56px; margin:0 auto var(--s2); display:grid;place-items:center;
  border-radius:var(--r-full); background:var(--surface-container)}
.empty strong{display:block; color:var(--on-surface); font-weight:500; font-size:1.0625rem; margin-bottom:6px}
.empty .btn{margin-top:var(--s2)}
.skel{padding:var(--s6) 0; text-align:center; color:var(--on-surface-variant)}
.skel::after{content:""; display:block; width:28px;height:28px; margin:var(--s2) auto 0;
  border:3px solid var(--surface-container-high); border-top-color:var(--primary); border-radius:50%;
  animation:spin .8s linear infinite}
.sk-card{height:150px; border-radius:var(--r-sm); background:linear-gradient(100deg,
  var(--surface-container) 30%, var(--surface-container-high) 50%, var(--surface-container) 70%);
  background-size:220% 100%; animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}

/* ── الإعلان ── */
.ad-label{margin:0 0 10px; font-size:.6875rem; letter-spacing:1.6px; color:var(--on-surface-variant);
  display:flex; align-items:center; gap:10px}
.ad-label::after{content:""; flex:1 1 auto; height:1px; background:var(--outline)}
.ad-slot{display:block; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--outline);
  background:var(--surface-container); aspect-ratio:1392/500;
  transition:box-shadow var(--d-med) var(--standard), transform var(--d-med) var(--emph-dec)}
.ad-slot:hover{box-shadow:var(--e2); transform:translateY(-2px)}
.ad-slot img{display:block; width:100%; height:100%; object-fit:cover}
.ad-note{margin:10px 0 0; font-size:.8125rem; color:var(--on-surface-variant); text-align:center}

/* ── الإعلان المدفوع (features/ads.js): بطاقة واحدة بالرموز نفسها، تأخذ مكان لافتة الدار ── */
.paid-ad{overflow:hidden; animation:paid-in var(--d-med) var(--emph-dec) both;
  transition:height var(--d-med) var(--standard), opacity var(--d-short) var(--standard), margin var(--d-med) var(--standard)}
.paid-ad.out{opacity:0; margin-block:0}
@keyframes paid-in{from{opacity:0; transform:translateY(8px)}}
.paid-ad-top{display:flex; align-items:center; gap:4px; margin-bottom:6px}
.paid-ad-top .ad-label{flex:1 1 auto; margin:0}
.paid-ad-hide{color:var(--on-surface-variant)}
.paid-ad-card{display:block; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--outline);
  background:var(--surface); color:inherit; text-decoration:none;
  transition:box-shadow var(--d-med) var(--standard), transform var(--d-med) var(--emph-dec)}
a.paid-ad-card:hover{box-shadow:var(--e2); transform:translateY(-2px)}
.paid-ad-card img{display:block; width:100%; height:auto; aspect-ratio:1392/500; object-fit:cover; background:var(--surface-container)}
.paid-ad-body{display:flex; flex-direction:column; gap:4px; padding:var(--s2)}
.paid-ad-body strong{font-size:1rem; font-weight:500; color:var(--on-surface)}
.paid-ad-text{font-size:.875rem; color:var(--on-surface-variant)}
.paid-ad-cta,.paid-ad-by{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:.875rem; font-weight:500; color:var(--primary)}
.paid-ad-by{color:var(--on-surface-variant); font-weight:400}
.paid-ad-cta svg{width:16px; height:16px}
@media (prefers-reduced-motion: reduce){.paid-ad{animation:none; transition:none} a.paid-ad-card:hover{transform:none}}
/* «أعلن في حريص» ورابط المعلن */
.ad-rules{list-style:none; padding:0}
.ad-rules li{display:flex; gap:8px; align-items:flex-start}
.ad-rules svg{width:18px; height:18px; flex:none; margin-top:3px; color:var(--error)}
.ad-thumb img{display:block; max-width:100%; height:auto; aspect-ratio:1392/500; object-fit:cover; border-radius:var(--r-sm); margin-top:12px}
.ad-sent h3{display:flex; align-items:center; gap:8px; margin:0 0 8px}
.ad-sent h3 svg{color:var(--primary)}
.ad-link{overflow-wrap:anywhere; margin:0 0 12px}
.ad-nums{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s1); margin-top:var(--s2)}
.ad-nums .card{padding:var(--s2)}
.ad-nums p{margin:0}
.ad-nums strong{display:block; font-size:1.375rem; font-weight:500; margin:4px 0}
.ad-daily-wrap{overflow-x:auto}
.ad-daily{width:100%; border-collapse:collapse; font-size:.875rem}
.ad-daily th,.ad-daily td{padding:10px 12px; text-align:start; border-bottom:1px solid var(--outline-variant)}
.ad-daily th{font-weight:500; color:var(--on-surface-variant)}

/* ── أعمال الطلبة ── */
.biz-card .logo{width:56px;height:56px; border-radius:var(--r-sm); object-fit:cover;
  background:var(--surface-container); flex:0 0 auto}
.biz-head{display:flex; gap:var(--s2); align-items:flex-start}
.verified{display:inline-flex; align-items:center; gap:5px; color:var(--primary); font-size:.75rem; font-weight:500}
.verified svg{width:15px;height:15px}

/* ── النماذج ── */
.form{max-width:720px}
.field{margin-bottom:var(--s3)}
.field>label{display:block; font-size:.8125rem; font-weight:500; margin-bottom:7px; color:var(--on-surface)}
.field .req{color:var(--error)}
.field input,.field select,.field textarea{width:100%; padding:13px 16px; border-radius:var(--r-xs);
  border:1px solid var(--outline); background:var(--surface); font-size:.9375rem;
  transition:border-color var(--d-short), box-shadow var(--d-short)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--on-surface-variant)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-container)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error)}
.field .hint{display:block; font-size:.75rem; color:var(--on-surface-variant); margin-top:6px}
.field .err{display:block; font-size:.75rem; color:var(--error); margin-top:6px; font-weight:500}
.field input[dir="ltr"]{text-align:left}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.grid2 .col2{grid-column:1/-1}

/* رفع الهوية */
.upload{border:2px dashed var(--outline); border-radius:var(--r-md); padding:var(--s3); text-align:center;
  background:var(--surface); transition:border-color var(--d-short), background var(--d-short)}
.upload.over{border-color:var(--primary); background:var(--primary-container)}
.upload .ico{width:48px;height:48px; margin:0 auto 12px; display:grid;place-items:center;
  border-radius:var(--r-full); background:var(--secondary-container); color:var(--on-secondary-container)}
.upload input[type=file]{position:absolute; width:1px;height:1px; opacity:0;
  pointer-events:none; clip-path:inset(50%)}
.thumb{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s2); padding:12px;
  border:1px solid var(--outline); border-radius:var(--r-sm); background:var(--surface); text-align:start}
.thumb img{width:120px; height:78px; object-fit:cover; border-radius:var(--r-xs); flex:0 0 auto;
  background:var(--surface-container)}
.thumb .grow{flex:1 1 auto; min-width:0}
.thumb .grow p{margin:0; font-size:.8125rem; color:var(--on-surface-variant); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

/* ── النوافذ ── */
.dlg{border:none; border-radius:var(--r-xl); padding:0; background:var(--surface); color:var(--on-surface);
  box-shadow:var(--e3); max-width:640px; width:calc(100% - 32px); overscroll-behavior:contain}
.dlg[open]{animation:dlgIn .35s var(--emph-dec)}
@keyframes dlgIn{from{opacity:0; transform:translateY(24px) scale(.96)}}
.dlg::backdrop{animation:fade .25s ease both}
@keyframes fade{from{opacity:0}}
.dlg-in{padding:var(--s3)}
.dlg h2{margin:0 0 6px; font-size:1.375rem; font-weight:500}
.dlg label{display:flex; flex-direction:column; gap:6px; font-size:.8125rem; color:var(--on-surface)}
.dlg input,.dlg select,.out{font-size:.9375rem; padding:11px 14px; border-radius:var(--r-xs);
  border:1px solid var(--outline); background:var(--surface);
  transition:border-color var(--d-short), box-shadow var(--d-short)}
.dlg input:focus,.dlg select:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-container)}
.dlg .grid2{margin-top:var(--s2)}
.out{width:100%; margin-top:var(--s2); font-family:ui-monospace,Menlo,monospace;
  font-size:.8125rem; direction:ltr; text-align:left}
.dlg-actions{display:flex; gap:8px; justify-content:flex-start; margin-top:var(--s3)}

/* ── التنبيه ── */
.toast{position:fixed; inset-block-end:24px; inset-inline-start:24px; z-index:120; pointer-events:none;
  background:#323232; color:#F1F3F4; padding:14px 20px; border-radius:var(--r-xs); font-size:.875rem;
  box-shadow:var(--e3); transform:translateY(140%); transition:transform var(--d-med) var(--emph-dec);
  max-width:min(420px,calc(100vw - 48px))}
.toast.on{transform:none}

/* ── الذيل ── */
.foot{border-top:1px solid var(--outline); padding-block:var(--s3); background:var(--surface);
  color:var(--on-surface-variant); font-size:.875rem}
.foot-in{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s2)}
.foot p{margin:0} .foot .mark{color:var(--on-surface); font-weight:600}
.foot-links{display:flex; flex-wrap:wrap; gap:4px var(--s2)}
.foot-links a{padding:4px 8px; border-radius:var(--r-xs)}
.foot-links a:hover{background:var(--surface-container); color:var(--on-surface)}

/* ═══ الغلاف: بانر صف في Classroom ═══ */
.hero{position:relative; padding:var(--s5) var(--s4); margin-bottom:var(--s4); border-radius:var(--r-md);
  overflow:hidden; isolation:isolate; background:#1967D2; color:#fff; min-height:220px;
  display:flex; flex-direction:column; justify-content:flex-end}
.hero::before{content:""; position:absolute; z-index:-1; inset-inline-start:-40px; top:-60px; width:320px; height:320px; border-radius:50%;
  background:rgba(255,255,255,.10); box-shadow:180px 160px 0 -60px rgba(255,255,255,.08)}
.hero::after{content:""; position:absolute; z-index:-1; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.18), transparent 60%)}
.hero .frost{position:absolute; z-index:-1; inset-inline-end:48px; top:36px; width:170px; height:170px; color:#fff; opacity:.22}
.hero .frost svg{width:100%; height:100%; stroke-width:1.1}
.hero .eyebrow{color:#fff; opacity:.9}
.hero h1{font-size:clamp(1.9rem,4.4vw,2.8rem); font-weight:600; color:#fff}
.hero .lede{color:#E8F0FE}
.hero .tagline{margin:12px 0 0; color:#fff; font-weight:500}
.today-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.today-list li{display:grid; grid-template-columns:84px 1fr; gap:10px}
.today-list time{color:var(--secondary); font-weight:600}
.today-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2)}

/* ═══ الدخول ببريد الجامعة ═══ */
.google-btn{width:100%; justify-content:center; gap:12px; height:52px; margin-top:var(--s2);
  background:var(--surface); color:var(--on-surface); border:1px solid var(--outline); box-shadow:var(--e1)}
.google-btn:hover{box-shadow:var(--e2)}
.g-mark{width:22px;height:22px;stroke:none}
.notice-sm{display:flex; gap:10px; align-items:flex-start; margin:var(--s2) 0 0; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--secondary-container); color:var(--on-secondary-container); font-size:.875rem}
.notice-sm .g-mark{flex:0 0 auto; margin-top:2px}
.or{display:flex; align-items:center; gap:12px; margin:var(--s3) 0 var(--s2); color:var(--on-surface-variant); font-size:.8125rem}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--outline)}

/* ═══ أزرار مجزّأة (الكورس، الشعبة، العرض) ═══ */
.seg{display:inline-flex; flex-wrap:wrap; gap:0; border:1px solid var(--outline); border-radius:var(--r-full);
  background:var(--surface); padding:3px; margin-block:var(--s1)}
.seg button{border:none; background:none; cursor:pointer; padding:8px 18px; border-radius:var(--r-full);
  font-size:.875rem; color:var(--on-surface-variant); transition:background var(--d-short), color var(--d-short)}
.seg button:hover{background:var(--surface-container)}
.seg button[aria-pressed="true"]{background:var(--primary); color:var(--on-primary)}
.course-switch{margin-bottom:var(--s2)}

/* ═══ ممثل المرحلة ═══ */
.team{display:grid; gap:var(--s2)}
.rep{display:flex; align-items:center; gap:14px}
.rep .avatar{width:48px;height:48px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:var(--secondary); color:#fff; font-size:1.25rem; font-weight:600}
.rep .grow{display:flex; flex-direction:column; min-width:0}
.rep .tg{direction:ltr}
.rep .tg svg{width:18px;height:18px}

/* ═══ الجدول ═══ */
.tt-days{display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); margin-top:var(--s2)}
.tt-day{background:var(--surface); border:1px solid var(--outline); border-radius:var(--r-md); padding:var(--s2)}
.tt-day h3{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-weight:600}
.tt-day.today{border-color:var(--secondary); box-shadow:0 0 0 3px rgba(19,115,51,.14)}
.tt-day.off{background:transparent; border-style:dashed}
.tt-day ol{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.tt-day li{display:grid; grid-template-columns:78px 1fr; gap:10px; align-items:start; padding:8px; border-radius:var(--r-xs)}
.tt-day li.next{background:var(--secondary-container)}
.tt-day time{color:var(--secondary); font-size:.8125rem; font-weight:600; padding-top:2px}
.tt-day li strong{display:block; font-weight:600; font-size:.9375rem}
.tt-day li small{color:var(--on-surface-variant); font-size:.8125rem}
.next-up{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:var(--s1) 0 0; padding:10px 14px;
  background:var(--secondary-container); color:var(--on-secondary-container); border-radius:var(--r-sm)}

/* ═══ رموز الكلاس روم ═══ */
.class-code{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:1.0625rem; letter-spacing:1.5px;
  background:var(--primary-container); color:var(--on-primary-container); padding:6px 12px; border-radius:var(--r-xs)}

/* ═══ النصوص وقارئها ═══ */
.subject-about{display:flex; gap:8px; align-items:flex-start; margin:14px 0 0; padding:12px 14px; max-width:75ch;
  background:var(--surface); border:1px solid var(--outline);
  border-radius:var(--r-sm); font-size:.9375rem; color:var(--on-surface-variant)}
.subject-about svg{flex:0 0 auto; margin-top:4px; color:var(--secondary)}
.text-row .seq{background:var(--secondary-container); color:var(--on-secondary-container); font-weight:600}
.reader-head .lede.en{font-family:var(--ff-en); font-style:italic; margin-top:4px}
.parallel{display:grid; gap:2px; margin-top:var(--s3); background:var(--outline-variant);
  border:1px solid var(--outline); border-radius:var(--r-md); overflow:hidden}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--surface)}
.pair p{margin:0; padding:var(--s2) var(--s3); line-height:1.9}
.pair .src{font-family:var(--ff-en); font-size:1rem; text-align:left; border-inline-end:1px solid var(--outline-variant); color:var(--md-sys-color-on-surface)}
.pair .tgt{font-family:var(--ff-read); font-size:1.125rem}
.parallel.mode-en .tgt,.parallel.mode-ar .src{display:none}
.parallel.mode-en .pair,.parallel.mode-ar .pair{grid-template-columns:1fr}
.parallel.mode-en .src{border:none}
.pair:target{box-shadow:inset 3px 0 0 var(--primary)}
.glossary{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1px; background:var(--outline-variant);
  border:1px solid var(--outline); border-radius:var(--r-sm); overflow:hidden}
.glossary div{display:flex; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--surface); font-size:.9375rem}
.glossary [lang=en]{font-family:var(--ff-en); color:var(--primary)}
/* الإنجليزي يساراً والعربي يميناً في كل صف مصطلح، كما يُكتب كلٌّ منهما (الصرف في الامتحان له ترتيبه الخاص) */
:where(.glossary):not(#exMorph *) > div{direction:ltr}
:where(.glossary):not(#exMorph *) > div > :not([lang=en]){direction:rtl; text-align:right}
.notes{margin:0; padding-inline-start:1.2em; font-family:var(--ff-read); line-height:2}

/* ═══ درجاتي ═══ */
.marks{display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); margin-top:var(--s2)}
.marks-total{max-width:320px; margin-top:var(--s2)}
.mark-card .section-head{margin-bottom:10px}
.mark-card h2{font-size:1.0625rem; font-weight:600}
.mark-rows{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:4px}
.mark-rows li{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--outline-variant)}
.mark-rows li .grow{display:flex; flex-direction:column; min-width:0}
.mark-rows li small{color:var(--on-surface-variant); font-size:.75rem}
.score input{width:74px; height:40px; text-align:center; border:1px solid var(--outline); border-radius:var(--r-xs);
  background:var(--surface-dim); font-variant-numeric:tabular-nums; direction:ltr}
.score input[aria-invalid="true"]{border-color:var(--error)}
.add-mark summary{cursor:pointer; color:var(--primary); font-size:.875rem; padding:6px 0}
.add-mark form{margin-top:10px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ═══ الشريط السفلي للهاتف ═══ */
.bottom-nav{display:none}

/* ── الشاشات الصغيرة ── */
@media (max-width:900px){
  .map-wrap{grid-template-columns:1fr}
  .map-side{position:static}
  .gov-list{max-height:none}
}
@media (max-width:820px){
  :root{--s4:24px; --s5:36px; --s6:56px}
  .wrap{padding-inline:16px}
  .appbar-in{height:auto; flex-wrap:wrap; padding-block:12px; gap:12px}
  .search{order:3; flex-basis:100%; max-width:none}
  .search kbd{display:none}
  .appbar-nav{margin-inline-start:auto}
  .nav-link{display:none}
  .brand-text small{display:none}
  .grid,.grid.two,.grid.tight{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .fatiha-in{flex-direction:column; gap:2px; font-size:.875rem; padding:10px 16px}
  .fatiha .sep{display:none}
  .fab span{display:none}
  .fab{padding:0; width:56px; justify-content:center; border-radius:var(--r-md)}
  .foot-in{flex-direction:column; align-items:flex-start}
  .hero{padding:var(--s4) var(--s3)}
  .pair{grid-template-columns:1fr}
  .pair .src{border-inline-end:none; border-bottom:1px dashed var(--outline-variant)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .bottom-nav{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; inset-inline:0; bottom:0; z-index:60;
    background:rgba(255,255,255,.97); backdrop-filter:blur(10px); border-top:1px solid var(--outline);
    padding-bottom:env(safe-area-inset-bottom)}
  .bottom-nav a{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px 6px;
    font-size:.6875rem; color:var(--on-surface-variant); min-height:56px; justify-content:center}
  .bottom-nav a[aria-current="page"]{color:var(--primary); font-weight:600}
  .bottom-nav a[aria-current="page"] svg{background:var(--primary-container); border-radius:var(--r-full)}
  .bottom-nav svg{width:40px; height:26px; padding:3px 10px; box-sizing:border-box}
  .fab{inset-block-end:calc(76px + env(safe-area-inset-bottom))}
  body:not(.no-fab) main{padding-block-end:88px}   /* آخر صف لا يختفي تحت الزر العائم */
  .toast{inset-block-end:calc(80px + env(safe-area-inset-bottom))}
  .thumb img{width:88px; height:58px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}
@media print{.appbar,.fatiha,.foot,.chips,.acts,.fab,.skip,.bottom-nav{display:none}
  body{background:#fff} .parallel{border:none} .pair{break-inside:avoid}}

/* ══ شريط الانقطاع ودعوة التثبيت ══ */
.netbar{margin:0; padding:10px 24px; text-align:center; font-size:.8125rem;
  background:var(--tertiary-container); color:var(--on-tertiary-container)}
.install-slot{margin:0}

/* ══ بطاقات الأرقام ══ */
.card.plain.stat{padding:var(--s2) var(--s3)}
.stat .label{margin:0 0 4px}
.big{margin:0; font-size:2rem; font-weight:600; line-height:1.15; letter-spacing:-.5px}

/* ══ صف النسخ ══ */
.copyrow{display:flex; gap:8px; align-items:center}
.copyrow input{flex:1 1 auto; min-width:0; padding:12px 16px; border-radius:var(--r-xs);
  border:1px solid var(--outline); background:var(--surface-container); font-size:.875rem;
  text-align:left; direction:ltr}

/* ══ العد التنازلي ══ */
.countdown{display:flex; align-items:baseline; gap:12px; margin-top:20px; padding:18px 22px;
  border-radius:var(--r-md); background:var(--primary-container); color:var(--on-primary-container)}
.countdown .big{font-size:2.75rem}
.countdown.soon{background:var(--tertiary-container); color:var(--on-tertiary-container)}
.countdown.past{background:var(--surface-container); color:var(--on-surface-variant)}

/* ══ خطوات ══ */
.stepno{flex:0 0 auto; width:40px;height:40px; display:grid;place-items:center;
  border-radius:var(--r-full); background:var(--primary); color:var(--on-primary);
  font-weight:600; font-variant-numeric:tabular-nums}
.plain-list{margin:14px 0 0; padding-inline-start:20px; color:var(--on-surface-variant); font-size:.9375rem}
.plain-list li{margin-bottom:8px}

/* ══ شارات ══ */
.row .idx.new{background:var(--secondary-container); color:var(--on-secondary-container)}
.row .idx.ok{background:var(--primary); color:var(--on-primary)}
.toast .link{background:none; border:none; color:#9FD3AC; text-decoration:underline;
  cursor:pointer; font:inherit; padding:0 4px}

/* ══ ضمانات النموذج ══ */
.guarantee h2{display:flex; align-items:center; gap:10px; color:var(--on-primary-container)}
.guarantee h2 svg{width:20px;height:20px; color:var(--primary)}
.section-head h2 svg{width:20px;height:20px; vertical-align:-4px; margin-inline-end:8px; color:var(--primary)}

/* ══ الحساب ══ */
.account-btn{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-full)}
.account-btn .avatar{width:36px; height:36px; display:grid; place-items:center; border-radius:var(--r-full);
  background:var(--primary); color:var(--on-primary); font-weight:600; font-size:1rem}
.account-btn:focus-visible .avatar{outline:3px solid var(--secondary); outline-offset:2px}
.reject-note{margin:6px 0 0; font-size:.8125rem; color:var(--error); white-space:normal}
.link{color:var(--secondary); text-decoration:underline; text-underline-offset:3px}
.picker{margin-bottom:4px}
.dlg-wide{max-width:760px}
.dlg .field{margin-bottom:var(--s2)}
.dlg .field input,.dlg .field select,.dlg .field textarea{width:100%}
.progress{position:relative; height:28px; border-radius:var(--r-xs); background:var(--surface-container);
  overflow:hidden; margin:4px 0 var(--s2)}
.progress i{position:absolute; inset:0; background:var(--primary-container); transform:scaleX(0); transform-origin:right;
  transition:transform .2s linear}
html[dir="ltr"] .progress i{transform-origin:left}
.progress span{position:relative; display:block; text-align:center; line-height:28px; font-size:.75rem;
  font-variant-numeric:tabular-nums; color:var(--on-primary-container)}
.hint{display:block; font-size:.75rem; color:var(--on-surface-variant); margin-top:6px}
.official{display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:600; color:var(--secondary)}
.official svg{width:15px;height:15px}
.sponsor-line{margin:10px 0 0; font-size:.8125rem; color:var(--on-surface-variant)}
.sponsor-line a{color:var(--on-surface); text-decoration:underline; text-underline-offset:3px}
.challenge{background:linear-gradient(135deg,var(--primary),#0A3D19); color:#fff; border:none}
.challenge h2,.challenge p{color:#fff}
.challenge .muted{color:rgba(255,255,255,.8)}
.featured-pill{background:var(--tertiary-container); color:var(--on-tertiary-container)}
.logo-initial{display:grid; place-items:center; font-size:1.375rem; font-weight:600;
  background:var(--primary-container); color:var(--on-primary-container)}
/* .biz-card .logo (أثقل) كان يمحو خلفية الحرف إلى سطح داكن، والحرف بلون on-primary-container الكحلي: 1:1 في الداكن */
.biz-card .logo-initial{background:var(--primary-container); color:var(--on-primary-container)}
.mark-rows li > .muted{white-space:nowrap}

/* ═══════════════ طبقة مكوّنات Material 3 (Classroom) ═══════════════
   تأتي بعد كل ما سبق عمداً: تعيد رسم المكوّنات بمواصفات M3. */
:root{
  --art-ziggurat:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 120%22%3E%3Cg stroke=%22%23fff%22 fill=%22none%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.55%22%3E%3Ccircle cx=%22160%22 cy=%2234%22 r=%2214%22/%3E%3Cpath d=%22M160 10v6M160 52v6M136 34h6M178 34h6M143 17l4 4M173 47l4 4M143 51l4-4M173 21l4-4%22/%3E%3Cpath d=%22M40 118V96h120v22M60 96V76h80v20M80 76V58h40v18M92 58V46h16v12M100 46V38%22/%3E%3Cpath d=%22M92 118v-12h16v12%22/%3E%3C/g%3E%3C/svg%3E");
  --art-gate:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 120%22%3E%3Cg stroke=%22%23fff%22 fill=%22none%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.55%22%3E%3Cpath d=%22M60 118V40h24V28h52v12h24v78%22/%3E%3Cpath d=%22M60 40l6-8 6 8 6-8 6 8M136 40l6-8 6 8 6-8 6 8M84 28l6-8 6 8 6-8 6 8 6-8 6 8 6-8 6 8%22/%3E%3Cpath d=%22M92 118V82a18 18 0 0136 0v36%22/%3E%3Cpath d=%22M60 58h24M136 58h24M60 76h24M136 76h24M60 94h32M128 94h32%22/%3E%3Cpath d=%22M66 67c3-3 8-3 11 0M143 67c3-3 8-3 11 0%22/%3E%3C/g%3E%3C/svg%3E");
  --art-palm:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 120%22%3E%3Cg stroke=%22%23fff%22 fill=%22none%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.55%22%3E%3Cpath d=%22M70 118c2-26 4-44 12-62M150 118c-1-22-3-38-9-52%22/%3E%3Cpath d=%22M82 56c-12-8-26-8-34 0M82 56c-6-12-18-18-28-16M82 56c10-10 24-12 34-6M82 56c4-12 14-20 26-20M82 56c0-10-4-18-10-24%22/%3E%3Cpath d=%22M141 66c10-7 22-7 30 0M141 66c5-10 15-15 24-13M141 66c-9-8-21-9-29-4M141 66c-3-10-11-17-21-17%22/%3E%3Cpath d=%22M20 108c14-6 26 6 40 0s26 6 40 0 26 6 40 0 26 6 40 0 26 6 40 0%22/%3E%3C/g%3E%3C/svg%3E");
  --art-books:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 120%22%3E%3Cg stroke=%22%23fff%22 fill=%22none%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.55%22%3E%3Cpath d=%22M60 118V70h30v48M90 118V60h28v58M118 118l10-56 26 5-10 56%22/%3E%3Cpath d=%22M66 82h18M96 74h16M96 106h16M66 106h18%22/%3E%3Cpath d=%22M168 30l5 10 11 2-8 8 2 11-10-5-10 5 2-11-8-8 11-2z%22/%3E%3Cpath d=%22M40 30l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z%22/%3E%3C/g%3E%3C/svg%3E");
  --art-crescent:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 120%22%3E%3Cg stroke=%22%23fff%22 fill=%22none%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.55%22%3E%3Cpath d=%22M150 20a26 26 0 1 0 18 44 22 22 0 1 1-18-44z%22/%3E%3Cpath d=%22M96 26v6M93 29h6M190 40v6M187 43h6M120 58v4M118 60h4%22/%3E%3Cpath d=%22M40 118v-30a30 30 0 0160 0v30M52 118v-26a18 18 0 0136 0v26%22/%3E%3C/g%3E%3C/svg%3E");
}
body{background:var(--md-sys-color-surface); font-size:16px; line-height:24px}
h1{font-size:clamp(28px,3.4vw,36px); line-height:1.22; font-weight:500; letter-spacing:0}   /* headline-large → display-small */
h2{font-size:22px; line-height:28px; font-weight:500}                                       /* title-large */
h3{font-size:16px; line-height:24px; font-weight:500; letter-spacing:.15px}                /* title-medium */
.lede{font-size:16px; line-height:24px}                                                     /* body-large */
.label,.eyebrow{font-size:12px; line-height:16px; font-weight:500; letter-spacing:.5px}     /* label-medium */
.eyebrow{color:var(--md-sys-color-primary)}

/* ── شريط التطبيق العلوي (M3 small top app bar) ── */
.appbar{background:var(--md-sys-color-surface); border-bottom:1px solid transparent}
.appbar.raised{background:var(--md-sys-color-surface-container); box-shadow:none; border-bottom-color:transparent}
@media (min-width:821px){.appbar-in{height:64px; gap:12px}}
.menu-btn{flex:0 0 auto; color:var(--md-sys-color-on-surface)}
.brand-text strong{font-size:22px; font-weight:500; letter-spacing:0}
.brand-mark{box-shadow:none; border-radius:var(--md-sys-shape-sm)}
.search input{height:48px; background:var(--md-sys-color-surface-container-high); border-radius:28px}
.search input:focus{background:var(--md-sys-color-surface-container-lowest); box-shadow:var(--e2)}
.nav-link{padding:10px 16px; font-size:14px; font-weight:500; color:var(--md-sys-color-on-surface-variant)}
.nav-link[aria-current="page"]{background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}

/* ── درج التنقل (M3 navigation drawer) — توقيع Classroom ── */
.drawer-scrim{position:fixed; inset:0; z-index:79; background:color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
  opacity:0; pointer-events:none; transition:opacity .25s var(--standard)}
.drawer{position:fixed; top:0; bottom:0; inset-inline-start:0; z-index:80; width:min(360px,86vw); overflow-y:auto;
  background:var(--md-sys-color-surface-container-low); border-start-end-radius:var(--md-sys-shape-lg); border-end-end-radius:var(--md-sys-shape-lg);
  padding:12px 12px 24px; transform:translateX(100%); transition:transform .3s var(--emph-dec); box-shadow:var(--e1)}
html[dir="ltr"] .drawer{transform:translateX(-100%)}
body.drawer-open .drawer{transform:none}
body.drawer-open .drawer-scrim{opacity:1; pointer-events:auto}
.drawer-head{display:flex; align-items:center; gap:12px; padding:12px 16px 16px}
.drawer-head strong{font-size:22px; font-weight:500}
.drawer .drawer-label{margin:16px 16px 8px; font-size:14px; line-height:20px; font-weight:500; color:var(--md-sys-color-on-surface-variant)}
.drawer hr{border:none; border-top:1px solid var(--md-sys-color-outline-variant); margin:8px 16px}
.drawer a{position:relative; display:flex; align-items:center; gap:12px; min-height:56px; padding:0 16px 0 24px;
  border-radius:var(--r-full); font-size:14px; font-weight:500; color:var(--md-sys-color-on-surface-variant); overflow:hidden; isolation:isolate}
.drawer a::before{content:""; position:absolute; inset:0; background:currentColor; opacity:0; z-index:-1; transition:opacity var(--d-short)}
.drawer a:hover::before{opacity:.08}
.drawer a[aria-current="page"]{background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); font-weight:600}
.drawer a svg{width:24px; height:24px; flex:0 0 auto}
.drawer .dot{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  color:#fff; font-size:14px; font-weight:600; background:var(--b)}
.drawer .sub{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.drawer .sub small{font-size:12px; font-weight:400; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (min-width:1280px){
  body.drawer-docked .drawer{transform:none; top:var(--drawer-top,64px); width:300px; box-shadow:none; background:var(--md-sys-color-surface);
    border-radius:0; border-inline-end:none; padding-top:8px}
  body.drawer-docked .drawer-head{display:none}
  body.drawer-docked .drawer-scrim{display:none}
  /* المحتوى يأخذ ما بقي من العرض بجانب الدرج، كما في Classroom */
  body.drawer-docked main.wrap{margin-inline:300px 0; max-width:none; width:auto; padding-inline:40px}
  body.drawer-docked .foot{margin-inline-start:300px}
  body.drawer-docked .appbar{z-index:81}
}

/* ── الأزرار (M3 common buttons) ── */
.btn{height:40px; min-height:40px; padding:0 24px; border-radius:var(--r-full); font-size:14px; line-height:20px; font-weight:500;
  letter-spacing:.1px; box-shadow:none; background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary)}
.btn:hover{box-shadow:var(--e1)} .btn:active{transform:none}
.btn.tonal{background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}
.btn.tonal:hover{box-shadow:var(--e1)}
.btn.outlined{background:transparent; color:var(--md-sys-color-primary); border:1px solid var(--md-sys-color-outline)}
.btn.outlined:hover,.btn.text:hover{box-shadow:none}
.btn.text{background:transparent; color:var(--md-sys-color-primary); padding:0 12px}
.btn.sm{height:32px; min-height:32px; padding:0 16px; font-size:14px}
.btn[disabled]{background:color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent); color:color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent); opacity:1}
.icon-btn{width:40px; height:40px; color:var(--md-sys-color-on-surface-variant)}
.fab{height:56px; padding:0 20px; border-radius:var(--md-sys-shape-lg); background:var(--md-sys-color-primary-container);
  color:#fff; font-size:14px; font-weight:500; box-shadow:var(--e3)}

/* ── البطاقات: بطاقة الصف في Classroom ── */
.card{border-radius:var(--md-sys-shape-md); border-color:var(--md-sys-color-outline-variant); background:var(--md-sys-color-surface-container-lowest)}
a.card:hover,button.card:hover{box-shadow:var(--e2); transform:none}
.card .card-banner{height:100px; padding:16px; justify-content:flex-start; background:var(--b) var(--art, var(--art-books)) no-repeat left 8px bottom -6px / auto 92%}
.card .card-banner::after{display:none}
.card-banner h3{font-size:22px; line-height:28px; font-weight:500; text-decoration:none}
a.card:hover .card-banner h3{text-decoration:underline; text-underline-offset:4px}
.card-banner p{font-size:14px; opacity:.95}
.card-avatar{position:absolute; inset-inline-end:16px; top:68px; width:64px; height:64px; border-radius:50%; z-index:2;
  display:grid; place-items:center; font-size:26px; font-weight:600; color:#fff; background:var(--b);
  border:3px solid var(--md-sys-color-surface-container-lowest); box-shadow:var(--e1)}
.card:has(.card-avatar) .card-body{padding-top:20px; padding-inline-end:96px; min-height:84px}
.card-foot{border-top-color:var(--md-sys-color-outline-variant); justify-content:flex-end; gap:4px}
.t0{--b:var(--harees-lapis); --art:var(--art-gate)}      .t1{--b:var(--harees-palm); --art:var(--art-palm)}
.t2{--b:var(--harees-terracotta); --art:var(--art-ziggurat)} .t3{--b:var(--harees-turquoise); --art:var(--art-books)}
.t4{--b:var(--harees-date); --art:var(--art-crescent)}  .t5{--b:var(--harees-gold); --art:var(--art-ziggurat)}
.t6{--b:var(--harees-indigo); --art:var(--art-gate)}    .t7{--b:var(--harees-rose); --art:var(--art-palm)}
.card.t0 .card-banner,.card.t1 .card-banner,.card.t2 .card-banner,.card.t3 .card-banner,
.card.t4 .card-banner,.card.t5 .card-banner,.card.t6 .card-banner,.card.t7 .card-banner{background-color:var(--b)}

/* ── بانر «التيار» (Classroom stream header) ── */
.stream{position:relative; overflow:hidden; border-radius:var(--md-sys-shape-sm); min-height:240px; padding:24px;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff; margin-bottom:24px;
  background:var(--b, var(--md-sys-color-primary-container)) var(--art, var(--art-gate)) no-repeat left 24px bottom 0 / auto 88%}
.stream h1{color:#fff; font-size:clamp(28px,4vw,36px); line-height:44px; font-weight:500; margin:0}
.stream .lede,.stream p{color:#fff; opacity:.95}
.stream .eyebrow{color:#fff; opacity:.9}
.stream .chips{margin:16px 0 0}
.stream .chip{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.55); color:#fff}
.stream .sponsor-line,.stream .subject-about{color:var(--md-sys-color-on-surface)}
.stream .bar{background:rgba(255,255,255,.3)} .stream .bar i{background:#fff}
.stream + .muted{margin-top:-12px}

/* الغلاف في الرئيسية = تيار بلازورد عشتار وذهبها */
.hero{border-radius:var(--md-sys-shape-sm); min-height:260px; padding:32px;
  background:var(--md-sys-color-primary-container) var(--art-gate) no-repeat left 32px bottom 0 / auto 90%}
.hero::before{background:radial-gradient(circle, rgba(255,221,186,.28), transparent 65%); box-shadow:none; width:420px; height:420px; top:-180px; inset-inline-start:-120px}
.hero::after{display:none} .hero .frost{display:none}
.hero .eyebrow{color:var(--md-sys-color-tertiary-fixed); opacity:1}
.hero .lede{color:var(--md-sys-color-on-primary-container)}
.hero .tagline{color:var(--md-sys-color-tertiary-fixed)}

/* ── الرقائق (M3 assist / filter chips) ── */
.chip{height:32px; padding:0 16px; border-radius:var(--md-sys-shape-sm); border:1px solid var(--md-sys-color-outline);
  font-size:14px; font-weight:500; color:var(--md-sys-color-on-surface-variant); background:transparent}
.chip svg{width:18px; height:18px; color:var(--md-sys-color-primary)}
.chip[aria-current="true"],.chip[aria-pressed="true"]{background:var(--md-sys-color-secondary-container); border-color:transparent; color:var(--md-sys-color-on-secondary-container)}

/* ── أزرار مجزّأة (M3 segmented buttons) ── */
.seg{height:40px; padding:0; border-color:var(--md-sys-color-outline); background:transparent; overflow:hidden}
.seg button{height:100%; border-radius:0; padding:0 16px; font-size:14px; font-weight:500; color:var(--md-sys-color-on-surface);
  border-inline-start:1px solid var(--md-sys-color-outline)}
.seg button:first-child{border-inline-start:none}
.seg button[aria-pressed="true"]{background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}
.seg button[aria-pressed="true"]::before{content:"✓ "}

/* ── تبويبا الكورسين (M3 primary tabs كما في Classroom) ── */
.course-switch{display:flex; height:48px; border:none; border-radius:0; border-bottom:1px solid var(--md-sys-color-outline-variant);
  background:transparent; margin-bottom:16px; width:100%}
.course-switch button{flex:0 0 auto; border:none !important; padding:0 24px; position:relative; color:var(--md-sys-color-on-surface-variant); background:transparent !important}
.course-switch button[aria-pressed="true"]{color:var(--md-sys-color-primary)}
.course-switch button[aria-pressed="true"]::before{content:none}
.course-switch button[aria-pressed="true"]::after{content:""; position:absolute; inset-inline:12px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:var(--md-sys-color-primary)}

/* ── القوائم ── */
.row{border-radius:var(--md-sys-shape-md); border-color:var(--md-sys-color-outline-variant); background:var(--md-sys-color-surface-container-lowest)}
.row .idx{border-radius:50%; background:var(--md-sys-color-primary-fixed); color:var(--md-sys-color-on-primary-fixed)}
.row .idx.seq,.text-row .seq{background:var(--md-sys-color-tertiary-fixed); color:var(--md-sys-color-on-tertiary-fixed)}

/* ── حقول النص (M3 outlined text field) ── */
.field input,.field select,.field textarea,.dlg input,.dlg select{min-height:56px; border-radius:var(--md-sys-shape-xs);
  border:1px solid var(--md-sys-color-outline); background:transparent; font-size:16px}
.field textarea{min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus,.dlg input:focus,.dlg select:focus{
  border-color:var(--md-sys-color-primary); box-shadow:inset 0 0 0 1px var(--md-sys-color-primary)}
.field label,.dlg label{font-size:12px; font-weight:500; color:var(--md-sys-color-on-surface-variant)}

/* ── الحوارات (M3 dialog) ── */
.dlg{border-radius:var(--md-sys-shape-xl); background:var(--md-sys-color-surface-container-high); box-shadow:var(--e3)}
.dlg-in{padding:24px}
.dlg h2{font-size:24px; line-height:32px; font-weight:400}
.dlg::backdrop{background:color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent)}
.dlg-actions{justify-content:flex-end}

/* ── الإشعار السفلي (M3 snackbar) ── */
.toast{background:var(--md-sys-color-inverse-surface); color:var(--md-sys-color-inverse-on-surface);
  border-radius:var(--md-sys-shape-xs); font-size:14px; line-height:20px; padding:14px 16px; box-shadow:var(--e3)}
.toast .link,.toast button{color:var(--md-sys-color-inverse-primary)}

/* ── حالات فارغة، تنبيهات، تذييل ── */
.empty{border-radius:var(--md-sys-shape-md); border-color:var(--md-sys-color-outline-variant); background:var(--md-sys-color-surface-container-low)}
.empty .ico{background:var(--md-sys-color-primary-fixed); color:var(--md-sys-color-on-primary-fixed); border-radius:50%}
.notice,.warn{border-radius:var(--md-sys-shape-md)}
.foot{background:var(--md-sys-color-surface-container-low); border-top-color:var(--md-sys-color-outline-variant)}
.fatiha{background:var(--md-sys-color-inverse-surface); color:var(--md-sys-color-inverse-on-surface)}
.fatiha::after{content:""; position:absolute; inset-inline:0; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--md-sys-color-tertiary-fixed), var(--md-sys-color-primary-container), var(--md-sys-color-tertiary-fixed))}
.pill{border-radius:var(--md-sys-shape-sm); background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}
.tt-day,.mark-card,.card.plain{border-radius:var(--md-sys-shape-md)}
.tt-day.today{border-color:var(--md-sys-color-primary-container); box-shadow:0 0 0 2px var(--md-sys-color-primary-fixed)}
.tt-day time,.today-list time{color:var(--md-sys-color-primary)}
.tt-day li.next,.next-up{background:var(--md-sys-color-tertiary-fixed); color:var(--md-sys-color-on-tertiary-fixed)}
.rep .avatar{background:var(--md-sys-color-primary-container)}
.class-code{background:var(--md-sys-color-primary-fixed); color:var(--md-sys-color-on-primary-fixed); border-radius:var(--md-sys-shape-sm)}
.today-cta{border-inline-start:none; background:var(--md-sys-color-tertiary-fixed); color:var(--md-sys-color-on-tertiary-fixed); border:none}
.today-cta .muted{color:var(--md-sys-color-on-tertiary-fixed)}
.iraq-map path:hover{fill:var(--md-sys-color-primary-fixed)}
.iraq-map path.has:not(.on){fill:var(--md-sys-color-primary-fixed)}
.iraq-map path.on{fill:var(--md-sys-color-primary-container)}

/* ── شريط التنقل السفلي (M3 navigation bar) ── */
@media (max-width:820px){
  .bottom-nav{height:auto; background:var(--md-sys-color-surface-container); border-top:none; backdrop-filter:none}
  .bottom-nav a{min-height:80px; gap:4px; padding:12px 0 16px; font-size:12px; font-weight:500; color:var(--md-sys-color-on-surface-variant)}
  .bottom-nav svg{width:64px; height:32px; padding:4px 20px; border-radius:16px}
  .bottom-nav a[aria-current="page"]{color:var(--md-sys-color-on-surface); font-weight:600}
  .bottom-nav a[aria-current="page"] svg{background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .fab{inset-block-end:calc(96px + env(safe-area-inset-bottom))}
  .toast{inset-block-end:calc(96px + env(safe-area-inset-bottom))}
  .stream,.hero{min-height:180px; padding:20px; background-size:auto 64%}
  .appbar-in{gap:8px 4px}
  #contribBtn{display:none}   /* على الهاتف الزر العائم يكفي، كما في Classroom */
}
.appbar-nav .nav-link{display:none}

/* ── المصطلحات ── */
.terms-grid div{display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; align-items:baseline}
.terms-grid small{grid-column:1 / -1; font-size:12px}
/* ── ميمون (النسخة المصغّرة): ما يخص كل الجامعات لا يظهر ── */
:is(html[data-mini],html[data-focus]) .foot-links a[href="#/biz"],:is(html[data-mini],html[data-focus]) .foot-links a[href="#/top"],
:is(html[data-mini],html[data-focus]) .foot-links a[href="#/ambassador"],:is(html[data-mini],html[data-focus]) .appbar-nav a[href="#/biz"]{display:none}

/* ── الإشعار المخفي لا يطلّ فوق الشريط السفلي (كان مربعاً داكناً فوق «الرئيسية» على كل هاتف) ── */
.toast{visibility:hidden; opacity:0; transition:transform var(--d-med) var(--emph-dec), opacity var(--d-short), visibility 0s linear var(--d-med)}
.toast.on{visibility:visible; opacity:1; transition:transform var(--d-med) var(--emph-dec), opacity var(--d-short)}

/* ══ يومك ══ */
.day .section-head{align-items:baseline}
.day-card{padding:20px}
.day-status{margin:0; font-size:18px; line-height:30px; color:var(--md-sys-color-on-surface)}
.day-status strong{font-weight:600}
.day-status .muted{font-size:15px; line-height:26px}
.day-card.relax{background:var(--md-sys-color-tertiary-fixed); border-color:transparent; color:var(--md-sys-color-on-tertiary-fixed)}
.day-card.relax .day-status,.day-card.relax .muted{color:var(--md-sys-color-on-tertiary-fixed)}
.day-next{margin:18px 0 6px; color:var(--md-sys-color-on-surface-variant)}
.day-card.relax .day-next{color:var(--md-sys-color-on-tertiary-fixed)}
.day-list{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:4px}
.day-card.relax .day-list{margin-top:0}
.day-list a,.day-list li > div{display:flex; align-items:center; gap:14px; min-height:52px; padding:6px 12px;
  border-radius:var(--md-sys-shape-sm); color:inherit; text-decoration:none}
.day-list a:hover{background:color-mix(in oklab, var(--md-sys-color-on-surface) 6%, transparent)}
.day-list time{flex:0 0 72px; font-weight:600; color:var(--md-sys-color-primary)}
.day-list .grow{display:flex; flex-direction:column; min-width:0}
.day-list small{font-size:13px; color:var(--md-sys-color-on-surface-variant)}
.day-list li.past{opacity:.62}
.day-list li.past strong{font-weight:500}
.day-list .tick svg{width:20px; height:20px; color:var(--md-sys-color-primary)}
.day-list li.now a,.day-list li.now > div{background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}
.now-pill{background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); font-weight:600}
.day-card.relax time{color:var(--md-sys-color-on-tertiary-fixed)}

/* ══ أخبار الدفعة ══ */
.news-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.news-item{display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-md); background:var(--md-sys-color-surface-container-lowest);
  transition:opacity .24s var(--standard), transform .24s var(--standard)}
.news-item.leaving{opacity:0; transform:translateX(-12px)}
html[dir="rtl"] .news-item.leaving{transform:translateX(12px)}
.news-item details{flex:1; min-width:0}
.news-item summary{list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding-block:6px; min-height:28px}
.news-item summary::-webkit-details-marker{display:none}
.news-item summary strong{font-weight:500; line-height:24px}
.news-item summary small{font-size:13px}
.news-item details[open] summary strong{font-weight:600}
.news-item details p{margin:8px 0 2px; white-space:pre-line; color:var(--md-sys-color-on-surface-variant); line-height:26px}
.news-tick{flex:0 0 auto; width:40px; height:40px; margin-top:2px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  border:2px solid var(--md-sys-color-outline); background:transparent; color:transparent;
  transition:background-color .18s var(--standard), border-color .18s var(--standard), color .18s var(--standard)}
.news-tick svg{width:22px; height:22px}
.news-tick:hover{border-color:var(--md-sys-color-primary); color:color-mix(in oklab, var(--md-sys-color-primary) 45%, transparent)}
.news-tick[aria-pressed="true"],.news-item.leaving .news-tick{background:var(--md-sys-color-primary); border-color:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary)}
.news-item.is-done{background:transparent}
.news-item.is-done summary strong{color:var(--md-sys-color-on-surface-variant)}
.news-clear{display:flex; align-items:center; gap:10px; margin:0; background:var(--md-sys-color-surface-container-low)}
.news-clear svg{width:22px; height:22px; color:var(--md-sys-color-primary); flex:0 0 auto}
.news-closed{margin-top:10px}
.news-closed > summary{cursor:pointer; padding:10px 4px; font-size:14px; font-weight:500; color:var(--md-sys-color-primary); min-height:44px; display:flex; align-items:center}
.news-note{margin:10px 2px 0}

/* ══ جدول الأسبوع مطويّاً ══ */
.week > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:56px; padding:0 16px; border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--md-sys-shape-md);
  background:var(--md-sys-color-surface-container-lowest)}
.week > summary::-webkit-details-marker{display:none}
.week > summary h2{margin:0; font-size:18px; display:flex; align-items:center}
.week > summary::after{content:""; width:10px; height:10px; border:solid var(--md-sys-color-on-surface-variant); border-width:0 2px 2px 0;
  transform:rotate(45deg); margin-block-end:4px; transition:transform .2s var(--standard)}
.week[open] > summary::after{transform:rotate(-135deg); margin-block-end:-4px}
.week > summary .muted{margin-inline-start:auto}
.week[open] > summary{border-end-start-radius:0; border-end-end-radius:0}
.week .timetable{border:1px solid var(--md-sys-color-outline-variant); border-top:none; padding:16px;
  border-end-start-radius:var(--md-sys-shape-md); border-end-end-radius:var(--md-sys-shape-md)}
.tt-file{margin:0 0 8px}

/* ══ صفحة المادة والبطاقات ══ */
.next-lecture{display:flex; align-items:center; gap:8px; margin:12px 0 0; font-size:15px}
.next-lecture svg{width:18px; height:18px; flex:0 0 auto}
.card-foot span{display:inline-flex; align-items:center; gap:6px}
.card-foot span svg{width:16px; height:16px; color:var(--md-sys-color-primary)}
.tools .chips{margin:0}

@media (max-width:820px){
  /* رسم البانر في الزاوية العليا، بعيداً عن النص والأزرار */
  .stream{background-position:left 12px top 12px; background-size:auto 44%}
  .day-card{padding:16px}
  .day-status{font-size:17px; line-height:28px}
  .day-list time{flex-basis:64px}
}
@media (prefers-reduced-motion: reduce){
  .news-item,.news-tick,.week > summary::after{transition:none}
}
.day-list time{white-space:nowrap; flex-basis:80px}
.seg-sm{height:32px}
.seg-sm button{padding:0 12px; font-size:13px}
.seg-sm button[aria-pressed="true"]::before{content:none}
.section-head h2 .muted{font-weight:400; margin-inline-start:6px}
.today-more{margin:12px 0 0}
@media (max-width:820px){ .day-list time{flex-basis:76px} }
@media (max-width:480px){ .stream{background-image:none} }

/* ── الهاتف: الشريط العلوي يمرّ مع الصفحة (الشريط السفلي يكفي للتنقل)؛ كان 219 من 844px لا يتحرك ── */
@media (max-width:820px){
  .appbar{position:relative}
  .fatiha-in{padding:8px 16px; font-size:13px; line-height:1.7; gap:2px 10px}
}
/* اللمس: أهداف 44px على الأقل */
/* اللمس: الشكل يبقى بمقاس Material، وهدف اللمس 48 يأتي من ::after في طبقة المطابقة */
@media (pointer:coarse){
  .crumbs a{display:inline-block; padding-block:10px}
}
.tt-day time{font-size:15px}
.card-foot{font-size:14px}
.codes .row p{white-space:normal; overflow:visible; text-overflow:clip}
.terms-more{margin-top:8px}
.subject-empty{margin:0}

/* الحركة على قدر تكرارها: التنقل أكثر ما يفعله الطالب، فالدخول يستقر في أقل من نصف ثانية */
@keyframes settle{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.stagger>*{animation:settle .28s var(--emph-dec) both; animation-delay:calc(var(--i,0)*30ms)}
.reveal{transform:translateY(10px)}
.reveal.in{transition:opacity .35s var(--emph-dec), transform .35s var(--emph-dec)}

/* أول رسم: لا يقفز التذييل حين يُرسم المحتوى (CLS سطح المكتب كان حتى 0.21) */
#app{min-height:calc(100vh - 140px)}
/* رقاقة على البانر: خلفية أعتم ليبقى الأبيض مقروءاً فوق أفتح جزء من اللون */
.stream .chip{background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.6)}

/* نص أصله عربي (ترجمة من العربية إلى الإنجليزية): العربي هو «الأصل» */
.parallel.src-ar .src{font-family:var(--ff-read); font-size:1.125rem; text-align:right; color:inherit}
.parallel.src-ar .tgt{font-family:var(--ff-en); font-size:1rem; text-align:left; color:var(--md-sys-color-on-surface)}

/* ═══ حساب الطالب ببريد الجامعة ═══ */
.perks{list-style:none; margin:16px 0 4px; padding:0; display:grid; gap:14px}
.perks li{display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start}
.perks li > svg{width:40px; height:40px; padding:9px; box-sizing:border-box; border-radius:50%;
  background:var(--md-sys-color-primary-fixed); color:var(--md-sys-color-on-primary-fixed); stroke:currentColor; fill:none; stroke-width:1.8}
.perks strong{display:block; font-size:15px; line-height:22px; font-weight:500; color:var(--md-sys-color-on-surface)}
.perks span{font-size:14px; line-height:20px; color:var(--md-sys-color-on-surface-variant)}
.fine{margin:10px 0 0; line-height:1.7}
.dlg-actions.split{justify-content:space-between; flex-wrap:wrap}
.google-btn[aria-busy="true"]{opacity:.75}
.verified-mail{display:inline-flex; align-items:center; gap:6px; margin:4px 0 16px; padding:6px 12px; border-radius:var(--r-full);
  background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); font-size:14px; max-width:100%}
.verified-mail svg{width:16px; height:16px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2.2}
.verified-mail span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.locked{display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:var(--md-sys-shape-md);
  border:1px solid var(--md-sys-color-outline-variant); background:var(--md-sys-color-surface-container-low)}
.locked svg{width:22px; height:22px; flex:0 0 auto; stroke:var(--md-sys-color-primary); fill:none; stroke-width:1.8}
.locked span{display:flex; flex-direction:column; font-size:13px; color:var(--md-sys-color-on-surface-variant)}
.locked strong{font-size:15px; font-weight:500; color:var(--md-sys-color-on-surface)}
.seg.wrap{display:flex; gap:8px; border:none; padding:0; background:none; height:auto; overflow:visible}
.seg.wrap button{min-height:44px; padding:0 16px; border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--md-sys-shape-sm, 8px)}
.seg.wrap button[aria-pressed="true"]{border-color:transparent}

/* بحث القسم: القائمة تنزل تحت الحقل مباشرة، والخيار يُختار باللمس أو بالأسهم */
.combo{position:relative}
.combo-list{list-style:none; margin:4px 0 0; padding:4px; border-radius:var(--md-sys-shape-md); max-height:min(320px, 42dvh); overflow:auto;
  background:var(--md-sys-color-surface-container-lowest); border:1px solid var(--md-sys-color-outline-variant); box-shadow:var(--e2);
  overscroll-behavior:contain}
.combo-list li{display:flex; flex-direction:column; gap:2px; padding:10px 12px; min-height:44px; justify-content:center;
  border-radius:var(--md-sys-shape-sm, 8px); cursor:pointer; -webkit-tap-highlight-color:transparent}
.combo-list li strong{font-size:15px; font-weight:500}
.combo-list li span{font-size:13px; color:var(--md-sys-color-on-surface-variant)}
.combo-list li[aria-selected="true"],.combo-list li:hover{background:var(--md-sys-color-surface-container-high)}
.combo-list .combo-add{flex-direction:row; align-items:center; gap:10px; color:var(--md-sys-color-primary)}
.combo-list .combo-add svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2}
.combo-list .combo-add span{color:inherit; font-size:14px}
.combo-list .combo-note{cursor:default; color:var(--md-sys-color-on-surface-variant); font-size:14px}

.welcome{text-align:center}
.welcome .perks{text-align:start}
.welcome-mark{display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%; margin:4px auto 12px;
  background:var(--md-sys-color-primary-fixed); color:var(--md-sys-color-on-primary-fixed); animation:pop .45s var(--emph-dec) both}
.welcome-mark svg{width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:2.4}
@keyframes pop{from{transform:scale(.6); opacity:0}}
.welcome .dlg-actions{justify-content:center}

.nudge{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-block:16px}
.nudge .grow{flex:1 1 220px; min-width:0}
.nudge .grow p{margin:4px 0 0}
.nudge-ico svg{width:40px; height:40px; padding:9px; box-sizing:border-box; border-radius:50%;
  background:var(--md-sys-color-primary-fixed); color:var(--md-sys-color-on-primary-fixed); stroke:currentColor; fill:none; stroke-width:1.8}
.nudge-acts{display:flex; gap:4px; align-items:center}

/* الهاتف: كل نافذة صفحة سفلية، تنزلق من الأسفل وتترك مكان الإبهام للأزرار */
@media (max-width:600px){
  .dlg{margin:auto 0 0; width:100%; max-width:none; max-height:92dvh; border-radius:28px 28px 0 0;
    padding-bottom:env(safe-area-inset-bottom)}
  .dlg[open]{animation:sheetUp .32s var(--emph-dec)}
  .dlg-in{padding:12px 16px 16px}
  .dlg-in::before{content:""; display:block; width:32px; height:4px; border-radius:2px; margin:0 auto 14px;
    background:var(--md-sys-color-outline-variant)}
  .dlg h2{font-size:22px; line-height:28px}
  .sheet-foot{position:sticky; bottom:0; z-index:1; margin:16px -16px -16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--md-sys-color-surface-container-high); border-top:1px solid var(--md-sys-color-outline-variant)}
  .sheet-foot .btn:not(.text){flex:1; height:48px}
  .dlg-actions.split{flex-direction:column-reverse; align-items:stretch}
  .nudge-acts{width:100%}
  .nudge-acts .btn:not(.text){flex:1}
}
@keyframes sheetUp{from{transform:translateY(100%)}}
/* زر Google بألوانه المعتمدة: أبيض بحد رمادي، لا لون الموقع */
.dlg .google-btn{height:52px; background:#fff; color:#1f1f1f; border:1px solid var(--md-sys-color-outline); box-shadow:none; font-size:15px}
.dlg .google-btn:hover{background:#f8f9fa; box-shadow:var(--e1)}
/* حقل dir=auto فارغ يُحسب يساري الاتجاه فيلتصق التلميح العربي باليسار. فارغاً يبدأ من اليمين؛ وحين يُكتب فيه يتبع لغة الكتابة */
input[dir="auto"]:placeholder-shown{direction:rtl; text-align:right}
.lede .mail{overflow-wrap:anywhere}


/* ═══════════════ طبقة المطابقة: Google Material 3 ═══════════════
   المصدر: رموز Material 3 الرسمية v34.0.21 (material-web tokens/versions/latest، 2026). كل قيمة هنا رمز من تلك
   الملفات، والمقارنة الآلية في scripts/m3-audit.mjs. تأتي آخراً لتغلب الطبقات السابقة. */
:root{
  /* md.sys.typescale */
  --t-display-small:400 36px/44px var(--ff);    --t-display-small-tr:0;
  --t-headline-large:400 32px/40px var(--ff);   --t-headline-medium:400 28px/36px var(--ff); --t-headline-small:400 24px/32px var(--ff);
  --t-title-large:400 22px/28px var(--ff);      --t-title-medium:500 16px/24px var(--ff);    --t-title-small:500 14px/20px var(--ff);
  --t-body-large:400 16px/24px var(--ff);       --t-body-medium:400 14px/20px var(--ff);     --t-body-small:400 12px/16px var(--ff);
  --t-label-large:500 14px/20px var(--ff);      --t-label-medium:500 12px/16px var(--ff);    --t-label-small:500 11px/16px var(--ff);
  /* md.sys.elevation */
  --e4:0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);
  /* md.sys.state.focus-indicator */
  --focus:var(--md-sys-color-secondary);
}
:focus-visible{outline:3px solid var(--md-sys-color-secondary); outline-offset:2px}

/* الطباعة: كل عنصر على دوره */
body{font:var(--t-body-large); letter-spacing:.5px}
h1{font:var(--t-headline-large); letter-spacing:0}
h2{font:var(--t-title-large); letter-spacing:0}
h3{font:var(--t-title-medium); letter-spacing:.15px}
.lede{font:var(--t-body-large); letter-spacing:.5px}
.label,.eyebrow{font:var(--t-label-medium); letter-spacing:.5px}
.sm,.muted.sm,small{font:var(--t-body-medium); letter-spacing:.25px}
.crumbs,.crumbs a,.crumbs span{font:var(--t-body-medium); letter-spacing:.25px}
.stream h1,.hero h1{font:var(--t-display-small); line-height:44px}
/* اللغات «الطويلة» (العربية) في الفقرات الطويلة: سطر أعلى، كما توصي إرشادات Material للغات */
.pair .tgt,.pair .src:lang(ar),.day-status,.news-item details p,.notes{line-height:28px}

/* شريط التطبيق: small top app bar 64، وشريط البحث 56. على الهاتف ينزل البحث إلى سطر ثانٍ،
   فالارتفاع الثابت كان يتركه يطفو فوق رأس كل صفحة (بقي من نسخة M3 في 56763e6). */
@media (min-width:821px){.appbar-in{height:64px}}
@media (max-width:820px){.appbar-in{height:auto; min-height:64px; padding-block:4px 12px}}
.search input{height:56px; border-radius:9999px; background:var(--md-sys-color-surface-container-high);
  font:var(--t-body-large); letter-spacing:.5px; padding-inline:52px 16px; border:none}
.search > svg{width:24px; height:24px; inset-inline-start:16px}
.search kbd{display:none}
.nav-link{font:var(--t-label-large); letter-spacing:.1px}

/* الأزرار: common buttons (S = 40، XS = 32 في Expressive) */
.btn{height:40px; min-height:40px; padding:0 24px; border-radius:9999px; font:var(--t-label-large); letter-spacing:.1px; overflow:visible}
.btn::before{border-radius:inherit}
.btn:has(svg){padding-inline:16px 24px; gap:8px}
.btn svg{width:18px; height:18px}
.btn.text{padding:0 12px}
.btn.sm{height:32px; min-height:32px; padding:0 12px; font:var(--t-label-large)}
.btn:active::before{opacity:var(--state-press)}
.btn:focus-visible::before{opacity:var(--state-focus)}
/* هدف اللمس 48×48 مهما صغر الشكل (md.sys: minimum touch target) */
:is(.btn, .chip, .icon-btn, .seg:not(.course-switch) button, .news-tick, .account-btn){position:relative}
:is(.btn, .chip, .icon-btn, .seg:not(.course-switch) button, .news-tick, .account-btn)::after{content:""; position:absolute; left:50%; top:50%;
  width:max(100%, 48px); height:max(100%, 48px); transform:translate(-50%, -50%)}
/* icon button standard: حاوية 40، أيقونة 24 */
.icon-btn{width:40px; height:40px; border-radius:9999px}
.icon-btn svg{width:24px; height:24px}
/* extended FAB: 56، زاوية 16، أيقونة 24، مسافات 16/20/12، primary-container */
.fab{height:56px; padding:0 20px 0 16px; gap:12px; border-radius:16px; font:var(--t-label-large); letter-spacing:.1px;
  background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); box-shadow:var(--e3)}
.fab:hover{box-shadow:var(--e4)}
.fab svg{width:24px; height:24px}

/* شريط التنقل السفلي: navigation bar 80، مؤشر 64×32، تسمية label-medium (700 للنشطة) */
@media (max-width:820px){
  .bottom-nav{background:var(--md-sys-color-surface-container); box-shadow:var(--e2)}
  .bottom-nav a{min-height:80px; height:80px; padding:12px 0 16px; gap:4px; font:var(--t-label-medium); letter-spacing:.5px}
  .bottom-nav svg{width:64px; height:32px; padding:4px 20px; border-radius:9999px; box-sizing:border-box}
  .bottom-nav a[aria-current="page"]{font-weight:700}
}

/* درج التنقل: navigation drawer 360، عنصر 56، مؤشر بعرض 336 */
.drawer{width:min(360px, calc(100vw - 56px)); padding:12px 12px 24px; background:var(--md-sys-color-surface-container-low)}
.drawer a{min-height:56px; padding:0 24px 0 16px; font:var(--t-label-large); letter-spacing:.1px; color:var(--md-sys-color-on-surface-variant)}
html[dir="rtl"] .drawer a{padding:0 16px 0 24px}
.drawer a[aria-current="page"]{font-weight:700; color:var(--md-sys-color-on-secondary-container)}
.drawer a svg{width:24px; height:24px}
.drawer .drawer-label{font:var(--t-title-small); letter-spacing:.1px; margin:16px 16px 8px}
.drawer .sub{line-height:20px}
.drawer .sub small{font:var(--t-body-small); letter-spacing:.4px}
.drawer-head strong{font:var(--t-title-large)}
@media (min-width:1280px){
  body.drawer-docked .drawer{width:360px; background:var(--md-sys-color-surface)}
  body.drawer-docked main.wrap{margin-inline:360px 0}
  body.drawer-docked .foot{margin-inline-start:360px}
}

/* البطاقات: outlined card (surface + outline-variant)، زاوية 12، تحويم = رفع level1 */
.card{border-radius:12px; background:var(--md-sys-color-surface); border:1px solid var(--md-sys-color-outline-variant)}
a.card:hover,button.card:hover{box-shadow:var(--e1)}
.card-banner h3{font:var(--t-title-large); letter-spacing:0}
.card-banner p,.card-body p{font:var(--t-body-medium); letter-spacing:.25px}
.card-foot{font:var(--t-body-medium); letter-spacing:.25px}
.card-avatar{border-color:var(--md-sys-color-surface)}

/* الرقائق: assist / filter chip 32، زاوية 8، حدّ outline-variant، أيقونة 18 */
.chip{height:32px; min-height:32px; padding:0 16px; gap:8px; border-radius:8px; border:1px solid var(--md-sys-color-outline-variant);
  font:var(--t-label-large); letter-spacing:.1px; color:var(--md-sys-color-on-surface-variant)}
.chip:has(svg){padding-inline:8px 16px}
.chip svg{width:18px; height:18px}
.chip[aria-pressed="true"],.chip[aria-current="true"]{border-color:transparent; background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}

/* الأزرار المجزّأة: outlined segmented button 40، شكل كامل، علامة اختيار 18 */
.seg{height:40px; border-radius:9999px; border:1px solid var(--md-sys-color-outline); overflow:hidden}
.seg button{height:40px; min-height:40px; padding:0 12px; font:var(--t-label-large); letter-spacing:.1px; color:var(--md-sys-color-on-surface)}
.seg button[aria-pressed="true"]{background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}
.seg button[aria-pressed="true"]::before{content:""; display:inline-block; width:18px; height:18px; margin-inline-end:8px; vertical-align:-4px;
  background:currentColor; opacity:1; position:static;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.seg-sm{height:40px} .seg-sm button{height:40px; padding:0 12px; font:var(--t-label-large)}

/* التبويب الأساسي: primary tab 48، title-small، مؤشر 3px */
.course-switch{height:48px; box-sizing:content-box}
.course-switch button{height:48px; min-height:48px; padding:0 16px; font:var(--t-title-small); letter-spacing:.1px}

/* القوائم: Expressive list، عنصر سطرين 72، المسافات 16/10، الصورة الأمامية 40 */
.list{gap:2px}
.row{min-height:72px; padding:10px 16px; gap:16px; border-radius:4px; border:none; box-shadow:none;
  background:var(--md-sys-color-surface-container-low)}
.list > .row:first-child{border-start-start-radius:16px; border-start-end-radius:16px}
.list > .row:last-child{border-end-start-radius:16px; border-end-end-radius:16px}
.list > .row:only-child{border-radius:16px}
.row:hover{box-shadow:none} .row:hover::after{opacity:var(--state-hover)}
.row h3{font:var(--t-body-large); letter-spacing:.5px; margin:0}
.row p{font:var(--t-body-medium); letter-spacing:.25px; color:var(--md-sys-color-on-surface-variant)}
.row .idx{width:40px; height:40px}
.row.done{background:var(--md-sys-color-secondary-container)}

/* حقول النص: outlined text field 56، زاوية 4، التسمية عائمة على الحدّ (body-small)، الإدخال body-large */
.field{position:relative}
.field > label:not(:has(input, select, textarea)){position:absolute; top:-8px; inset-inline-start:12px; z-index:1; padding:0 4px; pointer-events:none;
  font:var(--t-body-small); letter-spacing:.4px; color:var(--md-sys-color-on-surface-variant); background:var(--field-notch, var(--md-sys-color-surface))}
.field:focus-within > label{color:var(--md-sys-color-primary)}
.field input,.field select,.field textarea,.dlg input,.dlg select{min-height:56px; padding:16px; border-radius:4px; font:var(--t-body-large); letter-spacing:.5px;
  border:1px solid var(--md-sys-color-outline); background:transparent; color:var(--md-sys-color-on-surface); caret-color:var(--md-sys-color-primary)}
.field select{padding-block:0}
.field input:focus,.field select:focus,.field textarea:focus,.dlg input:focus,.dlg select:focus{outline:none; border-color:var(--md-sys-color-primary); box-shadow:inset 0 0 0 1px var(--md-sys-color-primary)}
.field [aria-invalid="true"]{border-color:var(--md-sys-color-error); box-shadow:inset 0 0 0 1px var(--md-sys-color-error)}
.field .err,.field .hint{font:var(--t-body-small); letter-spacing:.4px; padding-inline:16px; margin-top:4px}
.field .err{color:var(--md-sys-color-error)}
.dlg{--field-notch:var(--md-sys-color-surface-container-high)}
.card{--field-notch:var(--md-sys-color-surface)}
.field:has(> label) {margin-top:8px}

/* الحوار: dialog 28، surface-container-high، العنوان headline-small، النص body-medium */
.dlg h2{font:var(--t-headline-small); letter-spacing:0}
.dlg p{font:var(--t-body-medium); letter-spacing:.25px}
/* على الهاتف الحوار صفحة سفلية: bottom sheet (surface-container-low، مقبض 32×4) */
@media (max-width:600px){
  .dlg{background:var(--md-sys-color-surface-container-low); --field-notch:var(--md-sys-color-surface-container-low); box-shadow:var(--e1)}
  .dlg-in::before{width:32px; height:4px; border-radius:9999px; margin:6px auto 16px; background:var(--md-sys-color-on-surface-variant); opacity:.4}
  .sheet-foot{background:var(--md-sys-color-surface-container-low)}
}

/* الإشعار: snackbar، سطر واحد 48 */
.toast{min-height:48px; display:flex; align-items:center; font:var(--t-body-medium); letter-spacing:.25px; border-radius:4px}

/* الشارة: large badge 16، label-small */
.icon-btn .badge{min-width:16px; height:16px; padding:0 4px; border-radius:9999px; font:var(--t-label-small); letter-spacing:.5px;
  background:var(--md-sys-color-error); color:var(--md-sys-color-on-error); top:2px; inset-inline-end:2px; display:grid; place-items:center}
.icon-btn .badge[hidden]{display:none}

/* مؤشر التقدم الخطي: 4، مسار secondary-container */
.bar{height:4px; border-radius:9999px; background:var(--md-sys-color-secondary-container)}
.bar i{background:var(--md-sys-color-primary)}

/* البطاقات الملوّنة: لا حدّ جانبي ملوّن (ليس في Material) */
.today-cta{border:none}
.pill{font:var(--t-label-medium); letter-spacing:.5px; border-radius:8px; height:24px; padding:0 8px; display:inline-flex; align-items:center}

.ripple-box{position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:0}
:is(.btn, .chip, .icon-btn, .fab){overflow:visible}
/* الصفوف: طبقة الحالة */
.row::after{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--md-sys-color-on-surface); opacity:0; pointer-events:none;
  transition:opacity var(--d-short) var(--standard)}
/* التبويب ليس زراً مجزّأً: بلا إطار ولا علامة */
.course-switch{border:none; border-radius:0; border-bottom:1px solid var(--md-sys-color-outline-variant); overflow:visible}
.course-switch button[aria-pressed="true"]::before{content:none}

/* حقل نص سطر واحد: 56 بالضبط، والنص في الوسط */
.field input:not([type=checkbox]):not([type=radio]),.field select,.dlg input:not([type=checkbox]):not([type=radio]),.dlg select{height:56px; min-height:56px; padding-block:0}
/* الرقائق على البانر الملوّن: نفس المقاسات، وألوان «على اللون» (on-primary) بدل الحدّ الرمادي */
.stream .chip,.hero .chip{border-color:rgba(255,255,255,.6); color:#fff; background:transparent}
.stream .chip svg,.hero .chip svg{color:#fff}

/* زر Google: النسخة الداكنة من إرشادات علامته (#131314، نص #e3e3e3) */
:root[data-theme="dark"] .dlg .google-btn{background:#131314; color:#e3e3e3; border-color:#8e918f}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .dlg .google-btn{background:#131314; color:#e3e3e3; border-color:#8e918f} }
/* اختيار المظهر في القائمة: أزرار مجزّأة */
.theme-pick{margin:8px 16px 0}
.theme-pick .seg{width:100%; display:flex}
.theme-pick .seg button{flex:1}
/* على سطح ثابت (tertiary-fixed) كل نص بلون «على الثابت»، في الوضعين: الرمادي العام يختفي على الخوخي في الداكن */
.day-card.relax,.today-cta{color:var(--md-sys-color-on-tertiary-fixed)}
/* .card (سطر 1339) يأتي بعد .today-cta بنفس الثقل فيمحو الخوخي: في الداكن بقي النص البني على سطح أسود (1.2:1) */
.card.today-cta{background:var(--md-sys-color-tertiary-fixed)}
.day-card.relax :is(.muted, small, .day-next, time, .label),.today-cta :is(.muted, small, p){color:var(--md-sys-color-on-tertiary-fixed-variant)}
.day-card.relax strong,.today-cta h2{color:var(--md-sys-color-on-tertiary-fixed)}
/* شريط الفاتحة في الداكن: أعلى حاوية سطح، لا السطح المعكوس الفاتح */
:root[data-theme="dark"] .fatiha{background:var(--md-sys-color-surface-container-highest); color:var(--md-sys-color-on-surface)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .fatiha{background:var(--md-sys-color-surface-container-highest); color:var(--md-sys-color-on-surface)} }

/* ── تجهيز الجهاز: snackbar بسطرين (M3) مع إجراء وزر إغلاق ──
   السطح المعكوس كالتنبيه، والإجراء بـ inverse-primary. على الهاتف فوق الزر العائم وشريط التنقل. */
.setup-toast{position:fixed; inset-block-end:24px; inset-inline-start:24px; z-index:110;
  display:flex; align-items:center; gap:4px 12px; min-height:68px; width:min(560px,calc(100vw - 48px));
  padding-block:12px; padding-inline:16px 4px; border-radius:var(--md-sys-shape-xs, 4px);
  background:var(--md-sys-color-inverse-surface); color:var(--md-sys-color-inverse-on-surface); box-shadow:var(--e3);
  visibility:hidden; opacity:0; transform:translateY(16px);
  transition:transform var(--d-med) var(--emph-dec), opacity var(--d-short), visibility 0s linear var(--d-med)}
.setup-toast.on{visibility:visible; opacity:1; transform:none;
  transition:transform var(--d-med) var(--emph-dec), opacity var(--d-short)}
.toast.on ~ .setup-toast.on{transform:translateY(-64px)}
.setup-toast .st-ico{flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:color-mix(in oklab, var(--md-sys-color-inverse-primary) 22%, transparent); color:var(--md-sys-color-inverse-primary)}
.setup-toast .st-ico svg{width:22px; height:22px}
.setup-toast .st-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font:var(--t-body-medium); letter-spacing:.25px}
.setup-toast .st-txt strong{font:var(--t-label-large); letter-spacing:.1px}
.setup-toast .st-act{flex:none; color:var(--md-sys-color-inverse-primary); min-width:48px}
.setup-toast .st-x{flex:none; color:var(--md-sys-color-inverse-on-surface); background:transparent; border-radius:50%}
.setup-toast .st-x svg{width:20px; height:20px}
@media (max-width:820px){
  .setup-toast{inset-inline:16px; width:auto; inset-block-end:calc(168px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){ .setup-toast,.setup-toast.on{transition:none; transform:none} }
.install-slot{display:flex; flex-wrap:wrap; gap:8px}
.install-slot .btn svg{width:18px; height:18px}
/* خطوات التثبيت على آيفون */
.ios-steps{list-style:none; margin:8px 0 12px; padding:0; display:grid; gap:12px}
.ios-steps li{display:flex; align-items:flex-start; gap:12px; font:var(--t-body-large)}
.ios-steps .n{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); font:var(--t-label-large)}
.ios-steps svg{width:20px; height:20px; vertical-align:-4px; color:var(--md-sys-color-primary)}

/* ── الانضمام برمز: بطاقة «انضم إلى صفك» وصفحة الدعوة ── */
.join-card{display:flex; gap:16px; align-items:flex-start; margin-block:16px; padding:20px;
  background:var(--md-sys-color-surface-container-low); border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--md-sys-shape-md, 12px)}
.join-card .grow{flex:1; min-width:0}
.join-card h2{margin:0; font:var(--t-title-large, 400 22px/28px var(--ff))}
.join-card p.muted{margin:4px 0 0}
.join-card.compact{padding:16px}
.join-card.compact h2{font:var(--t-title-medium, 500 16px/24px var(--ff))}
.join-row{display:flex; gap:8px; align-items:flex-start; margin-top:12px}
.join-row .field{flex:1; margin:0; max-width:320px}
.join-row input{font-family:var(--ff-mono, ui-monospace, 'SF Mono', Menlo, monospace); letter-spacing:.12em; font-size:18px; text-align:left}
.join-row .btn{height:56px; padding-inline:24px}
.join-ico{flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container)}
.join-ico svg{width:24px; height:24px}
.join-ico.lg{width:64px; height:64px}
.join-ico.lg svg{width:32px; height:32px}
.join-invite{display:flex; gap:16px; align-items:center; padding:20px; margin-bottom:16px}
.join-invite .grow{flex:1; min-width:0}
.join-invite h2{margin:2px 0 4px; font:var(--t-headline-small, 400 24px/32px var(--ff))}
.join-invite .eyebrow{margin:0}
#joinSignup h3{margin:0 0 12px; font:var(--t-title-medium, 500 16px/24px var(--ff))}
.code-chip{padding:2px 8px; border-radius:8px; background:var(--md-sys-color-surface-container-high); letter-spacing:.08em}
.pick-by-hand{margin-top:12px}
.pick-by-hand summary{cursor:pointer; min-height:48px; display:flex; align-items:center; font:var(--t-label-large); color:var(--md-sys-color-primary)}
.pick-by-hand[open] summary{margin-bottom:12px}
.danger-zone summary{color:var(--md-sys-color-error)}
.danger-text,.btn.text.danger-text{color:var(--md-sys-color-error)}
@media (max-width:560px){
  .join-card{flex-direction:column; gap:12px; padding:16px}
  .join-row .field{max-width:none}
  .join-invite{padding:16px}
  .join-invite h2{font:var(--t-title-large, 400 22px/28px var(--ff))}
}
/* صفحة الدعوة: الزر العائم (شارك مادة) لا مكان له هنا، ويغطي أزرار التسجيل على الهاتف */
.route-join .fab{display:none}
@media (max-width:560px){
  #joinSignup .dlg-actions{flex-direction:column; align-items:stretch}
  #joinSignup .dlg-actions .btn{justify-content:center}
}
/* زر بشكل رابط («نسيت كلمة المرور؟»): بلا خلفية المتصفح */
button.link{background:none; border:0; padding:0; font:inherit; cursor:pointer; min-height:24px}

/* صفحات نصّية (الخصوصية): قوائم مقروءة لا جدران نص */
.prose{max-width:68ch}
.prose p{margin:0 0 12px; line-height:1.8}
.prose p:last-child{margin-bottom:0}
.prose ul{margin:0; padding-inline-start:20px; display:grid; gap:10px; line-height:1.8}

/* أصغر الهواتف (320): اسم الموقع يُطوى فيبقى «دخول» في صف الشعار بدل صف ثانٍ. الشعار يحمل الاسم في aria-label. */
@media (max-width:359px){.brand-text{display:none}}

/* الغلاف: بوابة عشتار رسم خلفي، والنص لا يمرّ فوق خطوطها.
   الحاسوب: النص يتوقّف قبل الرسم. الهاتف: الرسم ينزل تحت النص بارتفاع ثابت. */
@media (min-width:721px){ .hero > :not(.frost){max-width:calc(100% - 380px)} }
@media (max-width:720px){ .hero{background-size:auto 96px; padding-bottom:120px} }

/* الحركة، تمريرة 27 تشرين الأول:
   1) التنقل يحرّك الصفحة مرة واحدة. انتقال العرض (view transition) يُدخل الصفحة كلها،
      فارتفاع رأس الصفحة 16px فوقه حركة ثانية في أكثر ما يفعله الطالب. يبقى للمتصفحات بلا انتقال عرض. */
@supports (view-transition-name: none){ .page-head{animation:none} }
@supports not (view-transition-name: none){ .page-head{animation:settle .28s var(--emph-dec) both} }
/* 2) الصفحة السفلية تخرج من الحافة التي دخلت منها، بدل أن تختفي فجأة. متصفح لا يعرف allow-discrete يغلقها فوراً كما كان. */
@media (max-width:600px){
  .dlg{transition:transform .2s var(--standard), overlay .2s allow-discrete, display .2s allow-discrete}
  .dlg:not([open]){transform:translateY(100%)}
}
/* 3) مسار التصفح على الهاتف سطر واحد يُمرَّر أفقياً. حين كان يلتفّ، كان عدد أسطره يتغيّر لحظة يصل الخط
      العربي فتقفز الصفحة كلها 20px مرتين (CLS 0.35 على هاتف بطيء). العنوان تحته يقول أين أنت. */
@media (max-width:820px){
  .crumbs{flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; scrollbar-width:none; overscroll-behavior-x:contain}
  .crumbs::-webkit-scrollbar{display:none}
  .crumbs > *{flex:none}
}

/* ═══ «الشرح»: دروس مرسومة (public/features/explain) ═══
   ألوان الرسم من نظام الموقع: الأزوردي = لغة المصدر، ذهب عشتار = لغة الهدف. ثابتة في الفاتح والداكن (نص أبيض فوقها). */
.xp{--xp-src:var(--harees-lapis,#2f5cad); --xp-tgt:#a0620a; --xp-teal:var(--harees-turquoise,#00677f); --xp-vio:#6a4fa8; --xp-ok:var(--harees-palm,#006d43);
  --xp-ink:var(--md-sys-color-on-surface); --xp-paper:var(--md-sys-color-surface-container-lowest); --xp-line:var(--md-sys-color-outline-variant);
  --xp-mute:var(--md-sys-color-on-surface-variant); --xp-soft:var(--md-sys-color-surface-container-high)}
.xp-cta{display:flex;align-items:center;gap:16px;margin:0 0 20px;padding:16px 18px;border-radius:var(--md-sys-shape-lg,16px);text-decoration:none;color:inherit;
  background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.xp-cta .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.xp-cta strong{font:var(--t-title-medium);color:var(--md-sys-color-on-secondary-container)}
.xp-cta .muted{color:inherit;opacity:.85}
.xp-cta-eyebrow{font:var(--t-label-medium);letter-spacing:.5px}
.xp-cta-art{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-primary)}
.xp-cta-art svg{width:38px;height:38px}
.xp-cta.game{margin-top:28px;background:var(--md-sys-color-tertiary-fixed);color:var(--md-sys-color-on-tertiary-fixed)}
.xp-cta.game strong{color:var(--md-sys-color-on-tertiary-fixed)}
.xp-head{margin-bottom:8px}
.xp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.xp-tile{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;border-radius:var(--md-sys-shape-md,12px);text-decoration:none;color:inherit;
  background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);transition:transform var(--d-short,.15s),border-color var(--d-short,.15s)}
.xp-tile:hover{border-color:var(--md-sys-color-primary);transform:translateY(-2px)}
.xp-tile strong{font:var(--t-title-medium)}
.xp-tile-art{display:block;border-radius:10px;overflow:hidden;background:var(--md-sys-color-surface-container-lowest);margin-bottom:6px;aspect-ratio:2/1}
.xp-tile-art .xp-art{width:100%;height:100%}
.xp-tile-n{position:absolute;top:18px;inset-inline-start:20px;min-width:28px;height:28px;padding:0 6px;border-radius:14px;display:grid;place-items:center;
  font:var(--t-label-large);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.xp-tile.done .xp-tile-n{background:var(--harees-palm,#006d43)}
.xp-tag{align-self:flex-start;margin-top:4px;font:var(--t-label-small);padding:2px 8px;border-radius:8px;background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface-variant)}
.xp-tag.exam{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.xp-lesson{max-width:760px;margin-inline:auto}
.xp-lhead{display:flex;gap:16px;align-items:center;margin:8px 0 16px}
.xp-lhead h1{margin:2px 0 0;font:var(--t-headline-medium)}
.xp-lhead .eyebrow{margin:0}
.xp-num{flex:none;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;align-content:center;font:500 26px/1 var(--ff);
  background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.xp-num small{font:var(--t-label-small);opacity:.8}
.xp-figure{margin:0 0 16px;padding:12px;border-radius:var(--md-sys-shape-lg,16px);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant)}
.xp-art{display:block;width:100%;height:auto;max-height:320px;stroke:none;stroke-width:0}
/* الأيقونات العامة تعطي كل svg خطّاً (svg{stroke:currentColor}): الرسم يبدأ بلا خط، والأصناف تضيفه */
.xp-art :where(rect,circle,path,text,g){stroke:none}
.xp-art text{paint-order:normal}
.xp-cta-art svg{stroke:none}
.xp-art-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.xp-art-row .xp-art{border-radius:12px;background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);padding:6px}
.xp-idea{font:var(--t-title-large);line-height:1.7;margin:0 0 14px;padding:14px 16px;border-inline-start:4px solid var(--md-sys-color-primary);
  background:var(--md-sys-color-surface-container-low);border-radius:0 12px 12px 0}
.xp-body{font:var(--t-body-large);line-height:1.9}
.xp-body p{margin:0 0 12px}
.xp-list{margin:0 0 12px;padding-inline-start:22px}
.xp-list li{margin-bottom:8px}
.xp-trap{padding:10px 14px;border-radius:12px;background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);font:var(--t-body-medium);line-height:1.8}
.xp-examples{margin:16px 0}
.xp-ex{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:6px 0}
.xp-ex .src,.xp-ex .tgt{padding:8px 12px;border-radius:10px;font:var(--t-body-large)}
.xp-ex .src{background:color-mix(in oklab,var(--xp-src) 14%,transparent)}
.xp-ex .tgt{background:color-mix(in oklab,var(--xp-tgt) 16%,transparent)}
.xp-ex .src[dir=ltr],.xp-ex .tgt[dir=ltr]{text-align:left}
.xp-ex .arw{color:var(--md-sys-color-on-surface-variant);font-size:20px}
.xp-en{margin:16px 0;padding:10px 14px;border-radius:12px;background:var(--md-sys-color-surface-container);font:var(--t-body-medium);text-align:left}
.xp-try{margin:12px 0;border-radius:12px;background:var(--md-sys-color-tertiary-fixed);color:var(--md-sys-color-on-tertiary-fixed);padding:0 16px}
.xp-try summary{cursor:pointer;padding:14px 0;font:var(--t-title-small);line-height:1.7;list-style:none}
.xp-try summary::before{content:"؟";display:inline-grid;place-items:center;width:24px;height:24px;margin-inline-end:8px;border-radius:50%;background:var(--md-sys-color-on-tertiary-fixed);color:var(--md-sys-color-tertiary-fixed);font-weight:700}
.xp-try[open] summary{border-bottom:1px solid color-mix(in oklab,currentColor 20%,transparent)}
.xp-try > div{padding:12px 0 14px;font:var(--t-body-large);line-height:1.85}
.xp-actions{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.xp-pager{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 8px}
.xp-pg{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;text-decoration:none;color:inherit;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low)}
.xp-pg.next{text-align:end}
.xp-pg:hover{border-color:var(--md-sys-color-primary)}
.xp-game{display:grid;gap:12px;max-width:760px}
.xp-q{padding:14px 16px;border-radius:12px;background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant)}
.xp-q-stem{margin:0 0 10px;font:var(--t-title-small);line-height:1.8}
.xp-q-n{display:inline-grid;place-items:center;width:26px;height:26px;margin-inline-end:6px;border-radius:50%;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font:var(--t-label-large)}
.xp-opts{display:flex;flex-wrap:wrap;gap:8px}
.xp .xp-opts .chip.right,.xp .xp-opts .chip.right:disabled{background:var(--harees-palm,#006d43);color:#fff;border-color:transparent;opacity:1}
.xp .xp-opts .chip.wrong{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error);border-color:transparent;opacity:1}
.xp-why{margin:10px 0 0;font:var(--t-body-medium);line-height:1.8;color:var(--md-sys-color-on-surface-variant)}
.xp-why:empty{display:none}
.xp-score{font-weight:700;color:var(--harees-palm,#006d43)}
/* ألوان الرسم */
.xp-art .xs{fill:var(--xp-src)} .xp-art .xg{fill:var(--xp-tgt)} .xp-art .xtl{fill:var(--xp-teal)} .xp-art .xv{fill:var(--xp-vio)} .xp-art .xok{fill:var(--xp-ok)}
.xp-art .xs-soft{fill:color-mix(in oklab,var(--xp-src) 14%,var(--xp-paper))} .xp-art .xg-soft{fill:color-mix(in oklab,var(--xp-tgt) 16%,var(--xp-paper))} .xp-art .xm-soft{fill:var(--xp-soft)}
.xp-art .xm-fill{fill:var(--md-sys-color-primary)} .xp-art .xp{fill:var(--xp-paper)} .xp-art .xk-fill,.xp-art .xfill-k{fill:var(--xp-ink)}
.xp-art .xk{stroke:var(--xp-ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} .xp-art .thick{stroke-width:3.5} .xp-art .thicker{stroke-width:6}
.xp-art .dashed{stroke-dasharray:6 5} .xp-art .xk-fill-none{fill:none}
.xp-art .xp-stroke{stroke:var(--xp-paper);stroke-width:2;fill:none} .xp-art .xs-stroke{stroke:var(--xp-src);fill:none;stroke-linecap:round} .xp-art .xg-stroke{stroke:var(--xp-tgt);fill:none;stroke-linecap:round} .xp-art .xv-stroke{stroke:var(--xp-vio);stroke-width:3;fill:none;stroke-linecap:round}
.xp-art .xdash rect{fill:none;stroke:var(--xp-mute);stroke-dasharray:3 3}
.xp-art .xframe{fill:none;stroke-width:2} .xp-art .f1{stroke:var(--xp-src);fill:color-mix(in oklab,var(--xp-src) 18%,transparent)} .xp-art .f3{stroke:var(--xp-vio)} .xp-art .f4{stroke:var(--xp-teal)} .xp-art .f5{stroke:var(--xp-tgt)} .xp-art .f6{stroke:var(--xp-mute)}
.xp-art .xwater{fill:color-mix(in oklab,var(--xp-teal) 22%,var(--xp-paper))} .xp-art .xice{fill:var(--xp-paper);stroke:var(--xp-src);stroke-width:2} .xp-art .xice.deep{fill:color-mix(in oklab,var(--xp-src) 12%,var(--xp-paper))}
.xp-art .xglass{fill:color-mix(in oklab,var(--xp-paper) 60%,transparent);stroke:var(--xp-ink);stroke-width:2}
.xp-art .xsun{fill:#e0a100} .xp-art .xmoon{fill:var(--xp-mute)}
.xp-art .xroad{stroke:var(--xp-soft);stroke-width:18;stroke-linecap:round} .xp-art .xroadline{stroke:var(--xp-mute);stroke-width:2;stroke-dasharray:8 8}
.xp-art .xland{fill:color-mix(in oklab,var(--xp-ok) 30%,var(--xp-paper))}
.xp-art .xt{fill:var(--xp-ink);font:500 13px var(--ff)} .xp-art .xt.on{fill:#fff} .xp-art .xt.on-g{fill:var(--xp-tgt);font-weight:700;font-size:18px}
.xp-art .xt.sm{font-size:12.5px} .xp-art .xt.xs{font-size:11px} .xp-art .xt.xxs{font-size:9.5px} .xp-art .xt.strong{font-weight:700}
.xp-art .ar{font-family:var(--ff-ar,var(--ff))}
@media (max-width:600px){
  .xp-art-row{grid-template-columns:1fr}
  .xp-ex{grid-template-columns:1fr} .xp-ex .arw{justify-self:center;transform:rotate(-90deg)}
  .xp-lhead h1{font:var(--t-headline-small)} .xp-num{width:52px;height:52px;font-size:22px;border-radius:16px}
  .xp-idea{font:var(--t-title-medium);line-height:1.8}
  .xp-pager{grid-template-columns:1fr}
  .xp-cta{padding:14px}
}
@media (prefers-reduced-motion:reduce){ .xp-tile{transition:none} .xp-tile:hover{transform:none} }
.xp-art .xscreen{fill:color-mix(in oklab,var(--xp-ink) 10%,var(--xp-paper));stroke:var(--xp-ink);stroke-width:2}
.xp-art .xsub{fill:#111;opacity:.85}
.xp-art .dotted{stroke-dasharray:2 4;stroke-width:1.5;opacity:.6}
.xp-art .xcliff{fill:color-mix(in oklab,var(--xp-ok) 60%,var(--xp-paper))}

/* ═══ الامتحان: بطاقة المادة، «الامتحانات القادمة»، وصفحة مادة الامتحان (app.js: EXAMS) ═══ */
.xp-cta.ex-cta{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.xp-cta.ex-cta strong{color:var(--md-sys-color-on-primary-container)}
.xp-cta.ex-cta .grow{flex:1}
.ex-cal{flex:none;width:58px;min-height:56px;padding:6px 2px;border-radius:14px;display:grid;place-items:center;align-content:center;gap:3px;text-align:center;
  background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-primary)}
.ex-cal b{font:600 22px/1 var(--ff)}
.ex-cal small{font:var(--t-label-small);line-height:1.15;color:var(--md-sys-color-on-surface-variant)}
.ex-row .ex-cal{width:54px;min-height:52px;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.ex-row .ex-cal small{color:inherit;opacity:.85}
.ex-in{font:var(--t-label-large);color:var(--md-sys-color-primary);white-space:nowrap}
.ex-row.soon .ex-in,.ex-pill{color:var(--md-sys-color-error)}
.ex-head .chips{margin-top:12px}
.ex-note{font:var(--t-title-medium);line-height:1.8}
.ex-jump{margin:0 0 4px}
.ex-format{margin:0;padding-inline-start:22px;font:var(--t-body-large);line-height:1.9}
.ex-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ex-sheet > div{padding:14px 16px;border-radius:var(--md-sys-shape-md,12px);background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant)}
.ex-sheet h3{margin:0;font:var(--t-title-medium)}
.ex-sheet .en{display:block;margin:2px 0 8px;font:var(--t-label-large);font-family:var(--ff-en);color:var(--md-sys-color-primary)}
.ex-sheet p{margin:0;font:var(--t-body-medium);line-height:1.85}
.ex-flash{max-width:560px;padding:20px;border-radius:var(--md-sys-shape-lg,16px);text-align:center;
  background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant)}
.ex-flash-front{margin:12px 0 8px;font:var(--t-headline-small);color:var(--md-sys-color-primary);overflow-wrap:anywhere}
.ex-flash-front[lang=en]{font-family:var(--ff-en)}
.ex-flash-back{margin:0 0 8px;font:var(--t-title-large);overflow-wrap:anywhere}
.ex-flash .xp-actions{justify-content:center;margin:12px 0 0}
.ex-morph h3{margin:16px 0 8px;font:var(--t-title-small);color:var(--md-sys-color-on-surface-variant)}
.ex-morph small[dir=ltr]{grid-column:1 / -1;text-align:start;font-family:var(--ff-en)}
.ex-drill{max-width:760px}
.ex-drill-src,.ex-drill-model p:last-child{margin:0 0 12px;padding:12px 14px;border-radius:12px;font:var(--t-body-large);line-height:1.9}
.ex-drill-src{background:color-mix(in oklab,var(--xp-src) 12%,transparent)}
.ex-drill-model p:last-child{background:color-mix(in oklab,var(--xp-tgt) 14%,transparent)}
.ex-drill [dir=ltr]{text-align:left}
.ex-drill .label{margin:0 0 6px;font:var(--t-label-large)}
.ex-sub{margin:18px 0 8px;font:var(--t-title-small);color:var(--md-sys-color-on-surface-variant)}
.ex-bk{margin:0 0 8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container-low);overflow:hidden}
.ex-bk summary{cursor:pointer;padding:12px 16px;font:var(--t-title-small);display:flex;gap:10px;align-items:baseline;min-height:44px}
.ex-bk .glossary{border-radius:0;border:0;border-top:1px solid var(--md-sys-color-outline-variant)}
/* لا قائمة تنفتح فجأة: المحتوى ينزلق بارتفاعه حيث يدعمه المتصفح، ويفتح فوراً حيث لا يدعمه */
.ex-bk{interpolate-size:allow-keywords}
.ex-bk::details-content{block-size:0;overflow:hidden;transition:block-size .28s cubic-bezier(.2,0,0,1),content-visibility .28s allow-discrete}
.ex-bk[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){.ex-bk::details-content{transition:none}}
.ex-morph .ex-syn{grid-column:1 / -1;text-align:start;font-family:var(--ff-en);font:var(--t-label-large);color:var(--md-sys-color-tertiary)}

/* ═══ «تدرّب» وتمرين الامتحان: ترجمتك بجانب النموذجية، على هيئة شاشة مترجم Google ═══ */
.cmp{display:none}
.parallel.mode-practice .pair{grid-template-columns:1fr}
.parallel.mode-practice .src{border:none}
.parallel.mode-practice .tgt{display:none}
.parallel.mode-practice .cmp, .ex-drill .cmp{display:block; padding:0 var(--s3) var(--s3)}
/* «تدرّب بالعكس»: تظهر الترجمة وحدها، وتحتها مربّع لترجمتها إلى لغة الأصل */
.parallel.mode-practice .cmp-r{display:none}
.parallel.mode-practice-r .pair{grid-template-columns:1fr}
.parallel.mode-practice-r .src{display:none}
.parallel.mode-practice-r .tgt{border:none}
.parallel.mode-practice-r .cmp-r{display:block; padding:0 var(--s3) var(--s3)}
.ex-drill .cmp{padding:0}
.cmp-panes{display:grid; grid-template-columns:1fr; gap:12px}
.cmp.open .cmp-panes{grid-template-columns:1fr 1fr}
@media (max-width:719px){.cmp.open .cmp-panes{grid-template-columns:1fr}}
.cmp-pane{display:flex; flex-direction:column; min-width:0; border:1px solid var(--md-sys-color-outline-variant); border-radius:12px; overflow:hidden;
  background:var(--md-sys-color-surface-container-lowest)}
.cmp-pane.model{background:var(--md-sys-color-surface-container); animation:cmp-in .24s cubic-bezier(.2,0,0,1)}
@keyframes cmp-in{from{opacity:0; transform:translateX(-8px)}}
@media (prefers-reduced-motion:reduce){.cmp-pane.model{animation:none}}
.cmp-bar{display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  border-bottom:1px solid var(--md-sys-color-outline-variant); font:var(--t-label-large); color:var(--md-sys-color-on-surface-variant)}
.cmp-pane.own .cmp-bar span:first-child,.cmp-pane.model .cmp-bar span:first-child{color:var(--md-sys-color-primary)}
.cmp-lang{font:var(--t-label-medium)}
.cmp-pane textarea,.cmp-model{flex:1; width:100%; box-sizing:border-box; margin:0; padding:14px 16px; border:0; background:transparent; color:inherit;
  font-family:var(--ff-read); font-size:1.125rem; line-height:1.9; resize:none; min-height:140px; white-space:pre-wrap; overflow-wrap:anywhere}
.cmp-pane [lang=en]{font-family:var(--ff-en); font-size:1rem}
.cmp-pane [dir=ltr]{text-align:left}
.cmp-pane textarea:focus{outline:none}
.cmp-pane.own:focus-within{border-color:var(--md-sys-color-primary); box-shadow:0 0 0 1px var(--md-sys-color-primary)}
.cmp-foot{padding:6px 14px 8px; font:var(--t-label-small); color:var(--md-sys-color-on-surface-variant)}
.cmp-actions{display:flex; gap:8px; margin-top:10px}

/* ═══ «حدّد كلمة»: نافذة الترجمة (features/lookup.js) ═══ */
.lk{position:fixed; z-index:60; width:max-content; min-width:min(360px,calc(100vw - 24px)); max-width:min(640px,calc(100vw - 24px)); max-height:min(70vh,520px); overflow:auto; padding:12px 14px 10px;
  border-radius:var(--md-sys-shape-lg,16px); background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface);
  box-shadow:0 8px 28px rgb(0 0 0 / .22); border:1px solid var(--md-sys-color-outline-variant); animation:lk-in .18s cubic-bezier(.2,0,0,1)}
.lk.sheet{inset:auto 0 0 0; width:auto; min-width:0; max-width:none; max-height:min(56vh, 480px); border-radius:20px 20px 0 0; padding-bottom:calc(12px + env(safe-area-inset-bottom)); animation:lk-up .22s cubic-bezier(.2,0,0,1)}
@keyframes lk-in{from{opacity:0; transform:translateY(4px)}}
@keyframes lk-up{from{transform:translateY(100%)}}
.lk.leaving{animation:lk-out .14s cubic-bezier(.3,0,1,1) forwards; pointer-events:none}
.lk.sheet.leaving{animation:lk-down .18s cubic-bezier(.3,0,1,1) forwards}
@keyframes lk-out{to{opacity:0; transform:translateY(4px)}}
@keyframes lk-down{to{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.lk,.lk.sheet{animation:none}}
.lk-head{display:flex; align-items:center; gap:4px; margin-bottom:6px}
.lk-head strong{flex:1 1 auto; min-width:0; margin-inline-end:8px; font:var(--t-title-large); font-family:var(--ff-en); overflow-wrap:break-word}
/* عرض النافذة يتبع العبارة المحدَّدة وحدها (بين 360 و640): الأقسام تحتها لا تفرض عرضها، بل تلتف داخله */
.lk-sec,.lk-src,.lk > .lk-more-wrap{contain:inline-size}
.lk-head strong[lang=ar]{font-family:var(--ff)}
.lk.lk-stack .lk-head{flex-wrap:wrap; row-gap:2px}
.lk.lk-stack .lk-head strong{flex-basis:100%; margin:0}
.lk-acts{flex:none; display:flex; align-items:center; gap:4px; margin-inline-start:auto}
.lk-head .btn{min-height:40px; padding-inline:10px; white-space:nowrap}
.lk-sec{padding:8px 0; border-top:1px solid var(--md-sys-color-outline-variant)}
.lk-sec h4{margin:0 0 6px; font:var(--t-label-large); color:var(--md-sys-color-on-surface-variant)}
.lk-ctx{min-height:44px}
.lk-tr{margin:0; font:var(--t-title-medium); color:var(--md-sys-color-primary)}
.lk-gloss{margin:2px 0 0; font:var(--t-body-medium); font-family:var(--ff-en); text-align:left; color:var(--md-sys-color-on-surface-variant)}
.lk-why{margin:4px 0 0; font:var(--t-body-medium); line-height:1.7}
.lk-line{margin:0 0 6px; font:var(--t-body-large); line-height:1.7}
.lk-line small{display:block; font-family:var(--ff-en); text-align:left; color:var(--md-sys-color-on-surface-variant)}
.lk-line.lk-more{display:none}
.lk.lk-all .lk-line.lk-more{display:block}
.lk-pos,.lk-tag{display:inline-block; margin-inline-end:6px; padding:1px 8px; border-radius:8px; font:var(--t-label-small); vertical-align:middle;
  background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}
.lk-tag{background:var(--md-sys-color-tertiary-container); color:var(--md-sys-color-on-tertiary-container)}
.lk-course{padding:6px 8px; border-radius:10px; background:color-mix(in oklab,var(--md-sys-color-tertiary-fixed) 70%,transparent)}   /* ذهبي الشعار الفاتح؛ 45% من البنّي الداكن فوق الرمادي بدا كدراً */
:root[data-theme="dark"] .lk-course{background:color-mix(in oklab,var(--md-sys-color-tertiary-container) 45%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lk-course{background:color-mix(in oklab,var(--md-sys-color-tertiary-container) 45%,transparent)}}
.lk-save.on{background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}
::highlight(lk-saved){background-color:color-mix(in oklab,var(--md-sys-color-primary) 14%,transparent); text-decoration:underline dotted 2px var(--md-sys-color-primary); text-underline-offset:5px}
.lk-sub{margin:8px 0 4px; font:var(--t-label-medium); color:var(--md-sys-color-on-surface-variant)}
.lk-words{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.lk-words li{display:flex; align-items:baseline; gap:10px; font:var(--t-body-large); line-height:1.6}
.lk-words bdi{flex:none; min-width:7ch; font-family:var(--ff-en); color:var(--md-sys-color-primary)}
.lk-words bdi[lang=ar]{font-family:var(--ff)}
.lk-words .lk-pos{margin-inline-start:auto}
.lk-src{margin:6px 0 0; font:var(--t-label-small); color:var(--md-sys-color-on-surface-variant)}
.lk-src a{color:inherit}
.lk .sk-line{height:12px; border-radius:6px; margin:6px 0; background:var(--md-sys-color-surface-container-highest); animation:sk 1.2s ease-in-out infinite alternate}
.lk .sk-line.short{width:60%}
@keyframes sk{to{opacity:.5}}
@media print{.cmp{display:none!important}}

/* ═══ ملاحظاتي: تظليل الكلمة ونقطة فوقها (features/notes.js) ═══
   أربعة ألوان تظليل؛ النقطة بلون أعمق تعني «عليها ملاحظة مكتوبة»، والتظليل وحده بلا نقطة. */
/* إشارة المرور: p أحمر = لا أعرفها، y أصفر = لست متأكداً، g أخضر = أعرفها، b بنفسجي = أراجعها لاحقاً أو غير ذلك (الرموز القديمة باقية، فلا ترحيل) */
:root{--nt-p:#e5484d; --nt-y:#f2b632; --nt-g:#3fa860; --nt-b:#9a7cf0}
mark.nt{position:relative; color:inherit; border-radius:3px; padding:0 1px; cursor:pointer; background:color-mix(in oklab,var(--nt-c) 34%,transparent);
  box-decoration-break:clone; -webkit-box-decoration-break:clone; transition:background .15s}
mark.nt:hover,mark.nt:focus-visible{background:color-mix(in oklab,var(--nt-c) 55%,transparent); outline:none}
mark.nt.has-body::after{content:''; position:absolute; top:-6px; left:50%; width:7px; height:7px; border-radius:50%; transform:translateX(-50%);
  background:color-mix(in oklab,var(--nt-c) 70%,var(--md-sys-color-on-surface)); box-shadow:0 0 0 2px var(--md-sys-color-surface); animation:nt-dot .3s cubic-bezier(.2,0,0,1)}
@keyframes nt-dot{from{transform:translateX(-50%) scale(0)}}
.nt-y{--nt-c:var(--nt-y)} .nt-g{--nt-c:var(--nt-g)} .nt-b{--nt-c:var(--nt-b)} .nt-p{--nt-c:var(--nt-p)}
mark.nt.nt-pulse{animation:nt-pulse 1.6s ease-out}
@keyframes nt-pulse{0%,60%{box-shadow:0 0 0 4px color-mix(in oklab,var(--nt-c) 60%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.pair.nt-pulse{animation:nt-pair 1.6s ease-out}
@keyframes nt-pair{0%,60%{background:color-mix(in oklab,var(--md-sys-color-primary) 10%,var(--surface))}}
@media (prefers-reduced-motion:reduce){mark.nt.has-body::after,mark.nt.nt-pulse,.pair.nt-pulse{animation:none}}
.nt-tip{position:fixed; z-index:61; max-width:300px; padding:8px 12px; border-radius:10px; font:var(--t-body-medium); line-height:1.7; pointer-events:none;
  background:var(--md-sys-color-inverse-surface); color:var(--md-sys-color-inverse-on-surface); box-shadow:0 6px 18px rgb(0 0 0 / .2); animation:lk-in .15s ease-out}
.nt-card .nt-quote{font:var(--t-title-medium); overflow-wrap:anywhere}
.nt-colors{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:6px; margin:6px 0 2px}
.nt-sw{display:flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; border-radius:var(--r-full); cursor:pointer; text-align:start;
  border:1.5px solid var(--md-sys-color-outline-variant); background:none; color:inherit; font:500 .8125rem/1.3 var(--ff-read);
  transition:border-color .15s, background-color .15s}
.nt-sw::before{content:''; flex:none; width:14px; height:14px; border-radius:50%; background:var(--nt-c)}
.nt-sw[aria-checked="true"]{border-color:var(--nt-c); background:color-mix(in oklab,var(--nt-c) 22%,transparent)}
.nt-legend{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px}
.nt-dot{flex:none; width:12px; height:12px; border-radius:50%; background:var(--nt-c); margin-inline-end:4px}
.nt-row h3{font-family:inherit}
.nt-row p{white-space:pre-wrap}
@media print{mark.nt{background:none}mark.nt::after{display:none}}

/* ═══ شريط «وثّق بريدك» ورمز التحقق ═══ */
.verify-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 auto 12px; max-width:1100px; padding:10px 14px; border-radius:12px;
  background:var(--md-sys-color-tertiary-container); color:var(--md-sys-color-on-tertiary-container); font:var(--t-body-medium); animation:lk-in .2s ease-out}
.verify-bar .grow{flex:1; min-width:200px; display:flex; gap:8px; align-items:center}
.code-input{font-size:1.6rem !important; letter-spacing:.5em; text-align:center !important; font-family:var(--ff-en)}

/* ═══ الواجبات بموعد، سجل المحاضرات، غياباتي ═══ */
.due-pill{display:inline-block; padding:1px 8px; border-radius:8px; font:var(--t-label-small); background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}
.due-pill.soon{background:var(--md-sys-color-error-container); color:var(--md-sys-color-on-error-container)}
.lec-due{margin:0 0 10px; padding:10px 14px}
.lec-due p{margin:4px 0; line-height:1.8}
.lec-list{list-style:none; margin:0 0 10px; padding:0; display:grid; gap:8px}
.lec{padding:10px 14px; border-radius:12px; border:1px solid var(--md-sys-color-outline-variant); background:var(--md-sys-color-surface-container-low)}
.lec-date{margin:0; font:var(--t-label-large); color:var(--md-sys-color-primary)}
.lec-topic{margin:2px 0 0; font:var(--t-body-large); line-height:1.8}
.lec-hw{margin:4px 0 0; font:var(--t-body-medium); line-height:1.8}
.abs-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin-top:12px}
.abs-card{padding:14px 16px}
.abs-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.abs-head h2{margin:0; font:var(--t-title-medium)}
.abs-n{margin:0; font:500 28px/1 var(--ff)}
.abs-bar{position:relative; height:8px; border-radius:8px; margin:10px 0 6px; background:var(--md-sys-color-surface-container-highest); overflow:visible}
.abs-bar i{display:block; height:100%; border-radius:8px; background:var(--harees-palm,#006d43); transition:width .3s}
.abs-warn .abs-bar i{background:#c98a00} .abs-fail .abs-bar i{background:var(--md-sys-color-error)}
.abs-bar b{position:absolute; top:-3px; width:2px; height:14px; background:var(--md-sys-color-on-surface-variant)}
.abs-msg{margin:4px 0 0; font:var(--t-body-medium); line-height:1.7}
.abs-warn .abs-msg{color:#9a6a00} .abs-fail .abs-msg{color:var(--md-sys-color-error)}
.abs-date{position:relative; overflow:hidden}
.abs-date input{position:absolute; inset:0; opacity:0; cursor:pointer}
.abs-list ul{list-style:none; margin:0; padding:4px 12px 10px}
.abs-list li{display:flex; justify-content:space-between; align-items:center; padding:2px 0}
.abs-rule{margin-top:8px}

/* ── شِفت (app.js shiftBanner): لافتات شِفت المنزلية نفسها. أرض #EFF3FF، حبر كحلي #0E1F3A، زر بأزرق شِفت #3B5EF5.
   في الوضع الداكن يُقلب الرسم كما في شِفت (invert + hue-rotate) فيبقى الأزرق أزرق، والنص يأخذ ألوان الوضع ── */
.sh-banner,.sh-row{--sh-ground:#EFF3FF; --sh-ink:#0E1F3A; --sh-blue:#3B5EF5; font-family:'IBM Plex Sans Arabic',var(--ff)}
.sh-banner{border-radius:var(--r-lg, 24px); overflow:hidden; background:var(--sh-ground)}
.sh-top{position:relative; display:block; aspect-ratio:1392/500; color:var(--sh-ink); text-decoration:none}
.sh-art{position:absolute; inset:0; background:var(--sh-ground)}
.sh-art img{display:block; width:100%; height:100%; object-fit:cover; object-position:left center}
.sh-copy{position:absolute; inset-block:0; inset-inline-start:0; width:54%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:10px; padding-inline:clamp(20px, 4vw, 48px)}
.sh-logo{width:clamp(72px, 7vw, 96px); height:auto}
.sh-copy strong{font-size:clamp(1.25rem, .8rem + 1.6vw, 2.125rem); line-height:1.35; font-weight:700; letter-spacing:-.01em}
.sh-sub{font-size:clamp(.9375rem, .85rem + .35vw, 1.125rem); line-height:1.75; color:color-mix(in oklab, var(--sh-ink) 80%, transparent); max-width:40ch}
.sh-pill{display:inline-flex; align-items:center; min-height:44px; padding:0 22px; border-radius:999px; background:var(--sh-blue); color:#fff;
  font-weight:600; font-size:.9375rem; white-space:nowrap; transition:background .2s}
.sh-top:hover .sh-pill,.sh-row:hover .sh-pill{background:#2E4DD8}
.sh-top:focus-visible,.sh-row:focus-visible{outline:3px solid var(--sh-blue); outline-offset:-3px}
.sh-facts{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px clamp(16px, 3vw, 28px) 18px; border-top:1px solid rgb(14 31 58 / .08); color:var(--sh-ink)}
.sh-facts > span{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:#fff; font-size:.875rem}
.sh-facts svg{width:16px; height:16px; color:var(--sh-blue)}
.sh-more{margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px; min-height:40px; color:var(--sh-blue); font-weight:600; font-size:.9375rem; text-decoration:none}
.sh-more:hover{text-decoration:underline}

.sh-row{display:flex; align-items:center; gap:16px; padding:10px 14px 10px 10px; border-radius:var(--r-md); background:var(--sh-ground); color:var(--sh-ink); text-decoration:none}
.sh-row-art{flex:none; width:112px; height:80px; border-radius:12px; overflow:hidden; background:var(--sh-ground)}
.sh-row-art img{display:block; width:100%; height:100%; object-fit:cover; object-position:22% center}
.sh-row strong{display:block; font-size:1.0625rem}
.sh-row .grow > span{font-size:.875rem; line-height:1.7; color:color-mix(in oklab, var(--sh-ink) 78%, transparent)}

/* الهاتف: الصورة 1392×500 تصغر إلى 358 فيضيع النص. الرسم يصير شريطاً أعلى البطاقة والنص تحته على الأرض نفسها */
@media (max-width:720px){
  .sh-top{aspect-ratio:auto}
  .sh-art{position:relative; display:block; height:150px}
  .sh-art img{object-position:12% center}
  .sh-copy{position:static; width:auto; padding:6px 20px 20px; gap:8px}
  .sh-row{flex-wrap:wrap; padding:12px}
  .sh-row .grow{flex:1 1 60%}
  .sh-row .sh-pill{flex-basis:100%; justify-content:center}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sh-banner,:root:not([data-theme="light"]) .sh-row{--sh-ground:#10141F; --sh-ink:#E8ECF6}
  :root:not([data-theme="light"]) .sh-art img,:root:not([data-theme="light"]) .sh-row-art img,:root:not([data-theme="light"]) .sh-logo{filter:invert(1) hue-rotate(180deg)}
  :root:not([data-theme="light"]) .sh-facts > span{background:rgb(255 255 255 / .06)}
  :root:not([data-theme="light"]) .sh-more{color:#8FA6FF}
}
:root[data-theme="dark"] .sh-banner,:root[data-theme="dark"] .sh-row{--sh-ground:#10141F; --sh-ink:#E8ECF6}
:root[data-theme="dark"] .sh-art img,:root[data-theme="dark"] .sh-row-art img,:root[data-theme="dark"] .sh-logo{filter:invert(1) hue-rotate(180deg)}
:root[data-theme="dark"] .sh-facts > span{background:rgb(255 255 255 / .06)}
:root[data-theme="dark"] .sh-more{color:#8FA6FF}
/* ── الإعلانات كما في شِفت (features/ads.js) ──
   اللافتات: دوران كل 6 ثوانٍ، الشرائح فوق بعضها في خلية واحدة فلا يقفز الارتفاع. لافتة بصورة فيها نصها (bn-pic) تبقى 1392×500
   في كل عرض ولا تُقلب ألوانها في الداكن. البطاقات: شارة «إعلان» (مثبّت بلون الأساس ودبوس، متناوب خافت)، صورة مربعة، عنوان سطران،
   نص ثلاثة، زر ورابط التفاصيل وعدّاد المشاهدات. بطاقة «أخبار الدفعة» بحجم الخبر نفسه. ── */
.bn-track{display:grid}
.bn-slide{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity var(--d-med) var(--standard), visibility 0s linear var(--d-med)}
.bn-slide.on{opacity:1; visibility:visible; transition:opacity var(--d-med) var(--standard)}
/* كل لافتة في الدوران بقياس 1392×500 في كل عرض (شِفت)، فلا يقفز الارتفاع بين لافتة بصورة ولافتة بنص فوق رسم */
.bn .sh-top{aspect-ratio:1392/500}
.bn-pic .sh-art img{object-position:center; filter:none !important}
@media (max-width:720px){
  .bn .sh-art{position:absolute; inset:0; height:auto}
  .bn .sh-copy{position:absolute; inset-block:0; inset-inline-start:0; width:58%; padding:0 14px; gap:5px}
  .bn .sh-sub{display:none}
  .bn .sh-copy strong{font-size:clamp(.875rem, .6rem + 1.2vw, 1.125rem); line-height:1.45}
  .bn .sh-logo{width:56px}
  .bn .sh-pill{min-height:30px; padding:0 12px; font-size:.8125rem}
}
.bn-dots{display:flex; justify-content:center; gap:4px; margin-top:6px}
.bn-dots button{width:32px; height:32px; border:0; padding:0; background:none; cursor:pointer; display:grid; place-items:center}
.bn-dots button::before{content:""; width:8px; height:8px; border-radius:999px; background:var(--outline); transition:width var(--d-short) var(--standard), background var(--d-short)}
.bn-dots button[aria-selected="true"]::before{width:20px; background:var(--primary)}
.bn-dots button:focus-visible{outline:2px solid var(--primary); outline-offset:-4px; border-radius:999px}
@media (prefers-reduced-motion: reduce){.bn-slide,.bn-slide.on,.bn-dots button::before{transition:none}}

.paid-ads{overflow:hidden}
.ad-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:var(--s2)}
.paid-ads .ad-label{margin-top:var(--s2)}
.ad-card{position:relative; display:flex; gap:var(--s2); padding:var(--s2); border:1px solid var(--outline-variant, var(--outline)); border-radius:var(--r-md);
  background:var(--surface); animation:paid-in var(--d-med) var(--emph-dec) both; overflow:hidden;
  transition:height var(--d-med) var(--standard), opacity var(--d-short) var(--standard), box-shadow var(--d-med) var(--standard)}
.ad-card:hover{box-shadow:var(--e2)}
.ad-card.out,.feed-ad.out{opacity:0}
.ad-card.is-pinned{border-color:color-mix(in oklab, var(--primary) 45%, var(--outline))}
.ad-badge{position:absolute; top:8px; inset-inline-start:8px; z-index:1; display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
  font-size:.6875rem; font-weight:500; background:var(--surface-container-high); color:var(--on-surface-variant)}
.is-pinned .ad-badge{background:var(--primary); color:var(--on-primary)}
.ad-badge svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2}
.ad-card .paid-ad-hide{position:absolute; top:4px; inset-inline-end:4px; color:var(--on-surface-variant)}
.ad-thumb{position:relative; flex:none; width:128px; height:128px; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-container)}
.ad-thumb img{display:block; width:100%; height:100%; object-fit:cover}
.ad-more{position:absolute; bottom:6px; inset-inline-end:6px; padding:1px 6px; border-radius:6px; background:rgb(0 0 0 / .6); color:#fff; font-size:.75rem}
.ad-main{min-width:0; display:flex; flex-direction:column; gap:4px; padding-top:22px}
.ad-title{margin:0; font-size:1rem; font-weight:500; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ad-title a{color:var(--on-surface); text-decoration:none}
.ad-title a:hover{text-decoration:underline}
.ad-body{margin:0; font-size:.875rem; line-height:1.7; color:var(--on-surface-variant); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ad-by{margin:0; font-size:.8125rem; color:var(--on-surface-variant)}
.ad-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto; padding-top:6px}
.ad-actions .btn svg{width:16px; height:16px}
.ad-views{display:inline-flex; align-items:center; gap:4px; margin-inline-start:auto; font-size:.8125rem; color:var(--on-surface-variant)}
.ad-views svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8}
@media (max-width:560px){
  .ad-card{flex-direction:column; padding-top:40px}
  .ad-thumb{width:100%; height:128px}
  .ad-main{padding-top:0}
}

.feed-ad{align-items:center; transition:height var(--d-med) var(--standard), opacity var(--d-short) var(--standard); overflow:hidden; animation:paid-in var(--d-med) var(--emph-dec) both}
.feed-ad-card{flex:1 1 auto; min-width:0; display:flex; gap:12px; align-items:flex-start; color:inherit; text-decoration:none}
.feed-ad-card img,.feed-ad-ph{flex:none; width:48px; height:48px; border-radius:12px; object-fit:cover; background:var(--surface-container)}
.feed-ad-ph{display:grid; place-items:center; color:var(--on-surface-variant)}
.feed-ad-ph svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8}
.feed-ad-card .grow{min-width:0; display:flex; flex-direction:column; gap:2px}
.feed-ad-meta{display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--on-surface-variant)}
.feed-ad-meta .ad-views{margin-inline-start:auto}
.feed-ad-card strong{font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.feed-ad-body{font-size:.875rem; color:var(--on-surface-variant); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.feed-ad-cta{flex:none; display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 10px; font-size:.875rem; font-weight:500; color:var(--primary); text-decoration:none}
.feed-ad-cta svg{width:14px; height:14px}
.feed-ad .paid-ad-hide{flex:none; color:var(--on-surface-variant)}
.news-flag.ad{background:var(--surface-container-high); color:var(--on-surface-variant)}
@media (max-width:480px){.feed-ad{flex-wrap:wrap} .feed-ad-cta{margin-inline-start:60px}}

.ad-detail{display:flex; flex-direction:column; gap:var(--s2)}
.ad-detail-hero{display:block; width:100%; max-height:420px; object-fit:cover; border-radius:var(--r-md); background:var(--surface-container)}
.ad-detail-body{margin:0 0 12px; white-space:pre-line; line-height:1.9}
.ad-gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px}
.ad-gallery a{display:block; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-container)}
.ad-gallery img{display:block; width:100%; height:100%; object-fit:cover}

fieldset.field{border:0; padding:0; margin:0 0 var(--s2); min-inline-size:0}
fieldset.field legend{padding:0; margin-bottom:8px; font-weight:500}
.ad-kind{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--s2)}
.ad-kind label{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--outline); border-radius:999px; cursor:pointer}
.ad-kind label:has(input:checked){border-color:var(--primary); background:color-mix(in oklab, var(--primary) 10%, transparent)}
.ad-kind input{width:auto; margin:0}
.plan-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:10px}
.plan-pick{display:flex; gap:10px; align-items:flex-start; padding:14px; border:1px solid var(--outline); border-radius:var(--r-md); cursor:pointer; font-weight:400}
.plan-pick:has(input:checked){border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset}
.plan-pick input{width:auto; margin-top:4px}
.plan-pick > span{display:flex; flex-direction:column; gap:4px}
.plan-price{font-weight:500; color:var(--primary)}
.plan-total{margin:0 0 var(--s2); font-weight:500}
.plan-total:empty{display:none}
.ad-thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.ad-thumbs figure{margin:0; width:120px; display:flex; flex-direction:column; gap:4px}
.ad-thumbs img{display:block; width:120px; height:120px; object-fit:cover; border-radius:var(--r-sm); background:var(--surface-container)}
.ad-progress{height:8px; border-radius:999px; background:var(--surface-container-high); overflow:hidden}
.ad-progress span{display:block; height:100%; background:var(--primary); border-radius:inherit}
.ad-chart{margin:0}
.ad-chart svg{display:block; width:100%; height:auto}
.ad-chart rect{fill:color-mix(in oklab, var(--primary) 55%, transparent)}
.ad-chart polyline{stroke:var(--tertiary, #b0436e); stroke-width:2}
.ad-chart figcaption{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px}
.lg-bar,.lg-line{display:inline-block; width:14px; height:10px; border-radius:2px; background:color-mix(in oklab, var(--primary) 55%, transparent)}
.lg-line{height:2px; background:var(--tertiary, #b0436e)}
@media (max-width:560px){.ad-nums{grid-template-columns:repeat(2, minmax(0, 1fr))}}
/* ── السابق والتالي بين نصوص المادة (app.js textNav) ── */
.text-nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-top:12px}
.text-nav a{display:inline-flex; align-items:baseline; gap:6px; min-height:40px; align-items:center; color:var(--md-sys-color-primary); text-decoration:none; font:var(--t-label-large)}
.text-nav a:hover strong{text-decoration:underline}
.text-nav .tn-next{justify-self:end}
.text-nav .tn-pos{font:var(--t-label-medium); color:var(--md-sys-color-on-surface-variant)}
.text-nav.full{margin-top:32px; padding-top:16px; border-top:1px solid var(--md-sys-color-outline-variant)}
.text-nav.full a{flex-direction:column; align-items:flex-start; gap:2px; padding:12px 16px; border-radius:var(--r-md); border:1px solid var(--md-sys-color-outline-variant); color:inherit; max-width:100%}
.text-nav.full .tn-next{align-items:flex-end; text-align:left}
.text-nav.full a:hover{background:var(--md-sys-color-surface-container)}
.text-nav.full small{color:var(--md-sys-color-primary); font:var(--t-label-medium)}
.text-nav.full strong{font:var(--t-title-small)}
.text-nav.full span:not(.tn-pos){font:var(--t-body-small); color:var(--md-sys-color-on-surface-variant); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
@media (max-width:640px){.text-nav.full{grid-template-columns:1fr 1fr}.text-nav.full .tn-pos{display:none}}
@media print{.text-nav{display:none}}

/* ── اختبار كلماتي (app.js wordQuiz) ── */
.wq-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.wq-card{padding:20px; border-radius:var(--r-lg); border:1px solid var(--md-sys-color-outline-variant); background:var(--md-sys-color-surface-container-low)}
.wq-q{margin:0 0 14px; font:var(--t-headline-small); text-align:center; overflow-wrap:anywhere}
.wq-in{display:block; width:100%; box-sizing:border-box; min-height:48px; padding:12px 14px; border-radius:12px; border:1px solid var(--md-sys-color-outline); background:var(--md-sys-color-surface); color:inherit; font:var(--t-body-large); resize:vertical}
.wq-in:focus{outline:none; border-color:var(--md-sys-color-primary); box-shadow:0 0 0 1px var(--md-sys-color-primary)}
.wq-in[readonly]{background:transparent}
.wq-a{margin:14px 0 4px; padding:10px 14px; border-radius:4px 12px 12px 4px; border-inline-start:4px solid var(--md-sys-color-primary); background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface); font:var(--t-title-medium); animation:lk-in .2s cubic-bezier(.2,0,0,1)}
.wq-card .xp-actions{margin-top:14px}
.wq-score{margin:0 0 12px; font:var(--t-title-large)}
.wq-score strong{font:var(--t-display-small); color:var(--md-sys-color-primary)}
.wq-missed{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.wq-missed li{display:flex; justify-content:space-between; gap:12px; padding:8px 12px; border-radius:10px; background:var(--md-sys-color-surface)}
@media (prefers-reduced-motion:reduce){.wq-a{animation:none}}

/* ── إعلانات الممثل: عاجل ومثبّت (app.js newsCard, urgentBar) ── */
.news-flag{display:inline-block; padding:1px 8px; border-radius:8px; font:var(--t-label-small); vertical-align:middle;
  background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container)}
.news-flag.urgent{background:var(--md-sys-color-error-container); color:var(--md-sys-color-on-error-container)}
.urgent-bar{display:flex; align-items:center; gap:10px; max-width:var(--wrap, 1200px); margin:8px auto 0; padding:10px 14px; border-radius:var(--r-md);
  background:color-mix(in oklab, var(--md-sys-color-error-container) 70%, var(--md-sys-color-surface)); color:var(--md-sys-color-on-error-container);
  animation:lk-in .22s cubic-bezier(.2,0,0,1)}
.urgent-bar strong{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:640px){.urgent-bar{margin:8px 12px 0}}
@media (prefers-reduced-motion:reduce){.urgent-bar{animation:none}}

/* زر «ابدأ من المواد» في بطاقة الانضمام، وحالة الرمز الخاطئ */
.link-btn{padding:0; border:0; background:none; color:var(--md-sys-color-primary); font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:32px}
.join-skip{margin:6px 0 0}
[data-join-form] input[aria-invalid="true"]{border-color:var(--md-sys-color-error); box-shadow:0 0 0 1px var(--md-sys-color-error)}
[data-join-form] .err:not(:empty){color:var(--md-sys-color-error)}
/* زر «شارك مادة» يتقلّص إلى دائرة أثناء التمرير للأسفل، فلا يغطي سطراً كاملاً */
body.fab-mini .fab{padding:0; width:56px; justify-content:center}
body.fab-mini .fab span{display:none}

.search-q{overflow-wrap:anywhere}
.chip .nt-n{font-weight:inherit}

.read-hint{margin:14px 0 0; padding:10px 14px; border-radius:12px; background:var(--md-sys-color-surface-container); font:var(--t-body-medium); line-height:1.8}
.mode-hint{margin:8px 0 0}
.mode-hint:empty{display:none}
.wq-how{margin:0 0 10px}

/* الهيكل قبل أن يصل المحتوى (index.html): شكل الصفحة لا جملة «جارٍ التحميل» وحدها */
.skel-shell{padding-top:16px}
.skel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:24px}
.skel-grid .sk-card{height:150px}
/* أهداف اللمس 40 بكسل على الأقل في الهاتف */
@media (pointer:coarse){
  .chip{min-height:40px}
  .foot-links a{display:inline-flex; align-items:center; min-height:40px}
  .lk-src a{display:inline-block; padding:8px 2px}
  .fine .link, #authForgot{min-height:40px}
}

.contact-form{display:grid; gap:4px; margin-top:12px; max-width:520px}

/* الإشعار فوق ورقة الترجمة في الهاتف لا عليها */
body:has(.lk.sheet:not(.leaving)) .toast{inset-block-end:calc(min(56vh, 480px) + 16px)}
.lk-saved-link{margin:0 0 6px; font:var(--t-label-large)}
.lk-saved-link a{display:inline-flex; align-items:center; min-height:36px}
@media (pointer:coarse){
  .link-btn, .fine a, .fine .link, #emJoin, .lk-saved-link a{display:inline-flex; align-items:center; min-height:40px}
  [data-unsave]{min-width:40px; min-height:40px}
}

#subjectsHead{scroll-margin-top:110px}

.urgent-bar.leaving{animation:lk-out .15s cubic-bezier(.3,0,1,1) forwards; pointer-events:none}
.sent-in{animation:lk-in .22s cubic-bezier(.2,0,0,1)}
@media (prefers-reduced-motion:reduce){.urgent-bar.leaving,.sent-in{animation:none}}

/* ── جنباً إلى جنب للتمرين: جانب مخفي تُكشف فقراته واحدة واحدة ── */
.side-hide{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:12px}
.side-hide[hidden]{display:none}
.parallel.mode-both.hide-src .pair > p.src, .parallel.mode-both.hide-tgt .pair > p.tgt{position:relative}
.parallel.mode-both.hide-src .pair > p.src::after, .parallel.mode-both.hide-tgt .pair > p.tgt::after{
  content:'اضغط لتكشف هذه الفقرة'; position:absolute; inset:6px; z-index:2; display:grid; place-items:center; direction:rtl;
  border-radius:12px; border:1px dashed var(--md-sys-color-outline-variant); background:var(--md-sys-color-surface-container-high);
  color:var(--md-sys-color-on-surface-variant); font:500 .875rem/1.5 var(--ff-read); transition:opacity .2s ease-out}
.parallel.mode-both.hide-src .pair:not(.open-src) > p.src, .parallel.mode-both.hide-tgt .pair:not(.open-tgt) > p.tgt{cursor:pointer; user-select:none; -webkit-user-select:none}
.parallel.mode-both.hide-src .pair.open-src > p.src::after, .parallel.mode-both.hide-tgt .pair.open-tgt > p.tgt::after{opacity:0; pointer-events:none}
.parallel .pair > p[role=button]:focus-visible{outline:2px solid var(--primary); outline-offset:-4px}
@media (prefers-reduced-motion:reduce){.parallel .pair > p::after{transition:none}}
@media print{.side-hide{display:none} .parallel .pair > p::after{display:none}}

/* ── تمرين الحفظ: المصطلحات وكلماتك، جانب مخفي يُكشف سطراً سطراً ── */
.rh-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px}
.rh-how{margin:0 0 10px}
.rh-row > span{transition:color .18s ease-out, background-color .18s ease-out; border-radius:6px}
.rh:not([data-hide=none]) .rh-row{cursor:pointer}
.rh:not([data-hide=none]) .rh-row:hover{background:var(--md-sys-color-surface-container)}
.rh-row:focus-visible{outline:2px solid var(--primary); outline-offset:-2px}
.rh[data-hide=ar] .rh-row:not(.open) > [lang=ar], .rh[data-hide=en] .rh-row:not(.open) > [lang=en]{
  color:transparent; background:var(--md-sys-color-surface-container-highest, var(--md-sys-color-surface-container-high));
  min-width:4.5em; user-select:none; -webkit-user-select:none}
@media (prefers-reduced-motion:reduce){.rh-row > span{transition:none}}
@media print{.rh-bar,.rh-how{display:none} .rh .rh-row > span{color:inherit !important; background:none !important}}

/* ── المشاركة ── */
.from-tag{display:inline-block; margin-inline-start:6px; padding:1px 8px; border-radius:var(--r-full); font:500 .75rem/1.6 var(--ff-read);
  background:var(--md-sys-color-secondary-container, var(--primary-container)); color:var(--md-sys-color-on-secondary-container, var(--on-surface)); vertical-align:middle}
.share-pick{display:grid; gap:10px; margin:12px 0}
.share-pick .share-check{display:flex; flex-direction:row; align-items:center; gap:10px; min-height:40px; margin:0; cursor:pointer; font:inherit; color:inherit}
.share-pick .share-check input[type=checkbox]{flex:none; width:20px; height:20px; min-height:0; margin:0; padding:0; border:0; accent-color:var(--primary)}
.share-err{color:var(--md-sys-color-error); margin:8px 0 0}
.share-mine{margin-bottom:16px}
.share-mine p{margin:0 0 6px}
.share-text{display:flex; align-items:center; gap:10px; font-size:1rem; margin:18px 0 8px}
#shareUrl{font-family:var(--ff-en); width:100%}

/* ── الهاتف ولوحة المفاتيح: الورقة تبقى ملتصقة فوق اللوحة ولا تقفز، وشريط التنقل يختفي أثناء الكتابة ── */
.lk.sheet{bottom:var(--kb, 0px)}
.lk.sheet:focus-within{max-height:calc(100dvh - var(--kb, 0px) - 12px)}
@media (pointer:coarse){body:has(:is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus) .bottom-nav{display:none}}

/* ── «أبرز ملاحظاتي»: كل العلامات تتوهّج معاً (لمن طلب تقليل الحركة: إبراز ثابت بلا نبض) ── */
.nt-spot mark.nt{background:color-mix(in oklab,var(--nt-c) 72%,transparent); box-shadow:0 0 0 2px color-mix(in oklab,var(--nt-c) 80%,transparent);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; animation:nt-spot 1.1s ease-in-out infinite alternate}
@keyframes nt-spot{from{background:color-mix(in oklab,var(--nt-c) 72%,transparent); box-shadow:0 0 0 2px color-mix(in oklab,var(--nt-c) 80%,transparent)}
  to{background:color-mix(in oklab,var(--nt-c) 28%,transparent); box-shadow:0 0 0 6px color-mix(in oklab,var(--nt-c) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.nt-spot mark.nt{animation:none}}
@media print{.nt-spot mark.nt{animation:none; box-shadow:none}}


/* الإنجليزية يساراً دائماً، كما في ترجمة Google: الأصل الإنجليزي في العمود الأيسر، والأصل العربي في الأيمن.
   الاتجاه للشبكة وحدها؛ كل فقرة تحمل dir الخاص بها. */
.pair{direction:ltr}
.parallel.src-ar .pair{direction:rtl}
.pair > .cmp{direction:rtl}
.morph-ex span small{display:block; margin-top:2px; font-size:.8125rem; color:var(--md-sys-color-on-surface-variant)}
/* عبارة طويلة: النص المحدَّد في ثلاثة أسطر بخط أصغر، والترجمة تحته */
.lk-long .lk-head strong{font:var(--t-body-large); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.lk-long .lk-tr{font:var(--t-body-large); line-height:1.8}
/* «أراجعها لاحقاً»: بنفسجي أهدأ يجاور الأحمر والأصفر والأخضر، والأسماء في سطر واحد */
:root{--nt-b:#8e7bd8}
.nt-sw{white-space:nowrap}

/* «أخفِ الفقرة»: زر في أسفل الفقرة المكشوفة نفسها. الفقرتان في خانتين ثابتتين من شبكة الزوج، والزر فوق خانة الجهة المخفية */
.veil-btn{display:none}
.parallel.mode-both .pair > p.src{grid-area:1 / 1} .parallel.mode-both .pair > p.tgt{grid-area:1 / 2}
.parallel.mode-both.hide-src .pair.open-src > .veil-btn{display:inline-flex; grid-area:1 / 1}
.parallel.mode-both.hide-tgt .pair.open-tgt > .veil-btn{display:inline-flex; grid-area:1 / 2}
.parallel.mode-both .pair > .veil-btn{position:relative; z-index:3; align-self:end; justify-self:end; margin:0 12px 10px; align-items:center; min-height:36px; padding:0 14px;
  border:1px solid var(--md-sys-color-outline); border-radius:var(--r-full); background:var(--md-sys-color-surface-container-high);
  color:var(--md-sys-color-on-surface); font:500 .8125rem/1 var(--ff); cursor:pointer; direction:rtl; animation:veil-btn-in .18s ease-out}
.parallel.mode-both .pair > .veil-btn:hover{background:var(--md-sys-color-surface-container-highest)}
.parallel.mode-both.hide-src .pair.open-src > p.src, .parallel.mode-both.hide-tgt .pair.open-tgt > p.tgt{padding-bottom:56px}
@keyframes veil-btn-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.veil-btn{animation:none !important}}
@media (max-width:820px){
  .parallel.mode-both .pair > p.tgt{grid-area:2 / 1}
  .parallel.mode-both.hide-tgt .pair.open-tgt > .veil-btn{grid-area:2 / 1}
}
@media print{.veil-btn{display:none !important}}

/* ── الشرائح: فقرة واحدة تملأ الشاشة، والسابق والتالي في شريط سفلي ── */
.zoom-btn{display:none}
.parallel .pair{position:relative}
.parallel .pair > .zoom-btn{display:grid; place-items:center; position:absolute; z-index:4; top:8px; left:50%; translate:-50% 0; width:32px; height:32px; padding:0;
  border:1px solid var(--md-sys-color-outline-variant); border-radius:50%; background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface-variant);
  cursor:pointer; opacity:0; transition:opacity .15s}
.parallel .pair:hover > .zoom-btn, .parallel .pair > .zoom-btn:focus-visible{opacity:1}
.parallel:is(.mode-en,.mode-ar,.mode-practice,.mode-practice-r) .pair > .zoom-btn{left:auto; inset-inline-end:8px; translate:none}
@media (pointer:coarse){.parallel .pair > .zoom-btn{opacity:.85; left:auto; right:6px; translate:none} .parallel .pair > p:first-of-type{padding-right:44px}}
.slides .parallel{position:fixed; inset:0; z-index:85; margin:0; display:grid; align-content:safe center; justify-items:center; overflow:auto;
  padding:32px max(24px, 6vw) 96px; background:var(--md-sys-color-surface); border:0; border-radius:0}
.slides .parallel .pair{display:none; width:min(1280px,100%)}
.slides .parallel .pair.slide-on{display:grid}
.slides .parallel .pair.slide-on > p{font-size:1.375rem; line-height:1.9; border-radius:20px !important; border-width:1px !important; border-style:solid !important}
.slides .parallel .pair.slide-on > p.tgt{font-size:1.5rem}
.slides .parallel .pair > .zoom-btn{display:none}
.slide-from-next{animation:slide-in-next .26s cubic-bezier(.2,0,0,1)}
.slide-from-prev{animation:slide-in-prev .26s cubic-bezier(.2,0,0,1)}
@keyframes slide-in-next{from{opacity:0; transform:translateX(-32px)}}
@keyframes slide-in-prev{from{opacity:0; transform:translateX(32px)}}
.slide-bar{position:fixed; z-index:86; inset-inline:0; bottom:0; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:color-mix(in oklab,var(--md-sys-color-surface) 92%,transparent); border-top:1px solid var(--md-sys-color-outline-variant)}
.slide-bar[hidden]{display:none}
.slide-n{min-width:72px; text-align:center; font:500 .9375rem var(--ff); font-variant-numeric:tabular-nums}
.slide-bar [data-sl=exit]{position:absolute; inset-inline-end:16px}
body.slides-on{overflow:hidden}
body.slides-on :is(.lk, .nt-tip){z-index:95}
@media (prefers-reduced-motion:reduce){.slide-from-next,.slide-from-prev{animation:none} .parallel .pair > .zoom-btn{transition:none}}
@media (max-width:820px){.slides .parallel{padding:20px 16px 96px} .slides .parallel .pair.slide-on > p{font-size:1.125rem} .slides .parallel .pair.slide-on > p.tgt{font-size:1.25rem}}
@media print{.zoom-btn,.slide-bar{display:none !important}}

/* المحاضرة التالية على خلفية «ثابتة» فاتحة في الوضعين: الوقت والأستاذ يأخذان لون نصها الداكن لا ألوانهما الفاتحة في الداكن */
:is(.tt-day li.next, .next-up) :is(time, small, .num, .muted, .sub, a){color:inherit; opacity:1}

/* ── اختبار من متعدد: أربعة خيارات كبيرة، الصحيح أخضر والخاطئ أحمر، والأرقام 1-4 من لوحة المفاتيح ── */
.wq-opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:8px; margin:12px 0}
.wq-opt{display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 14px; text-align:start; cursor:pointer;
  border:1px solid var(--md-sys-color-outline-variant); border-radius:14px; background:var(--md-sys-color-surface-container-low); color:inherit;
  font:var(--t-body-large); line-height:1.5; transition:background-color .15s, border-color .15s}
.wq-opt:hover:not(:disabled){border-color:var(--md-sys-color-primary); background:color-mix(in oklab,var(--md-sys-color-primary) 8%,transparent)}
.wq-opt:focus-visible{outline:2px solid var(--md-sys-color-primary); outline-offset:2px}
.wq-opt:disabled{cursor:default; opacity:.6}
.wq-opt.right,.wq-opt.right:disabled{opacity:1; border-color:var(--nt-g); background:color-mix(in oklab,var(--nt-g) 22%,transparent)}
.wq-opt.wrong,.wq-opt.wrong:disabled{opacity:1; border-color:var(--nt-p); background:color-mix(in oklab,var(--nt-p) 20%,transparent)}
.wq-k{flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font:600 .8125rem var(--ff-en);
  background:var(--md-sys-color-surface-container-highest); color:var(--md-sys-color-on-surface-variant)}
.wq-top{flex-wrap:wrap; gap:8px}
.mst{display:inline-block; margin-inline-start:6px; padding:1px 8px; border-radius:var(--r-full); font:500 .75rem/1.6 var(--ff);
  background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface-variant)}
.mst.ok{background:color-mix(in oklab,var(--nt-g) 24%,transparent); color:var(--md-sys-color-on-surface)}
@media (prefers-reduced-motion:reduce){.wq-opt{transition:none}}

/* ═══ على طريقة ترجمة Google ═══
   نافذة الترجمة: شريط اللغتين، العبارة كبيرة، أزرار أيقونات دائرية بتلميح، والترجمة في لوحة مظللة.
   القارئ: أزرار العرض حبوب، شريط لغتين (الإنجليزية يساراً) فوق لوحتين مستديرتين، وبطاقة لكل فقرة على الهاتف. */
.gt-langs{display:flex; align-items:center; gap:10px; margin:-2px 0 8px; font:500 .8125rem/1 var(--ff); color:var(--md-sys-color-on-surface-variant)}
.gt-langs span{padding-bottom:6px; border-bottom:2px solid var(--md-sys-color-primary); color:var(--md-sys-color-primary)}
.gt-langs svg{width:18px; height:18px; opacity:.7}
.lk-head strong{font:400 1.5rem/1.35 var(--ff-en)}
.lk-head strong[lang=ar]{font-family:var(--ff)}
.lk-long .lk-head strong{font:var(--t-body-large)}
.lk-acts{gap:0}
.gt-ic{display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer;
  color:var(--md-sys-color-on-surface-variant); transition:background-color .15s, color .15s}
.gt-ic:hover{background:color-mix(in oklab,var(--md-sys-color-on-surface) 8%,transparent); color:var(--md-sys-color-on-surface)}
.gt-ic:focus-visible{outline:2px solid var(--md-sys-color-primary); outline-offset:1px}
.gt-ic.lk-save.on{background:none; color:var(--md-sys-color-primary)}
.lk .lk-sec:first-of-type{border-top:0; margin:4px 0 6px; padding:12px 14px; border-radius:16px; background:color-mix(in oklab,var(--md-sys-color-primary) 10%,var(--md-sys-color-surface-container-highest))}
.lk .lk-sec:first-of-type .lk-tr{font:400 1.375rem/1.5 var(--ff); color:var(--md-sys-color-on-surface)}
.lk-long .lk-sec:first-of-type .lk-tr{font:var(--t-body-large); line-height:1.8}
.lk .lk-sec:first-of-type h4{font-size:.75rem; margin-bottom:4px}
@media (prefers-reduced-motion:reduce){.gt-ic{transition:none}}

.reader-head .seg:not(.seg-sm){border:0; gap:8px; background:none}
.reader-head .seg:not(.seg-sm) button{border:1px solid var(--md-sys-color-outline); border-radius:var(--r-full); min-height:40px; padding:0 16px}
.reader-head .seg:not(.seg-sm) button[aria-pressed="true"]{background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); border-color:var(--md-sys-color-primary)}
.reader-head .seg:not(.seg-sm) button[aria-pressed="true"]::before{content:none}
.gt-bar{display:grid; grid-template-columns:1fr 40px 1fr; align-items:end; gap:12px; margin-top:var(--s3)}
.gt-bar span{padding:0 4px 8px; border-bottom:2px solid var(--md-sys-color-primary); color:var(--md-sys-color-primary); font:500 .875rem/1 var(--ff)}
.gt-bar span:first-child{justify-self:start} .gt-bar span:last-child{justify-self:end}
.gt-bar svg{justify-self:center; width:22px; height:22px; margin-bottom:6px; color:var(--md-sys-color-on-surface-variant)}
.gt-bar:has(+ .parallel:not(.mode-both)){display:none}
.parallel{margin-top:8px; gap:0; background:none; border:0; border-radius:0; overflow:visible}
.parallel.mode-both .pair{column-gap:12px; background:none}
.parallel .pair{background:none}
.parallel .pair > p{background:var(--md-sys-color-surface-container-low); border:1px solid var(--md-sys-color-outline-variant); border-block-width:0}
.parallel .pair > p.src{border-inline-end:1px solid var(--md-sys-color-outline-variant)}
.parallel .pair > p.tgt{background:var(--md-sys-color-surface-container)}
.parallel .pair + .pair > p{border-top:1px dashed var(--md-sys-color-outline-variant)}
.parallel .pair:first-child > p{border-top:1px solid var(--md-sys-color-outline-variant); border-start-start-radius:16px; border-start-end-radius:16px; padding-top:var(--s3)}
.parallel .pair:last-child > p, .parallel .pair:nth-last-child(1 of .pair) > p{border-bottom-width:1px; border-bottom-style:solid; border-end-start-radius:16px; border-end-end-radius:16px; padding-bottom:var(--s3)}
.parallel .pair:target > p{box-shadow:inset 0 0 0 2px var(--md-sys-color-primary)}
.parallel:not(.mode-both) .pair > .cmp{background:var(--md-sys-color-surface-container-low); border-inline:1px solid var(--md-sys-color-outline-variant)}
@media (max-width:820px){
  .gt-bar{display:none}
  .parallel{display:grid; gap:12px}
  .parallel .pair{border-radius:16px; overflow:hidden; border:1px solid var(--md-sys-color-outline-variant)}
  .parallel .pair > p, .parallel .pair + .pair > p, .parallel .pair:first-child > p, .parallel .pair:nth-last-child(1 of .pair) > p{border:0; border-radius:0; padding:var(--s2) var(--s3)}
  .parallel.mode-both .pair > p.src{border-bottom:1px solid var(--md-sys-color-outline-variant)}
}
@media print{.gt-bar{display:none} .parallel .pair > p{background:none !important}}

/* ═══ مجموعة الدراسة (1 Nov): حلقة التقدّم، أكمل القراءة، بلا إنترنت، خمسة اليوم، الكلمات المترابطة، فحص الترجمة، الامتحان التجريبي، الدفتر ═══ */
/* حلقة التقدّم حول رقم النص: ما قرأته منه */
.idx.seq.ring{position:relative; background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface)}
.idx.seq.ring::before{content:''; position:absolute; inset:-3px; border-radius:inherit; padding:3px;
  background:conic-gradient(var(--md-sys-color-primary) calc(var(--p) * 1%), var(--md-sys-color-outline-variant) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.idx.seq.ring.full{background:color-mix(in oklab,var(--nt-g) 24%,transparent)}
.idx.seq.ring.full::before{background:var(--nt-g)}
.resume-card{display:flex; align-items:center; gap:14px; margin-bottom:16px; text-decoration:none; color:inherit}
.resume-card .grow{display:grid; gap:2px}
.resume-card:hover{border-color:var(--md-sys-color-primary)}
.resume-chip{margin:12px 0 0}
/* بلا إنترنت */
.off-row{display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px}
.off-row .grow{display:grid; gap:2px; min-width:200px}
.off-ic{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--md-sys-color-surface-container-high); flex:none}
.off-bar{margin-top:12px}
/* خمسة اليوم */
.d5 .section-head{margin-bottom:8px}
.d5-done{margin:0 0 8px}
.d5-remind{display:flex; align-items:center; gap:8px; margin-top:10px; min-height:40px; font:var(--t-body-medium); color:var(--md-sys-color-on-surface-variant); cursor:pointer}
.d5-remind input{width:18px; height:18px; margin:0; accent-color:var(--primary)}
.rv-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; max-width:560px; margin:0 auto 12px}
/* الكلمات المترابطة */
::highlight(lk-link){background-color:color-mix(in oklab,var(--md-sys-color-primary) 34%,transparent)}
::highlight(lk-link-s){background-color:color-mix(in oklab,var(--md-sys-color-primary) 9%,transparent)}
/* فحص الترجمة */
/* الامتحان التجريبي */
.mock-link{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 20px}
.mock-format{margin:0; padding-inline-start:20px}
.mock-bar{position:sticky; top:var(--appbar-h, 64px); z-index:30; display:flex; align-items:center; gap:12px; padding:10px 14px; margin-bottom:16px;
  border-radius:14px; background:var(--md-sys-color-surface-container-high); border:1px solid var(--md-sys-color-outline-variant)}
.mock-bar strong{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mock-time{font:600 1.125rem var(--ff-en); font-variant-numeric:tabular-nums; direction:ltr}
.mock-time.low{color:var(--md-sys-color-error)}
.mock-q h2{font-size:1.0625rem}
.mock-src{padding:14px 16px; border-radius:14px; background:var(--md-sys-color-surface-container-low); line-height:1.9; margin:0 0 10px}
.mock-src[dir=ltr]{font-family:var(--ff-en); text-align:left}
.mock-draft{width:100%; box-sizing:border-box; min-height:160px; padding:12px 14px; border-radius:14px; border:1px solid var(--md-sys-color-outline); background:var(--md-sys-color-surface); color:inherit; font:var(--t-body-large); line-height:1.8}
.mock-list{display:grid; gap:14px; padding-inline-start:22px}
.mock-list p{margin:0 0 6px}
.mock-opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:6px}
.mock-opts label{display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 12px; border-radius:12px; border:1px solid var(--md-sys-color-outline-variant); cursor:pointer}
.mock-opts label:has(input:checked){border-color:var(--md-sys-color-primary); background:color-mix(in oklab,var(--md-sys-color-primary) 10%,transparent)}
.mock-opts input{width:18px; height:18px; margin:0; accent-color:var(--primary); flex:none}
.mock-list li.ok strong + span{color:var(--nt-g)} .mock-list li.miss strong + span{color:var(--nt-p)}
.mock-compare{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.mock-compare > div{padding:12px 14px; border-radius:14px; background:var(--md-sys-color-surface-container-low); line-height:1.9}
.mock-compare p{margin:0}
@media (max-width:820px){.mock-compare{grid-template-columns:1fr}}
/* الدفتر */
.bk-checks{display:flex; flex-wrap:wrap; gap:8px 18px}
.bk-checks label{display:flex; align-items:center; gap:8px; min-height:40px; cursor:pointer}
.bk-checks input{width:18px; height:18px; margin:0; accent-color:var(--primary)}
.bk-sec{margin-top:24px}
.bk-sec[hidden]{display:none}
.bk-table{width:100%; border-collapse:collapse; font:var(--t-body-medium)}
.bk-table th,.bk-table td{padding:8px 10px; border-bottom:1px solid var(--md-sys-color-outline-variant); text-align:start; vertical-align:top}
.bk-table td[dir=ltr]{text-align:left; font-family:var(--ff-en)}
.bk-notes{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.bk-notes li{display:flex; gap:10px; align-items:baseline}
@media print{
  .appbar,.drawer,.bottom-nav,.foot,.fatiha,.bk-tools,.skip,.toast,.urgent-bar,.renew-note{display:none !important}
  body{background:#fff; color:#000; padding:0}
  #bookletView .page-head h1{font-size:22pt; margin:0}
  .bk-sec{break-inside:auto; margin-top:14pt} .bk-sec h2{font-size:15pt; border-bottom:2px solid #000; padding-bottom:4pt} .bk-sec h3{font-size:12pt; margin:12pt 0 4pt}
  .bk-table th,.bk-table td{border-bottom:1px solid #999; padding:4pt 6pt; color:#000} .bk-table tr{break-inside:avoid}
  .bk-notes li{break-inside:avoid}
  .mock-bar{display:none}
}
.resume-card .idx{display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; font-weight:600}

/* ── صفحة النص: الأدوات النادرة (ورقة الأستاذ، الشرائح، المشاركة، الطباعة) في «المزيد» ── */
.reader-tools{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-inline-start:auto}
.reader-head .chips{align-items:center}
.more-menu{position:relative; z-index:36}   /* translate على ::details-content يصنع طبقة؛ بلا z-index تغطيها أزرار «للتمرين» بعدها */
.more-menu > summary{list-style:none; cursor:pointer; user-select:none}
.more-menu > summary::-webkit-details-marker{display:none}
.more-menu > summary svg{width:16px; height:16px; transform:rotate(-90deg); transition:transform .2s cubic-bezier(.2,0,0,1)}
.more-menu[open] > summary svg{transform:rotate(90deg)}
.more-menu[open] > summary{background:var(--primary-container); color:var(--on-primary-container)}
.mm-list{position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:35; min-width:240px; padding:6px;
  border-radius:16px; background:var(--md-sys-color-surface-container); border:1px solid var(--md-sys-color-outline-variant);
  box-shadow:0 8px 24px rgb(0 0 0 / .14)}
.more-menu::details-content{opacity:0; translate:0 -4px; transition:opacity .16s cubic-bezier(.2,0,0,1), translate .16s cubic-bezier(.2,0,0,1), content-visibility .16s allow-discrete}
.more-menu[open]::details-content{opacity:1; translate:0 0}
@starting-style{.more-menu[open]::details-content{opacity:0; translate:0 -4px}}
.mm-item{display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:8px 12px; border:none; border-radius:10px;
  background:none; color:var(--md-sys-color-on-surface); font:inherit; text-align:start; text-decoration:none; cursor:pointer}
.mm-item:hover,.mm-item:focus-visible{background:var(--md-sys-color-surface-container-highest)}
.mm-item svg{width:20px; height:20px; flex:0 0 20px; color:var(--md-sys-color-on-surface-variant)}
.mm-item small{display:block; font-size:12px}
@media (prefers-reduced-motion:reduce){.more-menu::details-content,.more-menu > summary svg{transition:none}}
@media print{.reader-tools{display:none}}

/* ── الامتحان التجريبي على الهاتف: الشريط العلوي يمرّ، فشريط الوقت يلتصق بحافة الشاشة لا تحتها بـ64px ── */
.mock-bar{box-shadow:0 4px 14px rgb(0 0 0 / .08)}
@media (max-width:820px){
  .mock-bar{top:0; margin-inline:-16px; border-radius:0 0 14px 14px; border-top:none; padding-top:calc(10px + env(safe-area-inset-top))}
}

/* أوضاع القراءة الخمسة تلتف إلى سطر ثانٍ على الهاتف: ارتفاع .seg الثابت (40px) مع overflow:hidden كان يقصّ «تدرّب» و«تدرّب بالعكس» */
.reader-head .seg:not(.seg-sm){height:auto; overflow:visible}

/* بطاقة الرمز المصغّرة على الهاتف: سطر عنوان وسطر حقل، بلا أيقونة فوقهما */
@media (max-width:560px){ .join-card.compact .join-ico{display:none} .join-card.compact{gap:8px} }

/* ── «طريقة الاستخدام»: أفلام الهاتف (features/guide.js) ── */
.guide-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px}
@media (min-width:821px){.guide-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
.guide-card{display:flex; flex-direction:column; gap:6px; padding:0; border:none; background:none; color:inherit; font:inherit; text-align:start; cursor:pointer}
.guide-poster{position:relative; display:block; aspect-ratio:9/16; border-radius:16px; overflow:hidden; background:var(--md-sys-color-surface-container-high); border:1px solid var(--md-sys-color-outline-variant)}
.guide-poster img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s cubic-bezier(.2,0,0,1)}
.guide-card:hover .guide-poster img{transform:scale(1.03)}
.guide-card:focus-visible{outline:none} .guide-card:focus-visible .guide-poster{outline:3px solid var(--md-sys-color-primary); outline-offset:2px}
.guide-play{position:absolute; inset:auto auto 10px 10px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); box-shadow:0 4px 12px rgb(0 0 0 / .25)}
.guide-play svg{width:22px; height:22px; fill:currentColor}   /* ▶ يتجه يميناً في كل لغة، كأزرار التشغيل كلها */
.guide-dur{position:absolute; inset:10px 10px auto auto; padding:2px 8px; border-radius:99px; background:#2f3036; color:#fff; font:500 .75rem/1.6 var(--ff-en); direction:ltr}
.guide-t{font:var(--t-title-small, 500 15px/22px var(--ff)); color:var(--md-sys-color-on-surface)}
.guide-b{font:var(--t-body-small, 400 13px/19px var(--ff)); color:var(--md-sys-color-on-surface-variant)}
.guide-player{padding:0; border:none; background:transparent; max-width:min(92vw,440px); width:100%}
.guide-player::backdrop{background:rgb(10 14 24 / .82)}
.guide-player[open]{animation:guide-in .2s cubic-bezier(.2,0,0,1)}
@keyframes guide-in{from{opacity:0; transform:translateY(12px)}}
.guide-player-in{display:flex; flex-direction:column; gap:10px}
.guide-player video{width:100%; max-height:78vh; aspect-ratio:9/16; border-radius:18px; background:#000; display:block}
.guide-player-bar{display:flex; align-items:center; gap:8px; padding:10px; border-radius:16px; background:var(--md-sys-color-surface-container-high)}
.guide-player-bar{flex-wrap:wrap}
.guide-player-t{order:-1; flex:1 1 100%; text-align:center; padding:2px 8px 4px}   /* العنوان سطر كامل فوق الأزرار، لا يُقصّ بينها */
.guide-player-bar [data-gp=prev],.guide-player-bar [data-gp=next]{flex:1}
@media (prefers-reduced-motion:reduce){.guide-player[open]{animation:none} .guide-poster img{transition:none}}

/* اختبار الكلمات داخل بطاقة ضيقة (خمسة اليوم على الهاتف): زرّا الاتجاه يتقاسمان العرض بدل أن يُقصّ الثاني تحت ارتفاع .seg الثابت */
.wq-top .seg{display:flex; max-width:100%; height:auto; min-height:40px}
.wq-top .seg button{flex:1 1 auto; min-width:0; height:auto; min-height:40px; padding-block:6px; white-space:normal; line-height:1.25}