/* css/fonts.css */
/* منظّمي — خط التصميم IBM Plex Sans Arabic مستضافاً داخل التطبيق (لا من Google): يظهر دائماً كما في لوحة التصميم،
   ودون اتصال، ويُخزَّن في sw.js. الرخصة: SIL Open Font License 1.1 (fonts/OFL.txt). */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-arabic-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-arabic-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-arabic-500-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-arabic-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex-arabic-600-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex-arabic-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/plex-arabic-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/plex-arabic-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* css/base.css */
/* منظّمي — المتغيرات والتخطيط والمكوّنات الأساسية
   جزء من index.html قُسِّم في المهمة 0.5؛ لا يُعاد ترتيب الملفات في index.html.
   «سماء واحدة» (design-reference/identity/tokens.css): الليلي هو الأصل، و«أسود خالص» تحته، و«فجر» الفاتح في css/dawn.css (اعتمده المالك 22 أكتوبر). */

:root {
  color-scheme: dark;
  --sky-top: #070A14; --sky-horizon: #131A30; --sky-0: #0A0D18;
  --surface: #141827; --surface-2: #1C2134; --surface-3: #242A40; --line: #2C3246;
  --surface-sheet: var(--surface); /* الألواح معتمة دائماً (design-reference/plus-offer): «فجر» سطوحه شفافة فتبان الشاشة من تحت */
  --text: #F2EFE8; --text-2: #A9B1C4; --text-3: #8D95AA;
  --ink: var(--text); --on-ink: var(--sky-0); /* «حبر وقمر» (اعتمده المالك 6 نوفمبر): الزر الرئيسي بلون الكلام، والقمر للتقدّم، والوردي للعلامات */
  --rose: #EBA0AA; --on-rose: #3A141B; --aura-sky: #8EA6F5; /* توهج «الأستاذ على ملفك»: سماوي وانت تتكلم، والوردي وهو يتكلم */
  --moon: #F2DCA6; --moon-disc: #F2DCA6; --moon-dark: #1E2338; --moon-wash: #29261C; --moon-rim: rgba(242, 220, 166, 0.3); --moon-hi: #FBEBC4; --moon-lo: #E9CF92;
  --star: #DCE5F8; --gloss-ink: #2B4585; --gloss-under: rgba(251, 243, 220, 0.92);
  --ember: #FF8C68; --ember-wash: #2A1A17;
  --cloud: rgba(58, 65, 96, 0.85); --dawn: #E9A27F; --dawn-a: 0.22; --dust: #C9D2E8; --dust-a: 0.35; --band-a: 0.14; --stars-a: 1;
  --on-planet: #10131F; --planet-shade: rgba(7, 10, 20, 0.26);
  --glass-bg: rgba(20, 24, 39, 0.72); --glass-rim: rgba(255, 255, 255, 0.08); --glass-solid: rgba(26, 31, 49, 0.96);
  --scrim: rgba(5, 7, 14, 0.6);
  --hl-y: rgba(245, 197, 66, 0.45); --hl-g: rgba(76, 195, 138, 0.35); --hl-p: rgba(240, 139, 176, 0.4); --hl-b: rgba(106, 168, 240, 0.38); /* تظليل الملاحظات */
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-float: 0 0 0 transparent; /* الليل بلا ظلال؛ ظل شفاف لا none حتى يصح داخل قوائم box-shadow */
  --glow-moon: radial-gradient(circle, rgba(242, 220, 166, 0.35) 0, rgba(242, 220, 166, 0) 70%);
  --mark-dot: #EBA0AA;
  /* الصندوق v3 (css/chest.css، اعتمده المالك 22 أكتوبر): ألوان الندرة (عادي فضي، نادر سماوي، نادر جداً وردي، أسطوري ذهب القمر)، ثابتة مع ثيمات التراث،
     وكسوات الصندوق الثلاث (الليلة، البدر، الهدية) من ألوان السماء نفسها، والوميض وشريط الهدية */
  --rar-c: #C9D2E8;
  --rar-r: #8CC5F0;
  --rar-e: #EBA0AA;
  --rar-l: #FFD27A;
  --chest-flash: #FFF7E3;
  --chest-ribbon: #EBA0AA;
  --chest-night-a: color-mix(in srgb, var(--aura-sky) 58%, var(--moon-dark));
  --chest-night-b: color-mix(in srgb, var(--aura-sky) 12%, var(--moon-dark));
  --chest-night-trim: var(--dust);
  --chest-badr-a: color-mix(in srgb, var(--rar-l) 82%, var(--moon-dark));
  --chest-badr-b: color-mix(in srgb, var(--rar-l) 36%, var(--moon-dark));
  --chest-badr-trim: color-mix(in srgb, var(--rar-l) 34%, var(--moon-dark));
  --chest-gift-a: color-mix(in srgb, var(--chest-ribbon) 48%, var(--moon-dark));
  --chest-gift-b: color-mix(in srgb, var(--chest-ribbon) 12%, var(--moon-dark));
  --chest-gift-trim: var(--moon);
  /* ورق الملفات المصغّر (فاتح في كل المظاهر): نص الليل في ليلي والأسود، وأبيض في فجر (css/dawn.css) */
  --paper-bg: var(--text); --paper-ln: var(--text-3); --paper-ink: var(--sky-0);
  --paper-warm: #F6EEDC; /* «شكل القراءة» الدافئ: يُضرب فوق الصفحة (multiply) فيدفي الأبيض ويخلّي الحبر (js/pdf-look.js) */
  --sw-night: #0A0D18; --sw-black: #000000; --sw-dawn: linear-gradient(180deg, #A9B0DE, #EBD3E2 55%, #FEE6C9); /* عيّنات المظهر: ثابتة في كل المظاهر */

  /* أحبار المواد التسعة (كواكب): لمعان وتشبّع واحد */
  --c-teal: #77CFCF; --c-blue: #8CC5F0; --c-indigo: #AABBF5; --c-violet: #C6B2ED; --c-plum: #DCABDA;
  --c-henna: #E6B285; --c-olive: #BFC483; --c-green: #96CEA1; --c-slate: #AFBFD5;

  /* الخط والمقاسات: بوحدة rem فتكبر مع «حجم الخط» */
  --font: 'IBM Plex Sans Arabic', 'SF Arabic', system-ui, sans-serif;
  --t-display: 700 2.125rem/2.75rem var(--font); --t-title: 700 1.75rem/2.25rem var(--font); --t-subtitle: 700 1.375rem/1.875rem var(--font);
  --t-display-wide: 700 2.75rem/3.375rem var(--font);
  --t-head: 700 1.125rem/1.625rem var(--font); --t-body: 400 1rem/1.625rem var(--font); --t-read: 400 1.0625rem/1.875rem var(--font);
  --t-label: 500 0.875rem/1.25rem var(--font); --t-button: 700 0.9375rem/1.25rem var(--font); --t-caption: 500 0.8125rem/1.125rem var(--font);
  --t-micro: 500 0.75rem/1rem var(--font);
  --t-num-s: 700 1.75rem/2.125rem var(--font); --t-num-l: 700 2.75rem/3rem var(--font); --t-num-xl: 700 3.5rem/3.75rem var(--font);
  --t-timer: 500 4rem/4rem var(--font); --t-alarm: 500 4.5rem/4.5rem var(--font);

  --r-thumb: 8px; --r-chip: 10px; --r-field: 14px; --r-panel: 22px; --r-sheet: 28px; --r-pill: 999px;
  --r-kbd: 6px; --r-mark: 3px; /* تظليل الكلمة في نتائج «اكتب أي شي» */ --r-row: 16px; --r-dock: 18px; --r-lens: 20px; /* مفتاح ⌘K، صف الشريط الجانبي، المؤقت المثبّت، عدسة التبويب وبطاقة «أنا» */
  --t-nav: 500 0.9375rem/1.25rem var(--font);
  --dur-1: 160ms; --dur-2: 280ms; --dur-3: 420ms; --dur-4: 500ms;
  --dur-pulse: 2400ms; --dur-twinkle: 5000ms; --dur-fly: 1200ms; /* «قمر الجلسة»: نبض نجمة الجلسة الجاية، وميض الكوكبة، وطيران نجمة الجلسة (css/focus-sky.css) */
  --dur-spin: 1100ms; /* دورة مؤشر «يفكر» الهادية (حلقة الأستاذ على ملفك) */
  --pg-dim: 0.5; /* أخفت ما تصله الصفحة وقت التنقل: لا تنطفي الشاشة (ملاحظة المالك 17 أكتوبر) */
  /* S2 (screens-motion.js): الجديدة بعد القديمة، وشريط «اكتب أي شي» يسبقها بـ 40ms. الفاصل 80 لا 140 (المالك 23 أكتوبر: كان يبان سواد
     لحظي بين الصفحتين ~0.07 ثانية): الجديدة تبدأ والقديمة تختفي، مثل Fade through في Material */
  --pg-gap: 80ms; --pg-bar: 320ms; --pg-bar-gap: 40ms;
  --pg-shift: 8px; --pg-fold: 0.2; /* S2: إزاحة الصفحة وهي تطلع وتدخل، وعرض شريط «اكتب أي شي» وهو منطوٍ */
  --ease-out: cubic-bezier(0.22, 0.8, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); --ease-emph: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --press-scale: 0.97;
  --lg-spot: rgba(255, 255, 255, 0.26); --lg-spot-2: rgba(255, 255, 255, 0.07); --lg-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.38), inset 0 2px 8px rgba(255, 255, 255, 0.18); /* لمسة الزجاج (js/glass-press.js) */
  --menu-w: 280px; --ease-menu: cubic-bezier(0.34, 1.3, 0.64, 1); /* «قائمة أبل» (css/app-menu.css): العرض ونابض أهدى من --ease-spring */
  --menu-bg: rgba(30, 31, 38, 0.74); --menu-rim: rgba(255, 255, 255, 0.16); --menu-line: rgba(255, 255, 255, 0.1); --menu-sep: rgba(0, 0, 0, 0.22); --menu-hot: rgba(255, 255, 255, 0.1); --menu-drop: 0 18px 50px rgba(0, 0, 0, 0.32);

  /* ── الأسماء القديمة (نحو 1600 استخدام) تشير للجديدة؛ تُستبدل شاشة شاشة ثم تُحذف ── */
  --bg-base: var(--sky-0);
  --bg-surface-1: var(--surface);
  --bg-surface-2: var(--surface-2);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --border-subtle: var(--line);
  --border-strong: color-mix(in srgb, var(--text-3) 25%, var(--line)); /* خط أوضح من --line لحدود الأدوات */
  --accent-primary: var(--rose);
  --on-accent: var(--on-rose);
  --accent-hover: color-mix(in srgb, var(--ink) 88%, var(--sky-0));
  --accent-active: color-mix(in srgb, var(--ink) 80%, var(--sky-0));
  --accent-subtle-bg: var(--surface-2);
  --semantic-success: var(--moon);
  --semantic-warning: var(--ember);
  --semantic-danger: var(--ember);
  --on-danger: var(--on-planet);
  --warn-bg: var(--ember-wash);
  --warn-fg: var(--ember);
  --success-bg: var(--moon-wash);
  --success-fg: var(--moon);
  --muted-bg: var(--surface-2);
  --deco-sage: var(--c-green); --deco-gold: var(--c-henna);
  --tc-blue: var(--c-blue);
  --font-family: var(--font);
  --radius-md: var(--r-field);
  --radius-lg: var(--r-panel);
  --radius-card: var(--r-panel);
  --radius-xl: var(--r-sheet);
  --radius-2xl: var(--r-sheet);
  --radius-pill: var(--r-pill);
  --shadow-card: var(--rim);
  --shadow-soft: var(--rim);
  --shadow-modal: var(--shadow-float);
  --shadow-sheet: var(--shadow-float);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--text) 35%, transparent);
  --swatch-ring: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); /* العيّنة المختارة */
  --ring-line: inset 0 0 0 1px var(--line);
  /* قيم كانت مكتوبة يدوياً في ملفات الشاشات (design-lint، 8 نوفمبر): نفس القيمة، من المتغيرات */
  --edge-hl-b: inset -3px 0 0 var(--hl-b); --edge-hl-g: inset -3px 0 0 var(--hl-g); --edge-hl-p: inset -3px 0 0 var(--hl-p); --edge-hl-y: inset -3px 0 0 var(--hl-y); --edge-pen: inset -3px 0 0 var(--pen-2); --fs-micro: 11px; --fs-read: 1.0625rem; --fs-read-lead: 1.125rem; --fs-read-sm: 1rem; --halo-moon: 0 0 0 2px var(--moon); --halo-moon-3: 0 0 0 3px var(--moon); --halo-rose: 0 0 0 4px color-mix(in srgb, var(--rose) 22%, transparent); --halo-text: 0 0 0 1.5px var(--text); --r-corner-mark: 0 0 0 var(--r-mark); --r-none: 0; --r-round: 50%; --r-tray: 30px; --rim-top: inset 0 1px 0 var(--glass-rim); --ring-moon: inset 0 0 0 1.5px var(--moon); --ring-moon-2: inset 0 0 0 2px var(--moon); --ring-on-2: inset 0 0 0 2px var(--text); --ring-text3-2: inset 0 0 0 2px var(--text-3); --ring-on: inset 0 0 0 1px var(--text); /* حافة داخلية: عادية ومختارة */
  /* الدفعة 2 (9 نوفمبر): الدراسة وأنا واليوم والبداية وملخص الفصل */
  --r-hair: 1px; --r-tick: 2px; /* خط المؤشر وشعاع المسح وأعمدة الإصابات */ --ring-1: inset 0 0 0 1px; /* سُمك فقط، واللون من العنصر (لون المادة --pi) */ --ring-line-15: inset 0 0 0 1.5px var(--line); --ring-on-3: inset 0 0 0 3px var(--text); --ring-on-7: inset 0 0 0 7px var(--text); --ring-moon-ink-2: var(--ring-moon-2); --halo-moon-4: 0 0 0 4px color-mix(in srgb, var(--moon) 25%, transparent); --halo-moon-6: 0 0 0 6px color-mix(in srgb, var(--moon) 30%, transparent); --halo-moonrim-3: 0 0 0 3px var(--moon-rim); --glow-beam: 0 0 16px 5px color-mix(in srgb, var(--moon) 45%, transparent); --glow-scan: 0 0 18px 6px color-mix(in srgb, var(--moon) 40%, transparent);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-modal: 16px;
  --radius-tile: 18px;
  --radius-btn: 16px;
  --radius-check: 7px;

  --fs-display: 2rem;
  --fs-title: 1.25rem;
  --fs-body: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-caption: 0.75rem;
  --fs-large-title: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);
  --fs-hero: 2.125rem;
  --fs-stat-lg: 1.875rem;
  --fs-headline: 1.75rem;
  --fs-card-title: 1.3125rem;
  --fs-ring: 1.125rem;
  --fs-sheet-title: 1.0625rem;
  --fs-button: 1rem;
  --fs-callout: 0.875rem;
  --fs-micro: 0.6875rem;
  --fs-nano: 0.625rem;
  --control-h: 44px;
  --control-h-sm: 34px;
  /* الشريط الجانبي (css/desktop.css): عرضه وبُعده عن الحافة، وإزاحة المحتوى عنه. لا شريط أيقونات بعد «سماء واحدة» */
  --side-w: 240px;
  --side-gap: 0px;
  --side-off: 0px;
  --wide-max: 1120px;
  --content-max: 720px;
  --content-wide: 1040px;
  --sheet-max-w: 420px;
  --float-nav-h: 64px;
  --main-top: 12px; /* حشوة الصفحة فوق على الجوال (تحت الحافة الآمنة)، تحسب منها الشاشات الأولى طولها */
  --ft-pill-h: 58px;

  /* نص فوق لون المادة الممتلئ، وشارات الحالة */
  --on-color: #FFFFFF;
  /* فروع الخريطة الذهنية (css/mindmap.css) */
  --map-1: #7FB2F0;
  --map-2: #34D399;
  --map-3: #E06D53;
  --map-4: #A99BF5;
  --map-5: #FBBF24;
  --map-6: #A0A7B5;
}

/* «أسود خالص»: نفس الليل على أسود OLED، بلا درب التبانة والغبار، ونجومك 70% */
:root[data-theme="black"] {
  --sky-top: #000; --sky-horizon: #000; --sky-0: #000;
  --surface: #0E1018; --surface-2: #171A26; --surface-3: #1F2331; --line: #262A38;
  --moon-dark: #14161F; --moon-wash: #1E1B12; --ember-wash: #1E1210;
  --cloud: rgba(42, 47, 68, 0.85); --dust-a: 0; --band-a: 0; --stars-a: 0.7;
  --glass-bg: rgba(14, 16, 24, 0.78); --glass-rim: rgba(255, 255, 255, 0.07); --glass-solid: rgba(14, 16, 24, 0.96);
  --scrim: rgba(0, 0, 0, 0.7);
  --menu-bg: rgba(40, 41, 48, 0.8); --menu-rim: rgba(255, 255, 255, 0.14); /* على الأسود الخالص القائمة رمادية أوضح مثل أبل */
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* السحب يزيح الصفحة خارج الشاشة؛ دون القص يتسع عرض الصفحة فيصغّر متصفح الجوال العرض لحظياً.
   القص بـ clip لا hidden: hidden (خصوصاً على html) يجعل الصفحة نفسها صندوق تمرير في Safari الآيفون، فيتحرك الشريط
   السفلي الثابت مع التمرير والارتداد وينزل فوق شريط الآيفون؛ clip يقص دون إنشاء صندوق تمرير. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}
/* لا ارتداد مطاطي للصفحة كلها (يسحب العناصر الثابتة معه على iOS)؛ التمرير داخل القوائم يبقى كما هو. */
html, body { overscroll-behavior-y: none; }
/* وميض اللمس على أندرويد: مرة واحدة على الجذر (الخاصية موروثة) بدل تكرارها على كل زر */
html { -webkit-tap-highlight-color: transparent; }

/* لا تحديد بالضغط المطوّل إلا فيما يفيد نسخه */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:is(input, textarea, [contenteditable=true], .sblk, .sb, .ans, .bub-me, .qz-q, .qz-why, .qz-ex, .qzw-ex, .rv-q, .rv-a, .tm-read, .ne-body, .oa-ans) {
  -webkit-user-select: text; user-select: text; }

body {
  font-family: var(--font-family);
  background-color: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.5;
  direction: rtl;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-size: 0.9375rem;           /* 15px، ويكبر مع مقياس الواجهة */
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Typography Scale */
.type-h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.35; }
/* عنوان كل صفحة (h1 أول الصفحة) بنفس الحجم والوزن: iOS Large Title */
:is(#app-root, .pg-ghost-page) h1.type-h1 { font-size: var(--fs-large-title); line-height: 1.25; } /* والصفحة الطالعة (js/page-motion.js) بنفس الشكل */
.type-h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.type-h3 { font-size: 1.0rem; font-weight: 600; line-height: 1.5; }
.type-body { font-size: 0.9375rem; font-weight: 400; line-height: 1.85; }
.type-secondary { font-size: 0.8125rem; font-weight: 400; line-height: 1.7; }
.type-caption { font-size: 0.6875rem; font-weight: 500; line-height: 1.5; }

/* شريط التنقل العائم (<1024): الإطار شفاف بعرض الشاشة والكبسولة الزجاجية فيه. الزجاج من .glass وحدها.
   شكل V4 (كبسولة وحدة بأربعة أماكن والشهاب في القلب، وعرض الخانات وموضع العدسة) في css/bar-v4.css */
.mobile-nav {
  --tw: 56px;
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 90;
  height: 64px;
  pointer-events: none;
  /* بلا translateZ/backface-visibility: طبقة مفروضة حول زجاج backdrop-filter كانت تخلي iOS يرسم الغباش شريطاً مزاحاً فوق الشريط (23 أكتوبر) */
}
@media (max-width: 1023.98px) { .mobile-nav { display: block; } }
.mobile-nav-list {
  --i: 0;
  position: absolute;
  inset-block: 0;
  right: max(16px, env(safe-area-inset-right));
  display: flex;
  margin: 0;
  padding: 0 6px;
  list-style: none;
  border-radius: var(--r-pill);
  pointer-events: auto;
}
.mobile-nav-list > li { position: relative; z-index: 1; display: flex; }
/* العدسة: تنزلق بعرض خانة كاملة تحت المفتوح، بلا نقطة ولا خط */
.mobile-nav-list::before {
  content: '';
  position: absolute;
  inset-block: 6px;
  right: 7px;
  width: calc(var(--tw) - 2px);
  border-radius: var(--r-lens);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  box-shadow: var(--rim);
  opacity: 0;
  transform: translateX(calc(var(--i) * var(--tw) * -1));
  transition: transform var(--pg-bar) var(--ease-spring), opacity var(--dur-1) var(--ease-out);
}
/* --i موضع الخانة المفتوحة يكتبه js/router.js (updateNavHighlight) على الشريط نفسه، فتنزلق العدسة من أول إطار بعد الضغطة */
.mobile-nav-list:has(.active)::before { opacity: 1; }
.mobile-nav-item {
  position: relative;
  width: var(--tw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-top: 6px;
  color: var(--text-2);
  text-decoration: none;
}
.mobile-nav-item.active { color: var(--text); }
.mobile-nav-item .ti { height: 28px; display: grid; place-items: center; position: relative; }
/* عدّاد المواعيد القريبة على خانة «اليوم» (navChrome في js/app.js) */
.nav-badge { position: absolute; top: -4px; left: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--rose); color: var(--on-rose); font: var(--t-micro); font-weight: 700; line-height: 16px; text-align: center; }
.nav-badge[hidden] { display: none; }
.ni-t { font: var(--t-micro); white-space: nowrap; }
.mobile-nav-item.active .ni-t { color: var(--rose); font-weight: 700; }
.mobile-nav-item .moon-dot { top: -9px; }
/* شاشات القراءة والأستاذ تغطي شريط التنقل (css/stu-cards.css وstu-tutor.css): يخفت ويرجع مع انتقال الصفحة */
:is(.mobile-nav, .side-nav) { transition: opacity var(--dur-1) var(--ease-out); }
/* الآيباد العمودي: نفس الكبسولة في الوسط، خانات 88 وطول 68، والشهاب جنبها */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .mobile-nav { --tw: 88px; height: 68px; bottom: max(28px, calc(8px + env(safe-area-inset-bottom))); }
  .mobile-nav-list { right: 50%; transform: translateX(50%); }
  .ni-t { font-size: var(--fs-small); }
}
@media (prefers-reduced-motion: reduce) { .mobile-nav-list::before, .mobile-nav, .side-nav { transition: none; } }

/* أيقونات الأقسام (شريط التنقل في index.html): النقطة والكواكب تمتلئ في المفتوح، والجدول نسختان */
.ic .f { fill: var(--glass-solid); }
:is(.mobile-nav-item, .side-item).active .ic :is(.f, .fa) { fill: currentColor; }
:is(.mobile-nav-item, .side-item) .ni-s, :is(.mobile-nav-item, .side-item).active .ni-l { display: none; }
:is(.mobile-nav-item, .side-item).active .ni-s { display: block; }
/* «أنا» = قمرك المسطح بطوره (navChrome.moon في js/app.js) */
.nav-moon { display: grid; place-items: center; flex: none; }

/* الأزرار (design-reference/identity/ui.css .btn): كبسولات مسطّحة بلا تدرّج ولا ظل.
   رئيسي وردي 48، ثانوي --surface-2 بارتفاع 44، نصّي وردي 500 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: var(--t-button);
  border: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), opacity var(--dur-1) ease;
  white-space: nowrap;
  text-decoration: none;
}
/* hidden يغلب inline-flex: أزرار الحذف المخفية في نوافذ الإضافة كانت تظهر وتبعثر التذييل */
.btn[hidden] { display: none; }
.btn:active:not(:disabled) { transform: scale(var(--press-scale)); }

.btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

.btn-primary {
  height: 48px;
  padding-inline: 22px;
  border-radius: var(--r-pill);
  background-color: var(--ink);
  color: var(--on-ink);
}

@media (hover: hover) { .btn-primary:hover:not(:disabled) { background-color: var(--accent-hover); } }

.btn-primary:active:not(:disabled) { background-color: var(--accent-active); }

.btn-secondary {
  height: 44px;
  padding-inline: 22px;
  border-radius: var(--r-pill);
  background-color: var(--surface-2);
  color: var(--text);
  border: 1px solid transparent;
}

@media (hover: hover) { .btn-secondary:hover:not(:disabled) { border-color: var(--border-strong); } }

.btn-secondary:active:not(:disabled) { background-color: var(--border-subtle); }

.btn-ghost {
  height: 44px;
  padding-inline: var(--space-2);
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--rose);
  font-weight: 500;
}

@media (hover: hover) { .btn-ghost:hover:not(:disabled) { background-color: var(--surface-2); } }

.btn-danger {
  height: 48px;
  padding-inline: 22px;
  border-radius: var(--r-pill);
  background-color: var(--ember-wash);
  color: var(--ember);
  border: 1px solid transparent;
}

@media (hover: hover) {
  .btn-danger:hover:not(:disabled) {
    background-color: var(--semantic-danger);
    color: var(--on-danger);
  }
}

.btn-sm {
  height: 40px;
  padding-inline: var(--space-4);
}

/* ── الزجاج: تعريف واحد للكروم العائم فقط (شريط التنقل، دائرة الشهاب، الشريط الجانبي، شريط «اكتب أي شي»،
   حبة المؤقت، لوح الأوامر). لا يُستخدم على البطاقات أو القوائم أو الإشعارات ── */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--shadow-float);
}
/* بلا زجاج في المتصفح (ولا بالبادئة): خلفية شبه صلبة حتى يبقى النص مقروءاً */
@supports not (backdrop-filter: blur(1px)) { @supports not (-webkit-backdrop-filter: blur(1px)) { .glass { background: var(--glass-solid); } } }

/* الأشرطة إشعار صلب أعلى الشاشة بلون --surface-2 مثل شريط التنبيه (لا زجاج؛ رأسه من ::before/::after)؛ التالي يطل من تحت الأول */
.backup-reminder {
  --tone: var(--semantic-warning);
  position: fixed; z-index: 290; inset-inline: var(--space-3); inset-block-start: calc(var(--space-2) + env(safe-area-inset-top));
  max-width: 440px; margin-inline: auto; padding: var(--space-3); padding-inline-end: var(--space-4);
  border-radius: var(--r-panel); border: 0; background-color: var(--surface-2);
  box-shadow: var(--rim); animation: msg-drop var(--dur-3) var(--ease-spring) both, msg-away var(--dur-3) var(--ease-out) 10s forwards;
}
/* يختفي بعد 10 ثوانٍ ويثبت ما دام الإصبع عليه */
.backup-reminder:is(:focus-within, :active) { animation-play-state: paused; }
#update-banner { animation: msg-drop var(--dur-3) var(--ease-spring) both; } /* التحديث لا يختفي وحده */
@keyframes msg-away { to { opacity: 0; transform: translateY(-24px) scale(0.97); visibility: hidden; } }
.backup-reminder::before { content: 'منظّمي'; display: block; padding-inline-start: 30px; margin-bottom: var(--space-2); line-height: 22px;
  background: url(/icons/icon-192-v5.png) right center / 22px no-repeat; font-size: var(--fs-small); font-weight: 600; color: var(--text-secondary); }
.backup-reminder::after { content: 'الآن'; position: absolute; inset-inline-end: var(--space-4); inset-block-start: var(--space-3); line-height: 22px; font-size: var(--fs-small); color: var(--text-muted); }
.backup-reminder:not([hidden]) ~ .backup-reminder { transform-origin: bottom; transform: translateY(12px) scale(0.92); opacity: 0.75; z-index: 289; pointer-events: none; animation: msg-away var(--dur-3) var(--ease-out) 10s forwards; }
.backup-reminder:not([hidden]) ~ .backup-reminder > *, .backup-reminder:not([hidden]) ~ .backup-reminder::before, .backup-reminder:not([hidden]) ~ .backup-reminder::after { visibility: hidden; }
.backup-reminder[hidden] { display: none; }
@keyframes msg-drop { from { opacity: 0; transform: translateY(-24px) scale(0.97); } }
.reminder-banner { --tone: var(--accent-primary); }
.msg-body { display: flex; gap: var(--space-3); align-items: flex-start; min-width: 0; }
.msg-tile { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--tone) 18%, transparent); color: var(--tone); }
.msg-tile svg { width: 19px; height: 19px; }
.backup-reminder-text { display: block; font-weight: 700; color: var(--text-primary); }
.msg-sub, .reminder-banner-body { display: block; margin-top: 1px; font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.45; }
.backup-reminder-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.backup-reminder-actions .btn { flex: 1; height: 40px; }
.backup-reminder-actions .btn:not(.btn-primary) { background-color: var(--surface-3); color: var(--text); border: 0; }

/* Main Container */
main {
  flex: 1;
  max-width: 1180px;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-6);
  padding-block: var(--space-8);
}

/* Cards */
.card {
  background-color: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

/* Form Fields */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--text-muted);
}

.form-control {
  height: var(--control-h);
  padding-inline: var(--space-4);
  border-radius: var(--radius-btn);
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  font-family: inherit;
  font-size: var(--fs-body);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
  width: 100%;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-primary);
  background-color: var(--bg-surface-1);
  box-shadow: var(--focus-ring);
}

textarea.form-control {
  height: auto;
  min-height: 100px;
  padding-block: 10px;
  resize: vertical;
}

.form-control.error {
  border-color: var(--semantic-danger);
}

.goal-need { font-size: var(--fs-small); font-weight: 600; }
.goal-need.is-danger { color: var(--semantic-danger); }

/* حاسبة المعدل (2.2) */
.gpa-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.grade-table-grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.grade-table-head { color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; margin-bottom: 4px; }

/* السجل الأكاديمي (2.4): طباعة بلا ترويسة ولا تنقل ولا أزرار */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .mobile-nav, .side-nav, .backup-reminder, .no-print, .toast-container { display: none !important; }
  #app-root { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .transcript .list-panel, .transcript .data-table-wrapper { border-color: #999 !important; background: #fff !important; overflow: visible !important; }
  .transcript .data-table th, .transcript .data-table td { color: #000 !important; border-color: #999 !important; background: #fff !important; }
  .transcript tr, .transcript h2 { break-inside: avoid; page-break-inside: avoid; }
}

/* «ركّز على…» في المساعد (design-reference/assistant-focus) */
.af { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.af-label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-small); font-weight: 600; }
.af-label .af-count { color: var(--text-muted); font-weight: 400; }
.af-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.af-chip { height: 32px; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--r-chip);
  background-color: var(--surface-2); color: var(--text); font: var(--t-caption); }
.af-chip.is-on { border-color: var(--text); background-color: var(--surface-3); }
.af-hint { color: var(--text-muted); font-size: var(--fs-caption); }
/* قالب الملخص: js/summary-view.js */
.sm { display: grid; gap: var(--space-6); line-height: 1.8; overflow-wrap: anywhere; }
.sm-md p, .sm-md ul, .sm-md ol, .sm-lead p, .sm-box p { margin: 0 0 var(--space-2); }
.sm-md ul, .sm-md ol { padding-inline-start: var(--space-6); }
.sm-head { display: grid; gap: var(--space-1); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.sm-kicker { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent-primary); font-size: var(--fs-small); font-weight: 600; }
.sm-title { margin: 0; font-size: var(--fs-headline); font-weight: 700; line-height: 1.35; }
.sm-meta { color: var(--text-muted); font-size: var(--fs-small); }
.sm-sec { display: grid; gap: var(--space-3); }
.sm-sec-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-title); font-weight: 700; }
.sm-ic { display: inline-flex; color: var(--accent-primary); }
.sm-lead { padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background-color: var(--accent-subtle-bg); font-size: var(--fs-callout); }
.sm-rows, .sm-table { border-radius: var(--radius-card); background-color: var(--bg-surface-1); box-shadow: var(--shadow-card); overflow: hidden; }
.sm-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); }
.sm-row + .sm-row { border-top: 1px solid var(--border-subtle); }
.sm-term { flex: none; width: 34%; font-weight: 700; }
.sm-def { flex: 1; min-width: 0; color: var(--text-secondary); }
.sm-num { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-6); height: var(--space-6);
  border-radius: var(--radius-pill); background-color: var(--accent-subtle-bg); color: var(--accent-primary); font-size: var(--fs-small); font-weight: 700; }
.sm-text { flex: 1; min-width: 0; }
.sm-formula { flex: 1; min-width: 0; font-weight: 600; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.sm-q .sm-ic { flex: none; color: var(--text-muted); padding-top: var(--space-1); }
@media (max-width: 560px) {
  .sm-row.is-term { flex-direction: column; gap: var(--space-1); }
  .sm-term { width: auto; }
}
.sm-lead > :last-child, .sm-box > :last-child { margin-bottom: 0; }
.sm-qa { display: grid; gap: var(--space-1); flex: 1; min-width: 0; }
.sm-qa-a { color: var(--text-secondary); }
.sm-row > .sm-ic { flex: none; padding-top: var(--space-1); }
.sm-warn .sm-ic { color: var(--semantic-warning); }
/* الجدول على الجوال (مراجعة 20 أكتوبر): عمود لا يضيق عن 6em ولا عن أطول كلمة فيه، فلا تنكسر الكلمة حرفاً حرفاً،
   والزائد يتمرر داخل الجدول نفسه لا الصفحة. الصفوف شبكة فرعية من شبكة الجدول فتتطابق أعمدتها */
.sm-table { display: grid; grid-template-columns: var(--sm-grid); overflow-x: auto; overscroll-behavior-x: contain; }
.sm-tr { display: grid; grid-column: 1 / -1; grid-template-columns: var(--sm-grid); grid-template-columns: subgrid; } /* الأول لمتصفح بلا subgrid */
.sm-tr + .sm-tr { border-top: 1px solid var(--border-subtle); }
.sm-td { padding: var(--space-3); font-size: var(--fs-small); min-width: 6em; overflow-wrap: break-word; word-break: normal; }
.sm-td + .sm-td { border-inline-start: 1px solid var(--border-subtle); }
.sm-td:first-child { font-weight: 600; }
.sm-tr.is-head { background-color: var(--accent-subtle-bg); font-weight: 700; }
.sm-box { padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background-color: var(--bg-surface-2); }
bdi.sm-nw { white-space: nowrap; } /* المعادلة القصيرة ما تنكسر، في الملاحظة وشاشة الملخص */
/* الملخص الذكي (design-reference/smart-summary): الخط الزمني */
.sm-tl { padding: var(--space-4) var(--space-5); }
.sm-tl-i { position: relative; display: grid; gap: var(--space-1); margin-inline-start: 6px; padding-inline-start: var(--space-5); padding-bottom: var(--space-4); border-inline-start: 2px solid var(--border-subtle); }
.sm-tl-i:last-child { padding-bottom: 0; border-inline-start-color: transparent; }
/* النقطة عنصر لا ::after: رسم PDF (js/pdf-paint.js) يرسم العناصر فقط */
.sm-tl-dot { position: absolute; inset-inline-start: -9px; top: var(--space-2); width: 10px; height: 10px; border-radius: var(--radius-pill); background-color: var(--moon); border: 3px solid var(--accent-subtle-bg); }
.sm-tl-when { font-weight: 700; color: var(--accent-primary); font-size: var(--fs-small); }
/* السبب والنتيجة */
.sm-ce { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.sm-ce + .sm-ce { border-top: 1px solid var(--border-subtle); }
.sm-ce-a { font-weight: 600; }
.sm-ce-b { color: var(--text-secondary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background-color: var(--bg-surface-2); }
/* المراحل */
.sm-stages { display: grid; gap: 0; padding: var(--space-4) var(--space-4); }
.sm-st { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-4); }
.sm-st:last-child { padding-bottom: 0; }
.sm-st::before { content: ''; position: absolute; inset-inline-start: 13px; top: 28px; bottom: 0; width: 2px; background-color: var(--accent-subtle-bg); }
.sm-st:last-child::before { display: none; }
.sm-st-n { flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill); display: grid; place-items: center; background-color: var(--surface-3); color: var(--text); font-size: var(--fs-caption); font-weight: 700; }
.sm-st-b { display: grid; gap: 2px; min-width: 0; }
.sm-st-t { font-weight: 700; }
.sm-st-d { color: var(--text-secondary); font-size: var(--fs-small); }
/* التصنيف */
.sm-cls { display: grid; gap: var(--space-2); }
.sm-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.sm-chip { padding: 2px var(--space-3); border-radius: var(--radius-pill); background-color: var(--bg-surface-2); color: var(--text-secondary); font-size: var(--fs-small); }
/* الكود */
.sm-cl { white-space: pre-wrap; }
.sm-code { direction: ltr; text-align: left; margin: 0; padding: var(--space-4); border-radius: var(--radius-card); background-color: var(--bg-surface-2); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-small); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-primary); }
.sm-code-cap { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--space-2); }
/* القاعدة والاستثناء */
.sm-rule { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.sm-rule + .sm-rule { border-top: 1px solid var(--border-subtle); }
.sm-rule-x { display: flex; gap: var(--space-2); color: var(--semantic-warning); font-size: var(--fs-small); }
.sm-rule-x span { color: var(--text-secondary); }
.sm-qt { flex: none; padding: 1px var(--space-2); border-radius: var(--radius-pill); background-color: var(--accent-subtle-bg); color: var(--accent-primary); font-size: var(--fs-caption); font-weight: 600; margin-top: 3px; }
.sm-kind { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3); border-radius: var(--radius-pill); background-color: var(--bg-surface-2); color: var(--text-secondary); font-size: var(--fs-caption); font-weight: 600; margin-top: var(--space-1); }
.ao-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.ao-tpl { margin-bottom: var(--space-4); }
.ao-tpl .af-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ao-tpl .af-chip { flex: none; }

/* عارض PDF (3.2، الشكل المعتمد design-reference/pdf): شاشة كاملة، شريط علوي وشريط عائم زجاجيان، والصفحات تتمرر بينهما. */
.pdf-viewer { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; background: var(--bg-base); }
.pdf-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-2);
}
.pdf-title { flex: 1; min-width: 0; text-align: center; }
.pdf-title-name { font-size: var(--fs-body); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-title-meta { display: inline-flex; align-items: center; gap: .3em; font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pdf-title-meta .pdf-page-input { width: 2.4em; padding: 0; font-size: var(--fs-small); }
.pdf-title-meta[hidden], .pdf-viewer.is-slide .pdf-title-meta { display: none; }
.pdf-pages {
  /* مرجع offsetTop للصفحات: بدونه تُقاس من العارض كله فيُحسب الشريط ويبدأ العرض منزاحاً. */
  position: relative; flex: 1; overflow: auto; overscroll-behavior: contain;
  padding: var(--space-4) var(--space-3) calc(var(--float-nav-h) + var(--space-8));
}
@media (min-width: 768px) { .pdf-pages { padding-inline: max(var(--space-8), calc((100% - var(--content-wide)) / 2)); } }
.pdf-page { position: relative; margin: 0 auto var(--space-4); background: var(--on-color); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.pdf-page canvas { display: block; width: 100%; height: 100%; }
.pdf-page-num { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); font-size: var(--fs-callout); }
.pdf-page.rendered .pdf-page-num { display: none; }
.pdf-status { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-secondary); }
.pdf-dock { position: absolute; z-index: 1; inset-inline: 0; bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); pointer-events: none; padding-inline: var(--space-4); }
.pdf-dock.is-compact .pdf-dock-inner { gap: 0; }
.pdf-dock.is-tight [data-click="pdfViewer.zoom"] { display: none; }
.pdf-dock[hidden] { display: none; }
.pdf-dock-inner {
  display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background-color: var(--bg-surface-1); box-shadow: var(--shadow-float); pointer-events: auto;
}
/* الشريط الجديد: أربعة أزرار باسمها، و«لخّص» ملوّن؛ وفوقه خط تقدّم القراءة */
.pdf-prog { width: min(100%, 420px); height: 4px; border-radius: var(--radius-pill); background: var(--border-subtle); overflow: hidden; }
.pdf-prog i { display: block; height: 100%; background: var(--moon); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-2) var(--ease-out); }
.pdf-viewer.is-slide .pdf-prog { display: none; }
.pdf-page-label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-callout); font-weight: 600; font-variant-numeric: tabular-nums; }
.pdf-page-input { width: 2.6em; padding: 2px; border: none; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; text-align: center; -moz-appearance: textfield; }
.pdf-page-input::-webkit-inner-spin-button, .pdf-page-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pdf-page-input:focus { background-color: var(--bg-surface-2); outline: none; }
.pdf-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-tile); background-color: var(--warn-bg); color: var(--warn-fg); font-size: var(--fs-small); line-height: 1.6; }
.pdf-note svg { flex: none; margin-top: 2px; }
.pdf-meter { font-size: var(--fs-small); color: var(--text-muted); text-align: center; }
/* «ترجم الشريحة» (design-reference/translate) */
.pdf-viewer.is-slide .pdf-pages { display: none; }
.pdf-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); overflow: hidden; touch-action: none; padding: var(--space-4) var(--space-3) calc(var(--float-nav-h) + var(--space-6)); }
.pdf-slide { position: relative; flex: none; transform-origin: 0 0; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-card); background: var(--on-color); }
.pdf-slide canvas { display: block; width: 100%; height: 100%; }
.pdf-tr { position: absolute; display: flex; align-items: center; white-space: nowrap; overflow: hidden; line-height: 1.15; font-family: var(--font-family); }
.pdf-tr.is-para { white-space: normal; line-height: 1.3; }
/* «حمّل الملف مترجماً» (design-reference/translate-download، js/slide-export.js) */
.pdf-plus { flex: none; margin-inline-start: auto; padding: 2px var(--space-2); border-radius: var(--radius-pill); background-color: var(--accent-subtle-bg); color: var(--accent-primary); font-size: var(--fs-micro); font-weight: 700; }
.pdf-print { position: fixed; top: 0; left: -10000px; } /* قياس مربعات الترجمة قبل رسمها في الملف */
.pdf-print .pdf-slide { box-shadow: none; border-radius: initial; }
/* القرص (js/pdf-pinch.js): المتصفح لا يكبّر الصفحة كلها، والمعاينة فوق الشريط العلوي */
.pdf-pages { touch-action: pan-x pan-y; }
.pdf-bar { position: relative; z-index: 2; }
/* الجوال بالعرض في وضع الشريحة: الشريحة بارتفاع الشاشة، والشريطان فوقها يختفيان (is-bare) ويعودان بنقرة */
@media (orientation: landscape) and (max-height: 500px) {
  .pdf-viewer.is-slide .pdf-bar { position: absolute; inset-inline: 0; top: 0; transition: opacity var(--dur-2) var(--ease-out); }
  .pdf-viewer.is-slide .pdf-title-meta { display: none; }
  .pdf-viewer.is-slide .pdf-stage { padding: var(--space-2) max(var(--space-3), env(safe-area-inset-right)) var(--space-2) max(var(--space-3), env(safe-area-inset-left)); }
  .pdf-viewer.is-slide .pdf-dock { bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); transition: opacity var(--dur-2) var(--ease-out); }
  .pdf-viewer.is-bare .pdf-bar, .pdf-viewer.is-bare .pdf-dock { opacity: 0; pointer-events: none; }
  .pdf-viewer.is-bare .pdf-dock-inner { pointer-events: none; }
}
.pdf-hint { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }
.pdf-seg { display: inline-flex; padding: var(--space-1); border-radius: var(--radius-pill); background-color: var(--bg-surface-2); }
.pdf-seg button { height: var(--control-h-sm); padding: 0 var(--space-3); border: none; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-small); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.pdf-seg button.is-on { background-color: var(--bg-surface-1); color: var(--accent-primary); box-shadow: var(--shadow-soft); }
.pdf-seg button.is-busy { opacity: 0.6; }
/* «ترجم الملف كامل» (design-reference/translate-file) */
.pdf-stage { position: relative; min-height: 0; }
.pdf-stage.has-progress { padding-top: calc(var(--space-4) + var(--control-h-sm) + var(--space-6)); }
.pdf-progress { position: absolute; top: var(--space-3); left: var(--space-3); right: var(--space-3); margin-inline: auto; max-width: var(--sheet-max-w); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-pill); background-color: var(--bg-surface-1); box-shadow: var(--shadow-soft); font-size: var(--fs-small); }
.pdf-progress-text { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.pdf-progress-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-muted { color: var(--text-muted); font-weight: 400; }
.pdf-track { height: 4px; border-radius: var(--radius-pill); background-color: var(--bg-surface-2); overflow: hidden; }
.pdf-track span { display: block; height: 100%; background-color: var(--moon); transform-origin: right; }
.pdf-progress.is-done .pdf-track span { background-color: var(--semantic-success); }
.pdf-progress.is-warn .pdf-track span { background-color: var(--semantic-warning); }
.pdf-progress-btn { height: var(--control-h-sm); padding: 0 var(--space-3); border: none; border-radius: var(--radius-pill); background-color: var(--bg-surface-2); color: var(--text-primary); font: inherit; font-weight: 600; flex: none; cursor: pointer; }
.pdf-ok { display: inline-flex; color: var(--semantic-success); flex: none; }
/* الشرائح المصوّرة (design-reference/translate-scan): شريط القراءة عائم فوق الشريحة بلا حجز مكان */
.pdf-progress.is-float { z-index: 1; }
.pdf-scan-icon { display: inline-flex; color: var(--text-muted); flex: none; }
.pdf-choice .sheet-row { min-height: 64px; }
/* طبقة النص (TextLayer من pdf.js): نص شفاف فوق الصفحة لتحديده ونسخه */
.textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none; transform-origin: 0 0; z-index: 0;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; -webkit-user-select: text; user-select: text; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) {
  z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.textLayer .markedContent { display: contents; }
.textLayer ::selection { background: var(--accent-subtle-bg); color: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: -1; cursor: default; -webkit-user-select: none; user-select: none; }


/* مؤقت المذاكرة يمشي معك (views-focus.js: focusTimer.paint؛ الشكل في css/time.css): مساحة تحت المحتوى للكبسولة */
.focus-float[hidden] { display: none; }
@media (max-width: 767px) { html.has-focus-float main { padding-bottom: calc(var(--float-nav-h) + var(--ft-pill-h) + 4 * var(--space-3) + var(--space-6) + env(safe-area-inset-bottom)); } }
/* لمسة الزجاج (js/glass-press.js، النموذج design-reference/glass-press): الزر نفسه يتكبّر بـ Web Animations،
   وهنا العدسة الواحدة فوقه: تظهر وتختفي بالشفافية فقط، والسكربت يحطها فوق الزر ويحرك الضوء مع الإصبع */
.lg-lens { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; opacity: 0;
  transform-origin: 50% 50%; box-shadow: var(--lg-rim); mix-blend-mode: var(--lg-blend, normal); transition: opacity var(--dur-2) var(--ease-out); }
.lg-lens .lg-spot { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: var(--r-pill);
  background: radial-gradient(circle, var(--lg-spot) 0%, var(--lg-spot-2) 45%, transparent 70%); }
@media (prefers-reduced-motion: reduce) { .lg-lens { transition: none; } }
/* MM-8: بعد الاستعادة الصفحة تتلاشى قبل إعادة التحميل بدل قفزة */
body.mz-leaving #app-root, body.mz-leaving .mobile-bottom-nav { opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
/* css/symbols.css */
/* منظّمي — رموز «سماء واحدة» (js/symbols.js): القمر، الكوكب، النجمة، الشهاب، النقطة، الشريط، الكلمة، الشارة، الأيقونات الخطية.
   منقولة من النموذج المعتمد design-reference/identity/ui.css. متغيرات نظام التصميم فقط، ولا حركة هنا. */
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* القمر: قرص بطوره مائل 38° كقارب، وتوهّج مرسوم مسبقاً (لا filter) شدته حسب حالة اليوم */
.moonx { position: relative; display: inline-grid; place-items: center; width: var(--ms); height: var(--ms); flex: none; }
.moonx .moon-rot { display: grid; transform: rotate(38deg); position: relative; z-index: 1; }
.moon-glow { position: absolute; width: calc(var(--ms) * 2.4); height: calc(var(--ms) * 2.4); left: 50%; top: 50%; margin: calc(var(--ms) * -1.2); border-radius: var(--r-pill); background: var(--glow-moon); pointer-events: none; }
.moon-glow.s-light { opacity: .55; } .moon-glow.s-heavy { opacity: .25; }
.moon-dot { position: absolute; z-index: 2; left: 50%; top: calc(var(--ms) * -.2 - 7px); width: 7px; height: 7px; margin-left: -3.5px; border-radius: var(--r-pill); border: 1.6px solid var(--rose); }
.moon-cloud { position: absolute; z-index: 3; width: 115%; bottom: -14%; left: -8%; }
.moon-place { position: relative; display: inline-block; width: var(--ms); height: var(--ms); border-radius: var(--r-pill); border: 1.5px solid color-mix(in srgb, var(--moon) 40%, transparent); }
.moon-place .moon-dot { top: -10px; }

/* الكوكب: قرص مسطح بحبر المادة وحرفها (46% من القطر، 36% للحرفين) وظل هلالي */
.planet { position: relative; width: var(--ps); height: var(--ps); border-radius: var(--r-pill); background: var(--pi); display: inline-grid; place-items: center; flex: none; overflow: hidden; }
.planet::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-pill); background: radial-gradient(circle at 80% 82%, transparent 60%, var(--planet-shade) 62%); }
/* span.planet > b: أقوى من قواعد «X b» في الصفحات حتى لا يكبر حرف الكوكب */
span.planet > b { position: relative; z-index: 1; color: var(--on-planet); font-weight: 700; line-height: 1; font-size: var(--pf); font-family: inherit; }
.planet.add { background: none; border: 1.5px dashed var(--text-3); color: var(--text-2); }
.planet.add::after { display: none; }
.planet.archived { filter: saturate(.35); opacity: .6; }
.pdot { width: var(--ps); height: var(--ps); border-radius: var(--r-pill); background: var(--pi); display: inline-block; flex: none; }

/* النقطة: فارغة = منتظر، مضيئة بنور القمر = منجز، وردية = هدف الليلة، جمرية = متأخر */
.pt { width: var(--pt); height: var(--pt); border-radius: var(--r-pill); border: 1.5px solid var(--text-3); display: inline-block; flex: none; }
.pt.lit { border-color: var(--moon); background: var(--moon); outline: 4px solid color-mix(in srgb, var(--moon) 14%, transparent); }
.pt.rose { border-color: var(--rose); } .pt.late { border-color: var(--ember); }

/* الشريط (كمية فقط، لا وقت): 4px يمتلئ من اليمين */
.bar { display: block; height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--moon); transform-origin: right; }
.bar.neutral i { background: var(--text-2); } .bar.ember i { background: var(--ember); }

.meteor { color: var(--text); flex: none; }
.star { flex: none; overflow: visible; }

/* الكلمة «منظّمي» مسار ثابت بلون النص، ونقطة النون نجمة الشعار الوردية */
.wordmark { display: inline-block; width: auto; color: var(--text); overflow: visible; flex: none; }
.lockup { display: inline-flex; align-items: center; gap: 8px; }

/* شارة رقمية وردية على أيقونة التبويب */
.badge { position: absolute; top: 6px; left: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--rose); color: var(--on-rose); font: var(--t-micro); font-weight: 700; line-height: 18px; text-align: center; z-index: 2; }
/* css/sky.css */
/* منظّمي — «سماء واحدة» (design-reference/identity/ui.css .sky*): سماء ثابتة خلف كل الصفحات يرسمها js/sky.js.
   تحت كل شيء (z-index -1)، والبطاقات فوقها بلونها الصلب. الانزياح والتعتيم transform/opacity فقط، ولا حركة تتكرر.
   «أسود خالص» يطفئ الدرب والغبار (--band-a و--dust-a صفر) ونجومك 70%. */
/* الطول بلا لوحة المفاتيح في تطبيق الآيفون (--app-h من native/ios.js)، فلا تنكمش السماء معها */
.sky { position: fixed; inset: 0 0 auto; height: var(--app-h, 100%); z-index: -1; overflow: hidden; pointer-events: none; direction: ltr;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-horizon)); }
.sky-pan { position: absolute; inset: 0 0 0 -30%; transform: translateX(calc(var(--pan, 0) * 1.5vw)); transition: transform var(--dur-2) var(--ease-out); }
/* درب التبانة: صورة الطبقة نفسها من النموذج بضبابيتها وحاشية 54px حولها (فالصندوق أوسع من inset: -10% 0 بقدرها)، ثم نفس التدوير */
.sky-band { position: absolute; inset: -16.4% -10.65%; opacity: var(--band-a); background: url(/img/band-v1.webp) 0 0 / 100% 100% no-repeat;
  transform: rotate(-28deg) scaleY(0.55); }
.sky-dust, .sky-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-dust { fill: var(--dust); opacity: var(--dust-a); }
.sky-stars { opacity: var(--stars-a); }
.sky-stars stop { stop-color: var(--star); stop-opacity: 0.55; }
.sky-stars stop + stop { stop-opacity: 0; }
.sky-stars .c { fill: var(--star); }
/* التعتيم حسب عمق الصفحة (js/sky.js) */
.sky-dim { position: absolute; inset: 0; background: var(--sky-0); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }

/* المحتوى يتلاشى خلف شريط الحالة وشريط التنقل العائم (الجوال؛ والآيباد العمودي تحت فقط) */
.topfade, .bottomfade { position: fixed; inset-inline: 0; z-index: 15; pointer-events: none; }
.topfade { top: 0; height: calc(env(safe-area-inset-top, 0px) + 17px); background: linear-gradient(180deg, var(--sky-top) 45%, transparent); }
.bottomfade { bottom: 0; height: 150px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sky-horizon) 90%, transparent) 45%, var(--sky-horizon) 72%); }
.bottomfade.tall { height: 230px; }
@media (min-width: 768px) { .topfade { display: none; } }
@media (min-width: 1024px) { .bottomfade { display: none; } }


@media (prefers-reduced-motion: reduce) {
  .sky-pan { transform: none; transition: none; }
  .sky-dim { transition-duration: var(--dur-1); }
}
@media print { .sky, .topfade, .bottomfade { display: none; } }
/* css/components.css */
/* منظّمي — المكوّنات والتجاوب
   جزء من index.html قُسِّم في المهمة 0.5؛ لا يُعاد ترتيب الملفات في index.html. */

/* الشرائح (ui.css .chip/.tag): شريحة 32 بزاوية --r-chip، والوسم الثابت 22؛ المختارة بإطار --text على --surface-3 */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding-inline: var(--space-3);
  border-radius: var(--r-chip);
  font: var(--t-caption);
  background-color: var(--surface-2);
  color: var(--text);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
button.tag-chip:active, a.tag-chip:active { transform: scale(var(--press-scale)); }

.tag-chip[aria-pressed="true"] { background-color: var(--surface-3); border-color: var(--text); }
.tag-chip.is-static { height: 22px; padding-inline: var(--space-2); cursor: default; }

/* Empty State */
.empty-state {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background-color: var(--bg-surface-1);
  margin-block: var(--space-6);
}

/* Modals & Dialogs */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--scrim);
  z-index: 310; /* فوق اللوح السفلي (300): نافذة تُفتح من لوح تظهر فوقه */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background-color: var(--surface);
  border: 0;
  border-radius: var(--r-sheet);
  box-shadow: var(--shadow-float);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  max-height: 90dvh;              /* على الجوال: الارتفاع الظاهر فعلاً (يصغر مع شريط المتصفح ولوحة المفاتيح) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.97);
  opacity: 0;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease;
}

.modal-overlay.open .modal-container {
  transform: none;
  opacity: 1;
}

.modal-header {
  padding: var(--space-3) var(--space-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* النموذج بين الرأس والجسم والتذييل: يمتد عمودياً ويسمح للجسم وحده بالتمرير، فيبقى زر الحفظ ظاهراً دائماً. */
.modal-container > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.modal-header h2 { margin: 0; font-size: var(--fs-title); font-weight: 800; }

.modal-body {
  padding: var(--space-4) var(--space-4) var(--space-2);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.modal-header, .modal-footer { flex-shrink: 0; }

.modal-footer {
  padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
/* زر الحفظ (أو تأكيد الحذف) بعرض كامل مثل «أضف المادة»، والحذف والإجراء الجانبي نص في صف، والإلغاء نص هادئ تحت */
.modal-footer > .btn { flex: 1 1 0; }
.modal-footer > .btn-primary, .modal-footer > #confirm-delete-btn { order: -1; flex-basis: 100%; }
.modal-footer > .btn-secondary { order: 2; flex-basis: 100%; }
.modal-footer > .btn-secondary, .modal-footer > .btn-ghost, .modal-footer > .btn-danger:not(#confirm-delete-btn) { border: 0; background: none; box-shadow: none; color: var(--text-secondary); }
.modal-footer > .btn-danger:not(#confirm-delete-btn) { color: var(--semantic-danger); }

/* التنبيه السريع شريط سفلي (ui.css .snack): كبسولة صلبة --surface-2 بارتفاع 48 فوق شريط التنقل، بلا زجاج.
   الإشعارات (.backup-reminder) أعلى الشاشة، فلا يتغطى أحدهما بالآخر */
.toast-container {
  position: fixed;
  inset-inline: var(--space-4);
  inset-block: auto calc(84px + env(safe-area-inset-bottom));
  z-index: 320;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  --tone: var(--accent-primary);
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.01'/%3E%3C/svg%3E");
  width: 100%;
  max-width: 420px;
  min-height: 48px;
  padding: var(--space-3) 20px;
  border-radius: var(--r-pill);
  background-color: var(--surface-2);
  color: var(--text);
  font: var(--t-label);
  box-shadow: var(--rim);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  pointer-events: auto;
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.toast::before { content: ''; flex: none; width: 17px; height: 17px; background-color: var(--tone);
  -webkit-mask: var(--ic) center / 17px no-repeat; mask: var(--ic) center / 17px no-repeat; }

.is-top > .toast { transform: translateY(-12px); }
.toast.show {
  transform: none;
  opacity: 1;
}

.toast-container.is-top { inset-block: calc(var(--space-2) + env(safe-area-inset-top)) auto; }
.toast.success { --tone: var(--semantic-success); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.toast.danger { --tone: var(--semantic-danger); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3C/svg%3E"); }
.toast.warning { --tone: var(--semantic-warning); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4M12 17v.01'/%3E%3C/svg%3E"); }

/* التبويبات (ui.css .tabbar): مسار --surface-2 بارتفاع 40، والمفتوح قطعة --surface بحافة --rim (الحبة المنزلقة في ui.css) */
.tab-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 40px;
  padding: 3px;
  background-color: var(--surface-2);
  border-radius: var(--r-pill);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-btn {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  height: 100%;
  padding-inline: var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font: var(--t-label);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.tab-btn.active {
  color: var(--text);
  font-weight: 700;
  background-color: var(--surface);
  box-shadow: var(--rim);
}


.course-badge-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
}

/* Dropdown/Select Styling */
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%25525866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-inline-end: 36px;
}

/* Table Component */
.data-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface-1);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: 0.875rem;
}

.data-table th, .data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.data-table th {
  background-color: var(--bg-surface-2);
  color: var(--text-secondary);
  font-weight: 600;
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* Skeleton Loading State */
.skeleton { position: relative; overflow: hidden; background: var(--bg-surface-2); border-radius: var(--radius-md); }
/* اللمعة تمشي بـ transform لا background-position (قاعدة الحركة) */
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--border-subtle), transparent); animation: skeleton-loading 1.5s infinite; }
@keyframes skeleton-loading { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; opacity: 0; } }

/* Lightbox Modal */
.lightbox-content {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}

/* Responsive adjustments */
/* السحب (1.8): التمرير العمودي للمتصفح، والأفقي لإيماءاتنا */
@media (max-width: 1023px) {
  #app-root, [data-swipe] { touch-action: pan-y; }
}

/* ── الهواتف ── */
@media (max-width: 767px) {
  .mobile-nav {
    display: block;
  }
  main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  /* النافذة على الجوال لوح سفلي (css/ui.css)؛ dvh لا vh: في Safari 100vh أطول من الجزء الظاهر فيختفي التذييل. */
  .modal-footer { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
}

/* ── التابلت: شريط تنقل كامل + بحث في سطر مستقل ── */
@media (min-width: 768px) and (max-width: 1100px) {
  .modal-container {
    max-width: min(680px, 90vw);
  }
}

/* لا يقل ارتفاع أي هدف لمس عن 44px على الأجهزة اللمسية */
@media (hover: none) and (pointer: coarse) {
  .btn, .mobile-nav-item {
    min-block-size: 44px;
  }
  /* الشريحة تبقى 32 في الشكل، ومساحة لمسها 44 من حولها */
  button.tag-chip, a.tag-chip { position: relative; }
  button.tag-chip::after, a.tag-chip::after { content: ''; position: absolute; inset: -6px 0; }
  .btn-sm {
    min-block-size: 38px;
  }
}

/* التذكيرات (1.5أ) */
.reminder-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}
.reminder-toggle input { width: 18px; height: 18px; accent-color: var(--accent-primary); }
.reminder-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.reminder-fields[hidden], .form-group[hidden] { display: none; }
.reminder-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: 8px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.reminder-chip.success { color: var(--semantic-success); border-color: var(--semantic-success); background-color: transparent; }
.reminder-chip.warning { color: var(--semantic-warning); border-color: var(--semantic-warning); background-color: transparent; }
.reminder-chip.danger { color: var(--semantic-danger); border-color: var(--semantic-danger); background-color: transparent; }
@media (max-width: 480px) {
  .reminder-fields { grid-template-columns: 1fr; }
}

/* شعار التذكير: «+N» */
.reminder-banner-more {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background-color: var(--accent-primary);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
}
.reminder-banner [hidden] { display: none; }

/* القوائم (ui.css .panel/.row): إطار واحد --surface بزاوية --r-panel وحافة --rim بلا ظل، صفوف 64 بفاصل يبدأ بعد
   الأيقونة (52 = 40 أيقونة + 12 مسافة؛ الصف الذي يبدأ بنصّه بلا أيقونة يبدأ فاصله من الحافة). تستخدمها كل القوائم بدل بطاقة لكل عنصر. */
.list-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background-color: var(--surface);
  box-shadow: var(--rim);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-surface-1);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
}
.list-head.is-danger { color: var(--semantic-danger); }
.list-head .schedule-field-name { flex: 1; min-width: 0; font-weight: 600; } /* اسم المادة المقروء من الصورة يتعدّل (FR-6) */
.list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: 10px var(--space-4);
  font-size: var(--fs-body);
}
.list-row:has(> .list-row-main:first-child) { --row-lead: 0px; } /* صف بلا أيقونة في أوله: الفاصل يبدأ من حافة النص */
.list-row:not(:last-child)::after { content: ''; position: absolute; inset-block-end: 0; inset-inline: calc(var(--space-4) + var(--row-lead, 52px)) var(--space-4); height: 1px; background-color: var(--line); pointer-events: none; }
.list-row-main { flex: 1; min-width: 0; }
.list-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}
.list-empty { padding: var(--space-4); color: var(--text-muted); font-size: var(--fs-small); line-height: 1.8; }
.list-add {
  display: block;
  width: 100%;
  min-height: 48px;
  border: none;
  border-top: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--accent-primary);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
}
@media (hover: hover) { .list-add:hover { background-color: var(--accent-subtle-bg); } }

/* عنوان قسم على الصفحة مع رابط جانبي (مثل «أحدث الملفات المرفوعة») */
.section-link { color: var(--accent-primary); font-size: 0.8125rem; text-decoration: none; }
/* روابط الأقسام النصية صغيرة الارتفاع: مساحة لمس 44px حولها دون تغيير الشكل (كزر تفاصيل المحاضرة) */
.section-link, .auth-links .link-btn { position: relative; }
.section-link::after, .auth-links .link-btn::after { content: ''; position: absolute; inset: -12px -8px; }
.list-row[data-click] { cursor: pointer; }
/* الرابط داخل فقرة يتميز بالخط لا باللون وحده (لمن لا يميّز الألوان) */
p a, p .section-link, .type-secondary a, .list-row-meta a { text-decoration: underline; text-underline-offset: 3px; }

/* بطاقة تسجيل الدخول (cloud.cardHtml، حالة الضيف): أيقونة دائرية أعلى النموذج، زر رئيسي بعرض كامل،
   ثم «نسيت كلمة المرور»/«إنشاء حساب» روابط نصية تحت الزر لا أزرار تنافسه بصرياً. */
/* صفحة الحساب (#/account، النموذج zb-account): قمرك في دائرة كبيرة والاسم والبريد، ثم صفوف المزامنة */
.account-page { display: grid; max-width: 520px; margin-inline: auto; }
.account-hero { display: grid; justify-items: center; gap: var(--space-1); margin-bottom: var(--space-6); text-align: center; }
.account-moon { width: 112px; height: 112px; margin-bottom: var(--space-3); outline: 3px solid var(--accent-primary); outline-offset: 4px; }
.account-name { font-size: var(--fs-headline); font-weight: 800; }
.account-email { font-size: var(--fs-body); font-weight: 600; color: var(--text-muted); overflow-wrap: anywhere; }
.auth-submit { width: 100%; justify-content: center; }
.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.auth-links .link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* المواعيد (1.2) */
.task-title { font-weight: 600; overflow-wrap: anywhere; }
.task-check {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.task-check::after { content: ''; position: absolute; inset: -12px; }
@media (hover: hover) { .task-check:hover { border-color: var(--semantic-success); } }
.task-row.is-done .task-check { background-color: var(--semantic-success); border-color: var(--semantic-success); }
.task-row.is-done .task-title { text-decoration: line-through; color: var(--text-muted); }

.task-title .reminder-chip { vertical-align: middle; margin-inline-start: 4px; }

@media (max-width: 480px) { .tab-bar .tab-btn svg { display: none; } }

/* Safari على الآيفون يكبّر الصفحة كلها عند التركيز على خانة خطها أقل من 16px ويصعب إرجاعها؛
   على شاشات اللمس لا تقل خانات الكتابة عن 16px (حتى مع تصغير حجم الواجهة). */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
    font-size: max(16px, 1em);
  }
}

/* ── أيقونة نوع الملف ── */
.file-icon {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background-color: var(--accent-subtle-bg);
  color: var(--accent-primary);
}
.file-icon.is-image { color: var(--semantic-success); background-color: var(--bg-surface-2); }

@media (max-width: 767px) {
  /* تبويبات تتمرر أفقياً: تلاشٍ عند الطرف الأيسر (نهاية القائمة في RTL) يلمّح بوجود المزيد */
  .tab-bar {
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
    mask-image: linear-gradient(to right, transparent 0, #000 28px);
    padding-inline-end: 24px;
  }
  .tab-bar::-webkit-scrollbar { display: none; }

  /* السجل الأكاديمي: ستة أعمدة ضيقة تتسع للشاشة بلا تمرير أفقي */
  .transcript-table th, .transcript-table td { padding: 8px 4px; font-size: 0.75rem; }
  .transcript-table th:first-child, .transcript-table td:first-child { padding-inline-start: 8px; }
}

/* ضغطة مرئية لكل زر في الشريط العائم (جوال وآيباد حتى 1023) */
@media (max-width: 1023px) {
  .mobile-nav-item > * { transition: transform var(--dur-1) var(--ease-spring); }
  .mobile-nav-item:active > *, .btn:active:not(:disabled) { transform: scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-item > * { transition: none; }
  .mobile-nav-item:active > *, .btn:active:not(:disabled) { transform: none; }
}

/* ── نظام التصميم (المرحلة 0): اللوح السفلي العام (js/sheet.js) وظهور العناصر المتتابع (js/motion.js) ── */
.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background-color: var(--scrim);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-2) ease;
}
.sheet-overlay.is-open { opacity: 1; }
.sheet-overlay.is-closing { opacity: 0; }
.sheet-panel {
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--surface-sheet);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
  padding: var(--space-2) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--dur-3) var(--ease-sheet);
  outline: none;
}
.sheet-overlay.is-open .sheet-panel { transform: translateY(0); }
.sheet-overlay.is-closing .sheet-panel { transform: translateY(100%); }
.sheet-grabber { width: 36px; height: 4px; border-radius: var(--r-pill); background-color: var(--line); margin: 0 auto 14px; }
.sheet-title { font-size: var(--fs-title); font-weight: 700; margin: 0 0 var(--space-3); color: var(--text-primary); }
@media (min-width: 768px) {
  .sheet-overlay { align-items: center; padding: var(--space-4); }
  .sheet-panel { max-width: 440px; border-radius: var(--r-sheet); padding-bottom: var(--space-6); transform: scale(0.98); opacity: 0; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease; }
  .sheet-overlay.is-open .sheet-panel { transform: none; opacity: 1; }
  .sheet-overlay.is-closing .sheet-panel { transform: scale(0.98); opacity: 0; }
  .sheet-grabber { display: none; }
}

.m-enter { animation: m-enter var(--dur-2) var(--ease-out) both; }
@keyframes m-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* انتقال الصفحات (الهوية S2) بمحرك js/page-motion.js: القديمة تبقى بعناصرها (.pg-ghost) فوق الجديدة المخفية (.pg-hold) حتى تنرسم،
   ثم تطلع وتدخل الجديدة (WAAPI على translate/scale/opacity). الطبقة مطلقة بإحداثيات الصفحة لا ثابتة: الثابت سياق تكديس
   يُنزل أشرطة الصفحة الثابتة (z-index فوق 15) تحت التدرّجات وشريط التنقل لحظة الضغطة */
.pg-ghost { position: absolute; top: 0; left: 0; width: 100%; height: 0; overflow-x: clip; overflow-anchor: none; } /* انزياحها 8px ما يوسّع الصفحة (حاويتها الصفحة كلها، فـ clip الـ body ما يقصّها) */
.pg-ghost, .pg-ghost * { pointer-events: none !important; }
.pg-ghost-page { position: absolute; margin: 0; max-width: none; }
/* سحب الرجوع (js/swipe-under.js): نسخة الصفحة السابقة تحت الحالية، تنكشف بإزاحة الحاوية ورجوع محتواها (لا قص متحرك) */
.sw-under { position: fixed; inset: 0; overflow: hidden; z-index: 0; will-change: transform; }
.sw-under, .sw-under * { pointer-events: none !important; }
.sw-under-in { position: absolute; inset: 0; will-change: transform, opacity; }
#app-root.pg-hold { opacity: 0; }
/* اللمس وقت الانتظار ما يوصل للجديدة المخفية؛ شريط التنقل فوقه (ضغطة تبويب ثانية تشتغل) */
.pg-shield { position: fixed; inset: 0; z-index: 14; touch-action: none; visibility: hidden; }
.pg-shield.on { visibility: visible; }
.pg-moon { position: fixed; z-index: 95; pointer-events: none; } /* القمر يطير بين القوس وخانة «أنا» فوق الشريط (S2) */
.pg-moon > .moonx { display: block; }
html.pg-moon-fly #app-root .tp-moon { opacity: 0; } /* طار للقوس قبل ما تنرسم الرئيسية: قمرها يظهر لما ينزل عليه */
/* المساحة في المجرة (css/stu.css) ترجع مع طلعة صفحتها لا فجأة */
html.pg-moving :is(.sky-band, .sky-stars) { transition: opacity var(--dur-2) var(--ease-out); }
::view-transition { pointer-events: none; } /* تبديل المظهر (css/me.css mz-tvt): الضغطات تمر للصفحة */

@media (prefers-reduced-motion: reduce) {
  .sheet-overlay, .sheet-panel { transition: none; }
  .m-enter { animation: none; }
}


/* منتقي الوقت (timePicker في utils.js): ساعة، دقيقة، صباحاً/مساءً بعرض متساوٍ ومقاس بقية الحقول */
.tp { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.tp-field + .tp-field { margin-top: var(--space-3); }
.tp-field > .form-label { display: block; margin-bottom: var(--space-1); }

/* الدخول بحساب Google فوق نموذج البريد، وفاصل «أو بالبريد الإلكتروني» */
/* الدخول (النموذج y2): ثلاثة أزرار بعرض كامل، والبريد تحت «بالإيميل» */
.auth-card { display: grid; gap: var(--space-3); }
.auth-h { margin: 0; font-size: var(--fs-large-title); font-weight: 800; } .auth-sub { margin: 0 0 var(--space-2); color: var(--text-secondary); }
.auth-google, .auth-apple, .auth-mail > summary { width: 100%; height: 56px; gap: var(--space-3); border-radius: var(--radius-pill); justify-content: center; font-weight: 800; }
.auth-google, .auth-mail > summary { background: var(--bg-surface-1); border: 1px solid var(--border-subtle); box-shadow: none; }
.auth-mail > summary { list-style: none; cursor: pointer; } .auth-mail > summary::-webkit-details-marker { display: none; }
.auth-mail[open] > summary { margin-bottom: var(--space-4); }
.auth-fine { margin: 0; text-align: center; font-size: var(--fs-small); color: var(--text-muted); }

/* السجل الأكاديمي: رجوع وطباعة في سطر هادئ فوق العنوان */
.tr-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tr-top .back-link { margin: 0; }
/* نافذة البيانات: أقسام هادئة بأزرار بعرض كامل */
.dm-body { display: grid; gap: var(--space-4); }
.dm-sec { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-card); background: var(--bg-surface-1); }
.dm-sec h3 { margin: 0; font-size: var(--fs-body); font-weight: 800; }
.dm-sec p { margin: 0; color: var(--text-secondary); font-size: var(--fs-caption); }
.dm-sec .dm-note { color: var(--text-muted); }
.dm-sec .dm-warn { color: var(--semantic-warning); }
.dm-sec .dm-note:empty { display: none; }
.dm-sec .btn-ghost { color: var(--text-secondary); }
.dm-bar { height: var(--space-2); border-radius: var(--radius-pill); background: var(--bg-surface-2); overflow: hidden; }
.dm-bar > div { height: 100%; width: 0; border-radius: inherit; background: var(--moon); }
.lb-top { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
/* زر الإغلاق في رؤوس النوافذ (وحذف صف في جدول التقديرات): دائرة 36 هادئة (اللقطة المعتمدة 28-modal-openCourseModal) */
.cd-x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--muted-bg); color: var(--text-secondary); cursor: pointer; }
/* أزرار دائرية أصغر من 44: منطقة لمس غير مرئية حولها */
.cd-x, .ct-send { position: relative; }
.cd-x::after, .ct-send::after { content: ''; position: absolute; inset: -4px; }
.cd-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* مساحة لمس 44 بلا تغيير الشكل (فحص الوصول 20 أكتوبر: «الكل» 25×20 و«جرّب Plus» ارتفاعه 20) */
.sec-h > a, .sec-h > .lnk, a.rose-t, .mz-gpa .mz-sech0 .mz-tbtn { position: relative; }
.sec-h > a::after, .sec-h > .lnk::after, a.rose-t::after, .mz-gpa .mz-sech0 .mz-tbtn::after { content: ''; position: absolute; inset: calc(-1 * var(--space-3)) calc(-1 * var(--space-2)); }

.ob-look-now { position: absolute; inset-inline: 16px; bottom: calc(var(--ob-bottom) + 198px); margin: 0; text-align: center; font: var(--t-caption); color: var(--text-2); }
@media (min-width: 768px) { .ob-look-now { position: static; margin: -20px 0 24px; text-align: start; } }

.app-ver { display: grid; gap: var(--space-3); } .app-ver p { margin: 0; }

/* مساحة لمس 44 حول الأزرار والروابط الصغيرة، والشكل نفسه ما يتغير (الجولة الثانية: LY-7 LY-8 FR-13 CR-14 MM-9 ST-12 AI-15).
   :where بلا وزن، فأي position أو ::after للمكوّن نفسه يغلب هذا. */
:where(.tab-btn, .tm-dch, .me-setuni, .adk-chip, .tm-subj, .chip.num, .chip.mini, .cz-whatif, .btn-sm, .ob-tlink, .color-swatch-opt, .al-play, button.clear, .tk-link, #tk-from, #tkm-deg, .cmd-clr, .cmd-clip, .cmd-mic, .cp-send, .cp-act, .cz .sendc, .iconbtn.sm, .sd-plus, .tkx-x, .lk-x, .tgl, .mz-ipback, .mz-plclose, .mz-prev-more, .tp-pin, .mz-rule > button, .pn-x, .vb, .vspd, .pg-rib, .pentray .pen, .ink-done) { position: relative; }
:where(.tab-btn, .tm-dch, .me-setuni, .adk-chip, .tm-subj, .chip.num, .chip.mini, .cz-whatif, .btn-sm, .ob-tlink, .color-swatch-opt, .al-play, button.clear, .tk-link, #tk-from, #tkm-deg, .cmd-clr, .cmd-clip, .cmd-mic, .cp-send, .cp-act, .cz .sendc, .iconbtn.sm, .sd-plus, .tkx-x, .lk-x, .tgl, .mz-ipback, .mz-plclose, .mz-prev-more, .tp-pin, .mz-rule > button, .pn-x, .vb, .vspd, .pg-rib, .pentray .pen, .ink-done)::after { content: ''; position: absolute; inset-block: min(0px, calc((100% - 44px) / 2)); inset-inline: min(0px, calc((100% - 44px) / 2)); }
/* LY-4 (تكبير النص 200%): أزرار الدخول والسجل تلتف بدل ما تطلع برا الشاشة؛ بالحجم العادي نفس الشكل */
.auth-google, .auth-apple, .auth-mail > summary { height: auto; min-height: 56px; white-space: normal; text-align: center; }
.tr-top { flex-wrap: wrap; }
/* css/study.css */
/* منظّمي — أدوات المذاكرة (المرحلة 3): البطاقات (3.3)، المؤقت (3.4)، خطة المراجعة (3.5).
   كل الألوان من متغيرات :root فتعمل في الوضعين الفاتح والداكن. */

.page-head { margin-bottom: var(--space-6); }
.page-head .type-secondary { color: var(--text-secondary); }

/* شريط تقدم بسيط */
.study-bar {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
  overflow: hidden;
}
.study-bar span { display: block; height: 100%; background: var(--moon); border-radius: inherit; }

/* تبويب البطاقات */
.card-form-body { display: grid; gap: var(--space-2); padding: var(--space-4); }
.card-form-body textarea { resize: vertical; }
.card-form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.card-front-text { font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-back-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* المؤقت */
.focus-time {
  font-size: clamp(3.5rem, 18vw, 6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  line-height: 1.1;
  margin: var(--space-4) 0;
  color: var(--text-primary);
}

/* خطة المراجعة */
.list-head.is-today { color: var(--accent-primary); }


/* رسائل التأكيد قد تحمل رابطاً على سطر مستقل (مشاركة المادة، 5.2) */
#delete-modal-msg { white-space: pre-line; overflow-wrap: anywhere; }
.shared-note { display: block; }
.shared-note summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

/* مؤشر انتظار المساعد الذكي: شريط متحرك أعلى الشاشة وبطاقة صغيرة بدائرة ووقت منقضٍ */
.ai-progress {
  position: fixed;
  inset-block-start: calc(env(safe-area-inset-top, 0px) + 60px); /* تحت شريط الصفحة: زر الرجوع يبقى يُضغط */
  inset-inline: 16px;
  margin-inline: auto;
  max-width: 420px;
  z-index: 290;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.ai-progress-spinner {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--accent-subtle-bg);
  border-top-color: var(--accent-primary);
  animation: ai-spin 0.8s linear infinite;
}
.ai-progress-text { flex: 1; min-width: 0; }
.ai-progress-x { flex: none; }
.ai-progress-title { font-weight: 600; color: var(--text-primary); }
.ai-progress-hint { font-size: 0.85em; color: var(--text-secondary); }
.ai-progress-bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  overflow: hidden;
}
.ai-progress-bar::after { content: ''; position: absolute; inset-block: 0; left: 0; width: 50%; background: linear-gradient(90deg, transparent, var(--accent-primary), transparent); animation: ai-bar 1.4s ease-in-out infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-bar { from { transform: translateX(-50%); } to { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) {
  .ai-progress-spinner { animation-duration: 2.4s; }
  .ai-progress-bar { background: var(--accent-primary); opacity: 0.4; }
  .ai-progress-bar::after { animation: none; display: none; }
}


/* خيارات الاختبار والموقّت (design-reference/quiz-options) */
.qo-field { display: flex; flex-direction: column; gap: var(--space-2); }
.qo-field[hidden] { display: none; }
.qo-label { display: flex; justify-content: space-between; font-size: var(--fs-small); font-weight: 600; color: var(--text-secondary); padding-inline: 4px; }
.qo-note, .qo-mode-sub { font-weight: 400; font-size: var(--fs-small); color: var(--text-muted); }
.tab-bar.qo-seg { width: 100%; margin: 0; }
.qo-seg .tab-btn { flex: 1; justify-content: center; padding-inline: var(--space-2); }
.qo-mode { min-height: 64px; padding-block: var(--space-2); }
.qo-mode-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.qo-radio { width: 22px; height: 22px; border-radius: var(--radius-pill); border: 2px solid var(--border-strong); flex: none; }
.qo-mode.is-on .qo-radio { border: 7px solid var(--accent-primary); }
/* «خطة أسبوعك» (js/views-week-plan.js، الشكل المعتمد design-reference/week-plan) */
.wp-sources { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background-color: var(--bg-surface-2); font-size: var(--fs-small); color: var(--text-secondary); }
.wp-sources strong { color: var(--text-primary); }
.wp-warning { color: var(--semantic-danger); }
.wp-delete { color: var(--semantic-danger); }
/* css/appearance.css */
/* منظّمي — صفحة المظهر: عيّنتا «ليلي» و«أسود خالص» (design-reference/identity/screens-me.css .mz-sw)، وحجم الخط،
   ومكوّنان عامان: مفتاح التشغيل والمنزلق */

.appearance-page { max-width: 640px; }
.mz-ap .appearance-page { margin-top: var(--space-4); }
.appearance-row-title { font: var(--t-body); font-weight: 500; color: var(--text); }

/* العيّنتان: صغيرتان في صف «المظهر» (.mz-sw)، وكبيرتان باسميهما في الصفحة (.mz-sw.big) */
.mz-sw { display: inline-flex; gap: 6px; }
.mz-sw i { display: block; width: 18px; height: 18px; border-radius: var(--r-pill); box-shadow: var(--ring-line); }
.mz-sw .on i { box-shadow: var(--swatch-ring); }
.sw-night { background: var(--sw-night); }
.sw-black { background: var(--sw-black); }
.mz-sw.big { display: flex; gap: 10px; width: 100%; }
.mz-sw.big > button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; border: 0; border-radius: var(--r-field);
  background: var(--surface-2); color: var(--text-2); font: var(--t-caption); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.mz-sw.big > button:active { transform: scale(var(--press-scale)); }
.mz-sw.big > .on { color: var(--text); box-shadow: var(--ring-on); background: var(--surface-3); }
.mz-sw.big > button:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.mz-sw.big i, .mz-sw.big .on i { width: 36px; height: 36px; box-shadow: var(--ring-line); }
.ap-panel > .mz-sw { padding: var(--space-4) var(--space-4) 0; }
.ap-panel > .list-row { border-bottom: 0; }
/* «مع السماء»: مفتاح تحت العيّنات */
.ap-panel > .mz-auto { margin-top: var(--space-2); border-bottom: 1px solid var(--line); }
.mz-auto { width: 100%; text-align: start; background: none; border: 0; color: inherit; font: inherit; }
.mz-auto small { display: block; margin-top: 2px; font: var(--t-caption); color: var(--text-2); white-space: normal; }

/* منزلق بقيم محددة */
.appearance-range { flex-direction: column; align-items: stretch; gap: var(--space-2); padding-block: var(--space-4); }
.appearance-range-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.appearance-range-head output { font: var(--t-label); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ui-range { width: 100%; height: 28px; accent-color: var(--rose); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .mz-sw.big > button { transition: none; }
}
/* css/dawn.css */
/* منظّمي — «فجر»: المظهر الفاتح (اعتمده المالك 22 أكتوبر 12:54 UTC، design/light-sky-2026-10-22/dawn-tokens-final.css).
   يركب على متغيرات css/base.css كـ :root[data-theme="dawn"]، ويختاره js/appearance.js (أو «مع السماء» نهاراً).
   الطبقات: data-theme = السماء والسطوح والنص، وdata-wear (ثيمات التراث) = اللون المميز والزخرفة فقط.
   السماء صورة مرسومة واحدة لكل مقاس (img/sky-dawn-*-v1.webp، نحو 20 ك.ب) فوق التدرّج، والنجوم تخفت قبل منتصف الشاشة. */

:root[data-theme="dawn"] {
  color-scheme: light;
  --sky-top: #8C95CE; --sky-horizon: #FEE6C9; --sky-0: #F6E6E2;
  --sky-img: url(/img/sky-dawn-phone-v1.webp);
  --dawn: #F3B39A; --dawn-a: 0; --dust: #8A7FB0; --dust-a: 0.16; --band-a: 0;
  --star: #7F7BB8; --stars-a: 0.32; /* نجوم «فجر» باهتة ضبابية لا نقاط داكنة تزعج العين (طلب المالك 23 أكتوبر) */
  --menu-bg: rgba(250, 250, 252, 0.72); --menu-rim: rgba(0, 0, 0, 0.08); --menu-line: rgba(0, 0, 0, 0.1); --menu-sep: rgba(0, 0, 0, 0.06); --menu-hot: rgba(0, 0, 0, 0.06); --menu-drop: 0 18px 50px rgba(60, 40, 90, 0.18);
  --surface: rgba(255, 251, 250, 0.9); --surface-2: rgba(246, 238, 242, 0.92); --surface-3: #ECE2EA; --line: rgba(70, 50, 110, 0.1);
  --surface-sheet: #FFFBFA; /* --surface بلا شفافية: الألواح والنوافذ (تحت) */
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(60, 40, 100, 0.06), 0 14px 34px -14px rgba(70, 45, 110, 0.28);
  --lg-spot: rgba(255, 255, 255, 0.75); --lg-spot-2: rgba(255, 255, 255, 0.22); --lg-blend: soft-light; /* soft-light: الضوء يفتّح الخلفية وما يغسل النص الغامق */ --lg-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 0 2px 8px rgba(255, 255, 255, 0.4);
  --glass-bg: rgba(255, 250, 250, 0.58); --glass-rim: rgba(255, 255, 255, 0.65); --glass-solid: rgba(255, 252, 250, 0.97);
  --shadow-float: 0 1px 2px rgba(60, 40, 100, 0.08), 0 18px 40px -12px rgba(70, 45, 110, 0.3);
  --scrim: rgba(40, 30, 60, 0.28);
  /* النص: text-2 يعطي 4.5:1 حتى أعلى السماء */
  --text: #1C1A33; --text-2: #312F4A; --text-3: #3F3D57;
  /* اللون المميز: ثيمات التراث تبدّل هذي فقط في الفجر */
  --on-ink: #FFFFFF; --rose: #8E3346; --on-rose: #FFFFFF; --mark-dot: #B4475A; --aura-sky: #3F5FC4;
  /* قمر أغمق للنص فوق السماء المفتوحة (tests/v159-appearance.spec.js) */
  --moon-ink: #5E3F0C;
  --ring-moon-ink-2: inset 0 0 0 2px var(--moon-ink);
  --moon: #94661A; --moon-disc: #FFFFFF; --moon-dark: #B9B6DC; --moon-wash: #F6ECD8; --moon-rim: rgba(255, 255, 255, 0.55);
  --moon-hi: #C79A45; --moon-lo: #94661A;
  --glow-moon: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 70%);
  --ember: #B8410F; --ember-wash: #FBE5DA; --cloud: rgba(255, 255, 255, 0.9);
  --hl-y: rgba(245, 197, 66, 0.5); --hl-g: rgba(76, 195, 138, 0.4); --hl-p: rgba(240, 139, 176, 0.45); --hl-b: rgba(106, 168, 240, 0.42);
  /* أحبار المواد الأغمق: تُقرأ على الفاتح */
  --on-planet: #FFFFFF; --planet-shade: rgba(20, 20, 40, 0.16);
  --c-teal: #00787A; --c-blue: #1F6A9E; --c-indigo: #4C5BA0; --c-violet: #6A5294; --c-plum: #844C83;
  --c-henna: #8F5518; --c-olive: #646810; --c-green: #2E7442; --c-slate: #52627A;
  /* صفحة الملف ورق أبيض */
  --pg-bg: #FFFFFF; --pg-ink: #1A1C26; --pg-ink-2: #5A6070; --paper: #FFFFFF; --paper-line: #8A90A0;
  --paper-bg: #FFFFFF; --paper-ln: #8A90A0; --paper-ink: #1A1C26;
  /* طبقات الشاشة */
  --dawn-dim: linear-gradient(180deg, rgba(244, 240, 252, 0.4), rgba(255, 244, 238, 0.55));
  --dawn-bfade: linear-gradient(180deg, transparent, color-mix(in srgb, #C9A1AE 35%, transparent) 60%, color-mix(in srgb, #B98C9C 55%, transparent));
  --dawn-tfade: linear-gradient(180deg, color-mix(in srgb, #8C95CE 80%, transparent) 30%, transparent);
  --dawn-stars-mask: linear-gradient(180deg, #000 30%, transparent 62%);
  /* الصندوق v3: الندرة أغمق لتُقرأ على السماء الفاتحة، والصندوق يبقى داكناً (لكّ على سماء الفجر) */
  --rar-c: #4F5675;
  --rar-r: #1A5C8A;
  --rar-e: #A8344C;
  --rar-l: #8A5C08;
  --chest-flash: #FFFFFF;
  --chest-ribbon: #C65A74;
  --chest-night-a: #44569A;
  --chest-night-b: #161B36;
  --chest-night-trim: #DCE5F8;
  --chest-badr-a: #E2B04A;
  --chest-badr-b: #7A5414;
  --chest-badr-trim: #4A3410;
  --chest-gift-a: #8E3E5A;
  --chest-gift-b: #2A1220;
  --chest-gift-trim: #F2DCA6;
}
@media (min-width: 768px) { :root[data-theme="dawn"] { --sky-img: url(/img/sky-dawn-ipad-v1.webp); } }
@media (min-width: 1280px) { :root[data-theme="dawn"] { --sky-img: url(/img/sky-dawn-desk-v1.webp); } }

:root[data-theme="dawn"] .sky { background: var(--sky-img) 50% 100% / cover no-repeat, linear-gradient(180deg, var(--sky-top), var(--sky-horizon)); }
:root[data-theme="dawn"] .sky-stars { -webkit-mask-image: var(--dawn-stars-mask); mask-image: var(--dawn-stars-mask); }
:root[data-theme="dawn"] .sky-dim { background: var(--dawn-dim); }
:root[data-theme="dawn"] .bottomfade { background: var(--dawn-bfade); }
:root[data-theme="dawn"] .topfade { background: var(--dawn-tfade); }
/* دفعة v159: نص القمر فوق السماء وغسلة القمر يُقرأ؛ عدّ المواضيع الصغير بالحبر ونقطته الذهبية تبقى */
:root[data-theme="dawn"] :is(.gx-n, .mm-t b, .mm-t .moon-t, .mz-nightn, .sb-exa, .sb-eq .sb-c2, .po-plans .pp-badge) { color: var(--moon-ink); }
:root[data-theme="dawn"] .gm-key b { color: var(--text); }
/* النجمة الناعمة (SYM.soft، 30 أكتوبر): لبّها الأبيض العريض يطلع حلقة فاضية على السماء الفاتحة، فيصير بلون النجوم بنقطة حارة صغيرة
   في وسطه مثل نجمة الشعار الوردية */
:root[data-theme="dawn"] { --ss-core: var(--star); }
/* روابط الوردي فوق السماء المفتوحة («جرّب Plus»، رجوع الصفحات، روابط رؤوس الأقسام) كانت 2.9 إلى 3.5:1 أعلى السماء:
   تميل للحبر وتبقى بلون الثيم الملبوس (tests/v159-appearance.spec.js) */
:root[data-theme="dawn"] :is(.mz-tbtn, .back-link, .sec-h > a, .sec-h > .lnk, a.rose-t) { color: color-mix(in srgb, var(--rose) 45%, var(--text)); }
/* الألواح والنوافذ مصمتة (قرار المالك 24 أكتوبر): --surface الشفاف (0.9) و--glass-solid (0.97) كانا يُظهران الشاشة والشريط من تحتها */
:root[data-theme="dawn"] :is(.sheet-panel, .ps-sheet, .modal-container, .ne-panel, .ct-side, .mm-peek, .pt-dock, .th-menu, .ink-pop, .cmd-panel, .cmd.is-wide.is-th .cmd-panel.glass) { background-color: var(--surface-sheet); }
/* عيّنة «فجر» في صفحة المظهر */
.sw-dawn { background: var(--sw-dawn); }
/* css/onboarding.css */
/* منظّمي — أول تشغيل (الدفعة 2، اعتمدها المالك 8 نوفمبر: design-reference/batch2/a ob1-v2 وob2-scan وob3-ready وob3b-uni وob4-done):
   «من الورقة للسماء» ثم الكاميرا ثم «جدولك جاهز» ثم «تم». عمود الجوال 390 في الوسط على أي عرض، والحركة transform/opacity فقط
   وتقف مع تقليل الحركة. المتغيرات فقط، والمظاهر الثلاثة. */

:root { --ob-apple-ring: inset 0 0 0 1px var(--line); --ob-top: calc(max(env(safe-area-inset-top, 0px), 47px) + 6px);
  --ob-bottom: max(env(safe-area-inset-bottom, 0px), 34px); }
:root:not([data-theme="black"]) .onboarding-overlay { --band-a: 0.10; }

.onboarding-overlay { position: fixed; inset: 0; z-index: 400; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; color: var(--text);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-horizon));
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.onboarding-overlay.is-open { opacity: 1; }
.onboarding-overlay.is-closing { opacity: 0; }
.onboarding-overlay.is-away { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }
.ob-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ob-band { position: absolute; inset: -16.4% -10.65%; opacity: var(--band-a, 0); background: url(/img/band-v1.webp) 0 0 / 100% 100% no-repeat; transform: rotate(-28deg) scaleY(0.55); }
.ob-dim { position: absolute; inset: 0; background: var(--sky-0); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.onboarding-overlay[data-step] .ob-dim { opacity: 0.45; }

/* الشاشات: الجديدة تدخل بتلاشٍ وارتفاع خفيف، والقديمة تتلاشى فوقها */
.ob-screen { position: relative; min-height: 100dvh; max-width: 430px; margin: 0 auto; animation: ob-enter var(--dur-2) var(--ease-out) backwards; outline: none; }
.ob-screen.is-leaving { position: absolute; inset-inline: 0; top: 0; z-index: 1; pointer-events: none; animation: ob-leave var(--dur-2) var(--ease-out) forwards; }
@keyframes ob-enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes ob-leave { to { opacity: 0; } }
.ob-b52 { height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.ob-link { height: 44px; padding: 0 4px; border: 0; background: none; font: var(--t-label); color: var(--text-2); cursor: pointer; }
.ob-link b { color: var(--text); font-weight: 700; }
.ob-link:focus-visible, .ob-tlink:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; border-radius: var(--r-chip); }

/* ===== ob1-v2 «من الورقة للسماء»: البطل 390×560 بإحداثيات النموذج، والنص والأزرار تحت */
.ob-wl { display: flex; flex-direction: column; padding: 0 16px var(--ob-bottom); }
.obv-hero { position: absolute; left: 50%; top: 0; width: 390px; height: 560px; margin-left: -195px; z-index: 1; transform-origin: 50% 0; }
.obv-wm { position: absolute; left: 0; right: 0; top: 64px; display: flex; justify-content: center; color: var(--text); }
svg.obv-arc, svg.obv-trails { position: absolute; left: 0; top: 0; width: 390px; height: 560px; direction: ltr; overflow: visible; }
svg.obv-trails { z-index: 3; }
.obv-pl { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); z-index: 2; }
.obv-pl::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 2.2); height: calc(var(--s) * 2.2); margin: calc(var(--s) * -1.1); border-radius: var(--r-round);
  background: radial-gradient(circle, color-mix(in srgb, var(--pi) 32%, transparent), transparent 66%); }
.obv-pl .planet { position: relative; box-shadow: var(--rim); }
.obv-pl.slot::before { display: none; }
.obv-pl.slot i { position: absolute; inset: 0; border-radius: var(--r-round); border: 1.5px dashed color-mix(in srgb, var(--pi) 70%, transparent); }
.obv-mn { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; z-index: 2; }
.obv-mn .glow { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px; border-radius: var(--r-round); background: var(--glow-moon); }
.obv-mrot { position: relative; display: block; transform: rotate(38deg); }
.obv-mrot svg { display: block; }
.obv-shot { position: absolute; left: 50%; top: 432px; width: 256px; height: 172px; margin: -86px 0 0 -128px; transform: rotate(-5deg); z-index: 1; }
.obv-paper { position: absolute; inset: 0; border-radius: var(--r-field); background: var(--paper-bg); box-shadow: var(--rim), var(--shadow-float); padding: 10px;
  display: grid; grid-template-columns: 26px repeat(5, 1fr); grid-template-rows: 16px repeat(4, 1fr); gap: 4px; overflow: hidden; direction: rtl; }
.obv-paper::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 90% at 30% 20%, transparent 55%, color-mix(in srgb, var(--paper-ln) 16%, transparent)); pointer-events: none; }
.obv-paper .dh, .obv-paper .th { font: 600 var(--fs-nano)/16px var(--font); color: var(--paper-ink); opacity: .55; text-align: center; white-space: nowrap; }
.obv-paper .th { display: grid; place-items: center; font-feature-settings: "tnum"; }
.obv-paper .c { border-radius: var(--r-mark); background: color-mix(in srgb, var(--paper-ln) 7%, var(--paper-bg)); display: grid; place-items: center; font: 600 var(--fs-nano)/1 var(--font); color: var(--paper-ink); white-space: nowrap; overflow: hidden; }
.obv-paper .c[style] { background: color-mix(in srgb, var(--pi) 34%, var(--paper-bg)); }
.obv-paper .c.gone { background: transparent; box-shadow: var(--ring-1) color-mix(in srgb, var(--pi) 55%, var(--paper-bg)); }
:root[data-theme="dawn"] .obv-paper .c[style]:not(.gone) { background: color-mix(in srgb, var(--pi) 20%, var(--paper-bg)); }
.obv-beam { position: absolute; left: -8px; right: -8px; top: 89px; height: 2px; border-radius: var(--r-hair); background: var(--moon); box-shadow: var(--glow-beam); z-index: 2; }
.obv-beam::before { content: ''; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 70px; background: linear-gradient(0deg, color-mix(in srgb, var(--moon) 20%, transparent), transparent); }
:root[data-theme="dawn"] .obv-beam::before { opacity: .5; }
.obv-txt { margin-top: auto; padding-top: 560px; text-align: center; position: relative; z-index: 3; }
.obv-txt .ob-wl-h { font: var(--t-display); margin: 0; outline: none; }
.obv-txt p { font: var(--t-body); color: var(--text-2); margin: 8px 0 0; }
.obv-acts { margin-top: 28px; position: relative; z-index: 3; }
.ob-alt { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 8px; }
.ob-alt .sep { width: 1px; height: 24px; background: var(--line); }
/* شاشة أقصر من 820: البطل يصغر من فوق (transform)، والنص يطلع معه */
@media (max-height: 819px) { .obv-hero { transform: scale(.86); } .obv-txt { padding-top: 482px; } }
@media (max-height: 740px) { .obv-hero { transform: scale(.74); } .obv-txt { padding-top: 414px; } }
@media (max-height: 660px) { .obv-hero { transform: scale(.64); } .obv-txt { padding-top: 358px; } }

/* الحركة: الصورة تدخل من تحت بميلان أكبر وتستقر، خط المسح ينزل عليها، وكل خانة يمر عليها تطلع منها نقطة بلونها تمشي على الأثر
   وتصير كوكب على القوس. التوهّج حول القمر يتنفس بهدوء (onboarding-pulse، opacity/transform) */
@keyframes obv-fade { from { opacity: 0; } }
@keyframes obv-shot { from { opacity: 0; transform: translateY(40px) rotate(-11deg) scale(.94); } }
@keyframes obv-beam { from { transform: translateY(-80px); opacity: 0; } 20% { opacity: 1; } }
@keyframes obv-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes obv-trail { from { opacity: 0; } 40% { opacity: 1; } }
@keyframes obv-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes onboarding-pulse { 50% { opacity: .55; transform: scale(.92); } }
.ob-wl .obv-arc, .ob-wl .obv-wm { animation: obv-fade 700ms var(--ease-out) both; }
.ob-wl .obv-shot { animation: obv-shot 800ms var(--ease-sheet) 100ms both; }
.ob-wl .obv-beam { animation: obv-beam 1100ms var(--ease-io) 700ms both; }
.ob-wl .obv-trails g { animation: obv-trail 600ms var(--ease-out) both; animation-delay: calc(1100ms + var(--i) * 140ms); }
.ob-wl .obv-pl:not(.slot), .ob-wl .obv-mn { animation: obv-pop var(--dur-4) var(--ease-spring) both; animation-delay: calc(1300ms + var(--i, 0) * 140ms); }
.ob-wl .obv-mn .glow { animation: onboarding-pulse var(--dur-pulse) var(--ease-io) 2000ms infinite; }
.ob-wl .obv-txt { animation: obv-up var(--dur-4) var(--ease-out) 400ms both; }
.ob-wl .obv-acts { animation: obv-up var(--dur-4) var(--ease-out) 500ms both; }

/* ===== الخطوات */
.ob-step .ob-col { padding: var(--ob-top) 16px calc(var(--ob-bottom) + 110px); }
.ob-h1 { font: var(--t-title); margin: 0; outline: none; }
.ob-note { font: var(--t-caption); color: var(--text-3); text-align: center; margin: 16px 0 0; }
.ob-err { font: var(--t-label); color: var(--ember); text-align: center; margin: 10px 0 0; }
.ob-gap { margin-top: 18px; }
.ob-tlink { padding: 0; border: 0; background: none; font: var(--t-label); color: var(--text-2); cursor: pointer; position: relative; }
.ob-tlink::after { content: ''; position: absolute; inset: -12px -8px; }
.ob-foot { position: fixed; bottom: calc(var(--ob-bottom) + 8px); left: 50%; width: min(398px, calc(100% - 32px)); transform: translateX(-50%); z-index: 2; text-align: center; }
.ob-foot::before { content: ''; position: absolute; z-index: -1; inset: -60px -16px calc(-1 * (var(--ob-bottom) + 8px)); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sky-0) 70%, transparent)); pointer-events: none; }
.ob-foot .btn { width: 100%; }
.onboarding-overlay:has(.ob-sheet.is-open) .ob-foot { visibility: hidden; }

/* ob2: الكاميرا — إطار بزوايا، والصورة أو المعاينة داخله، وخط المسح يمشي وهو يقرأ */
.ob-cam .ob-col { min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: calc(var(--ob-bottom) + 8px); }
.cam-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cam-top .tt { text-align: center; flex: 1; }
.cam-top .ob-h1 { font: var(--t-head); }
.cam-top small { font: var(--t-caption); color: var(--text-2); }
.vf { position: relative; margin: 22px 6px 0; height: min(400px, 48dvh); }
.vf .photo { position: absolute; inset: 22px 18px; border-radius: var(--r-thumb); background: color-mix(in srgb, var(--surface-2) 60%, transparent); overflow: hidden; display: grid; place-items: center; }
.vf.is-live .photo, .vf.is-reading .photo { background: var(--paper-bg); box-shadow: var(--shadow-float); }
.vf.is-reading .photo { transform: rotate(-2deg); transition: transform var(--dur-3) var(--ease-out); }
.vf .cam-live, .vf .cam-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf:not(.is-live) .cam-live { display: none; }
.vf .cam-shot[hidden] { display: none; }
.vf.is-reading .cam-shot { object-fit: contain; }
.vf .corner { position: absolute; width: 34px; height: 34px; border: 3px solid var(--text); }
.vf .corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: var(--r-field); }
.vf .corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: var(--r-field); }
.vf .corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: var(--r-field); }
.vf .corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: var(--r-field); }
.vf .scanline { position: absolute; inset-inline: 10px; top: 40px; height: 2px; background: var(--moon); box-shadow: var(--glow-scan); border-radius: var(--r-hair); opacity: 0; }
.vf.is-reading .scanline { animation: ob-scan 1600ms var(--ease-io) 24 alternate both; }
@keyframes ob-scan { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(calc(min(400px, 48dvh) - 90px)); } }
.reading { position: absolute; left: 50%; bottom: -18px; transform: translate(-50%, 6px); height: 40px; padding: 0 16px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 8px; font: var(--t-label); white-space: nowrap; opacity: 0; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.vf.is-reading .reading { opacity: 1; transform: translate(-50%, 0); }
.reading b { font-weight: 700; }
.reading .dot { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--moon); box-shadow: var(--halo-moon-4); }
.cam-hint { font: var(--t-caption); color: var(--text-2); text-align: center; margin: 30px 0 18px; }
.cam-hint.is-err { color: var(--ember); }
.cam-bot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.ob-shutter { width: 78px; height: 78px; border-radius: var(--r-round); display: grid; place-items: center; padding: 0; border: 0; background: none; box-shadow: var(--ring-on-3); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.ob-shutter i { display: block; width: 62px; height: 62px; border-radius: var(--r-round); background: var(--text); }
.ob-shutter:active { transform: scale(var(--press-scale)); }
.ob-shutter:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.cam-side { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; font: var(--t-micro); color: var(--text-2); }
.cam-side .mz-iconbtn { width: 52px; height: 52px; }

/* ob3: جدولك جاهز */
.ob-hd { margin: 4px 4px 0; }
.ob-hd .kick { font: var(--t-label); color: var(--text-2); }
.ob-hd .ob-h1 { margin-top: 2px; }
.found { display: inline-flex; align-items: center; gap: 4px; color: var(--moon); }
:root[data-theme="dawn"] .found { color: var(--moon-ink); }
.uni-row .lead { width: 44px; height: 44px; border-radius: var(--r-field); background: var(--surface-2); color: var(--text); display: grid; place-items: center; flex: none; }
:root[data-theme="dawn"] .uni-row .lead { background: var(--surface-3); }
.ob-step .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-step .rt b { font: var(--t-row); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-step .rt small { font: var(--t-caption); color: var(--text-2); }
.ob-step .rt small.num { font-feature-settings: "tnum"; }
.ob-uni-btn { flex: none; min-width: 72px; min-height: 40px; }
.ob-sech { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 4px 10px; }
.ob-sech h2 { font: var(--t-head); margin: 0; }
.ob-courses .list-row { min-height: 64px; --row-lead: 48px; }
.ob-courses .lead { flex: none; display: grid; place-items: center; }

/* ob4: تم — القمر وموادّه حوله */
.ob-done .ob-col { overflow-x: hidden; }
.done-art { position: relative; width: 390px; height: 300px; display: grid; place-items: center; margin: 14px calc(50% - 195px) 0; } /* أعرض من العمود ويتوسّط عليه */
.done-art .glow { position: absolute; width: 260px; height: 260px; border-radius: var(--r-round); background: var(--glow-moon); opacity: .9; }
.done-art .ring { position: absolute; width: 230px; height: 230px; border-radius: var(--r-round); border: 1.5px dashed color-mix(in srgb, var(--text-3) 70%, transparent); }
.done-moon { position: relative; display: block; transform: rotate(38deg); }
.done-moon svg { display: block; }
.done-art .ob-pl { position: absolute; display: block; line-height: 0; }
.done-txt { text-align: center; }
.done-txt .ob-h1 { font: var(--t-display); }
.done-txt p { font: var(--t-body); color: var(--text-2); margin: 8px 0 0; }
.done-txt p b { color: var(--text); font-weight: 700; }
.ob-done-rows { margin-top: 26px; }
.ob-done-rows .list-row { min-height: 64px; }
.ob-done-rows .lead { width: 32px; flex: none; display: grid; place-items: center; color: var(--text-2); }
.ob-done-rows button.list-row { width: 100%; border: 0; border-radius: var(--r-none); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.ob-done-rows .chev { color: var(--text-3); flex: none; }
/* مفتاح «نذكّرك» (ob4): مطفي خط وكرة بلون النص، وشغّال بلون القمر */
.ob-done-rows .mz-tog { background: var(--line); }
.ob-done-rows .mz-tog::after { background: var(--text); }
.ob-done-rows .mz-tog.on { background: var(--moon); }
.ob-done-rows .mz-tog.on::after { background: var(--on-ink); }
:root[data-theme="dawn"] .ob-done-rows .mz-tog.on { background: var(--moon-ink); }
:root[data-theme="dawn"] .ob-done-rows .mz-tog:not(.on)::after { background: var(--surface-sheet); }
.ob-look { display: flex; gap: 6px; flex: none; }
.ob-look > button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: var(--t-caption); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.ob-look > button:active { transform: scale(var(--press-scale)); }
.ob-look > button:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
:root[data-theme="black"] .ob-look [data-look="black"], :root[data-theme="dawn"] .ob-look [data-look="dawn"] { color: var(--text); box-shadow: var(--ring-on); background: var(--surface-3); }
.ob-look i { display: block; width: 16px; height: 16px; border-radius: var(--r-pill); box-shadow: var(--ring-line); }
@keyframes ob-orbit-in { from { opacity: 0; transform: scale(.4); } }
.ob-done .ob-pl { animation: ob-orbit-in var(--dur-4) var(--ease-spring) both; animation-delay: calc(200ms + var(--i) * 90ms); }

/* ob3b: «وش جامعتك؟» */
.ob-uni-sheet { text-align: start; }
.ob-sh-h { display: flex; align-items: center; gap: 10px; margin: 6px 2px 4px; }
.ob-sh-h h2 { flex: 1; margin: 0; text-align: start; }
.ob-x { width: 32px; height: 32px; border-radius: var(--r-round); border: 0; padding: 0; background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); flex: none; cursor: pointer; position: relative; }
.ob-x::after { content: ''; position: absolute; inset: -6px; }
:root[data-theme="dawn"] .ob-x { background: var(--surface-3); }
.ob-search { margin: 12px 0; height: 52px; border-radius: var(--r-field); background: var(--surface-2); box-shadow: var(--ring-line); display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--text-2); }
.ob-search:focus-within { outline: 2px solid var(--rose); outline-offset: 2px; }
.ob-search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; font: var(--t-body); color: var(--text); outline: none; }
.ob-search input::placeholder { color: var(--text-3); }
.ob-search input::-webkit-search-cancel-button { display: none; }
.ob-uni-sheet .list-panel.ob-unis { max-height: 38dvh; overflow-y: auto; background: var(--surface-2); border-color: transparent; }
:root[data-theme="dawn"] .ob-uni-sheet .list-panel.ob-unis { background: var(--surface-3); }
.ob-unis .list-row { width: 100%; min-height: 64px; border: 0; border-radius: var(--r-none); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; --row-lead: 0px; }
.ob-unis .list-row[hidden] { display: none; }
.ob-unis .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-unis .rt b { font: var(--t-row); font-weight: 600; }
.ob-unis .rt small { font: var(--t-caption); color: var(--text-2); }
.radio { width: 24px; height: 24px; border-radius: var(--r-round); box-shadow: var(--ring-text3-2); flex: none; display: grid; place-items: center; }
.radio.on { box-shadow: none; background: var(--ink); color: var(--on-ink); }
.unlock { display: flex; gap: 10px; align-items: flex-start; margin: 14px 4px 16px; font: var(--t-caption); color: var(--text-2); text-align: start; }
.unlock .ic { color: var(--moon); margin-top: 1px; flex: none; }
:root[data-theme="dawn"] .unlock .ic { color: var(--moon-ink); }

/* ===== الألواح داخل الشاشة: أهلاً فيك من جديد، المساعد يحتاج حسابك، موافقة الصورة، مادة جديدة، جرّب أول محاضرة */
.ob-sheet { position: fixed; z-index: 10; }
.ob-scrim { position: absolute; inset: 0; }
.ob-sheet-panel { position: relative; padding: 10px 16px calc(var(--ob-bottom) + 10px); text-align: center; }
.ob-sheet-panel h2 { font: var(--t-head); margin: 8px 0 0; outline: none; }
.ob-sheet-panel > p { font: var(--t-label); color: var(--text-2); margin: 4px 0 22px; }
.ob-sheet-panel > p.ob-consent { text-align: start; }
.ob-sheet-panel > p a { color: var(--rose); }
.mz-auth { width: 100%; height: 48px; border: 0; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; gap: 10px; font: var(--t-button); background: var(--surface-2); color: var(--text); margin: 0 0 10px; cursor: pointer; }
.mz-auth.apple { background: var(--mz-apple-bg); color: var(--mz-apple-fg); box-shadow: var(--ob-apple-ring); }
.mz-auth:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.mz-auth:disabled { opacity: 0.6; }
.ob-later { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; }
.ob-later .btn { height: 44px; padding: 0 6px; font: var(--t-button); font-weight: 500; color: var(--rose); background: none; }
.ob-later span { font: var(--t-label); color: var(--text-2); }
.ob-later span::before { content: '· '; color: var(--text-3); }
.ob-cancel { margin-top: 6px; }
/* «فجر»: سطح اللوح شفاف 0.9 فتبان السماء والبطاقة من خلفه (css/dawn.css)، و--glass-solid وحده 0.97 يبقي ظل النص خلفه،
   فتحته --surface-3 المعتم: اللون نفسه تقريباً بلا شفافية، والحقول (--surface-2) تذوب فيه */
:root[data-theme="dawn"] .ob-sheet-panel { background-color: var(--surface-3); background-image: linear-gradient(var(--glass-solid), var(--glass-solid)); }
:root[data-theme="dawn"] .ob-form .tm-field, :root[data-theme="dawn"] .ob-form .tm-dch:not(.on) { background: var(--surface-3); }
/* «مادة جديدة»: حقول «محاضرة جديدة» في الجدول (.tm-field و.chip و.tm-2col داخل .tm) */
.ob-sheet-panel.ob-form { text-align: start; }
.ob-sheet-panel.ob-form h2 { text-align: center; margin-bottom: 4px; }
.ob-course .tm-cap { margin-top: 14px; }
.ob-form .ob-c-go { margin-top: 24px; }
/* نهاية قبل البداية: سطر قصير تحت الوقت، مكانه محجوز فلا تقفز الحقول، ويظهر بتلاشٍ */
.ob-c-hint { min-height: 1.125rem; margin: 6px 4px 0; font: var(--t-caption); color: var(--rose); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.ob-c-hint.on { opacity: 1; }
/* «جرّب أول محاضرة»: سطر متوازن، وأيقونة الملف داخل الزر */
.ob-sheet-panel > p.ob-ready-p { text-wrap: balance; }
.ob-lec { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }

/* الزائر الجديد: الصفحة مخفية حتى تُغلق شاشة الترحيب فلا تومض الرئيسية قبلها (js/app.js › onboarding.prepare) */
html[data-welcome] body > :not(.onboarding-overlay) { visibility: hidden; }
html:not([data-welcome]) .onboarding-overlay.is-boot { display: none; }
/* راجع من الدخول في منتصف الخطوات: لا يومض الترحيب قبل خطوته */
html[data-welcome="resume"] .onboarding-overlay.is-boot .ob-wl { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .onboarding-overlay, .ob-dim, .reading, .vf.is-reading .photo { transition: none; }
  .ob-screen, .ob-screen.is-leaving, .ob-wl *, .ob-done .ob-pl, .vf.is-reading .scanline { animation: none !important; }
  .vf.is-reading .scanline { opacity: 1; top: 50%; }
  .ob-look > button, .ob-c-hint, .ob-shutter { transition: none; }
}
/* css/plus.css */
/* منظّمي — عدّاد التجربة (planMeter)، لوح انتهاء التجربة (paywallSheet)، وPlus (#/plus) لوحاً فوق «أنا»
   (design-reference/identity/screens-me.css §8.13). الألوان والانحناءات والحركة من متغيرات نظام التصميم. */
:root {
  --pl-fade: linear-gradient(180deg, #000 25%, transparent 100%); /* قناع شفافية لا لون */
  --pl-fade-w: linear-gradient(180deg, #000 55%, transparent 98%);
  --pl-head-line: 0 1px 0 var(--line);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* عدّاد التجربة (بطاقة الحساب) */
.pm-card { display: flex; flex-direction: column; gap: var(--space-3); }
.pm-top { display: flex; align-items: center; gap: var(--space-4); }
.pm-ring-wrap { flex: none; width: 88px; height: 88px; }
.pm-ring { display: block; }
.pm-ring-fg { transition: none; }
.pm-ring-num { font: var(--t-subtitle); fill: var(--text-primary); }
.pm-ring-of { font: var(--t-micro); fill: var(--text-secondary); }
.pm-info { flex: 1; min-width: 0; }
.pm-usage { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.pm-line { will-change: opacity, transform; }
.pm-chip { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; border-radius: var(--r-chip); background-color: var(--surface-2); color: var(--text-2); font: var(--t-micro); border: none; cursor: default; }
.pm-chip-warning { color: var(--semantic-warning); }
.pm-chip-danger { position: relative; color: var(--semantic-danger); cursor: pointer; }
/* حجم لمس 44px بلا تكبير الشارة بصرياً */
.pm-chip-danger::before { content: ''; position: absolute; inset-block: -10px; inset-inline: 0; min-height: 44px; }

/* لوح انتهاء التجربة: شهاب، عنوان، سطر القيمة، زر وردي واحد */
.ps-overlay { position: fixed; inset: 0; z-index: 500; display: flex; align-items: flex-end; justify-content: center; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) ease; }
.ps-overlay.is-open { opacity: 1; pointer-events: auto; }
.ps-overlay.is-closing { opacity: 0; }
.ps-sheet { width: 100%; background: var(--surface-sheet); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 10px 16px max(40px, calc(var(--space-6) + env(safe-area-inset-bottom))); text-align: center;
  transform: translateY(100%); transition: transform var(--dur-3) var(--ease-sheet); touch-action: none; }
.ps-overlay.is-open .ps-sheet { transform: none; }
.ps-overlay.is-closing .ps-sheet { transform: translateY(100%); }
.ps-grab { width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--line); margin: 0 auto 14px; }
.ps-art { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); }
.ps-title { font: var(--t-head); margin: 0 0 6px; }
.ps-value { font: var(--t-label); color: var(--text-2); margin: 0 0 20px; text-wrap: pretty; }
.ps-sheet .btn-ghost { margin-top: 8px; }
/* لوح الضيف (1a و1b المعتمدتين) بحافة اللوح العام السفلية (screens.css .sheet-panel) */
@media (max-width: 767px) { .ps-sheet:has(> .po-gate) { padding-bottom: calc(34px + env(safe-area-inset-bottom)); } }
@media (min-width: 768px) {
  .ps-overlay { align-items: center; }
  .ps-sheet { max-width: 440px; border-radius: var(--r-sheet); border: 1px solid var(--line); box-shadow: var(--rim), var(--shadow-float); padding: 28px 24px 20px; transform: scale(0.98); opacity: 0;
    transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease; }
  .ps-grab { display: none; }
  .ps-overlay.is-open .ps-sheet { transform: none; opacity: 1; }
  .ps-overlay.is-closing .ps-sheet { transform: scale(0.98); opacity: 0; }
}

.sheet-panel .list-panel, .ps-sheet .list-panel { background-color: var(--surface-sheet); }

/* عرض Plus لحظة الحاجة (design-reference/plus-offer، js/plus-offer.js): لوح الضيف، والخط الزمني، والباقات، ولوح 402 */
.po-gate { padding-top: var(--space-2); }
.po-gate .mz-list, .po-pay .mz-list { text-align: start; }
.ps-sheet .po-mini.list-panel { margin: 0 0 var(--space-5); }
.po-mini .list-row, .po-time .list-row { min-height: 56px; }
.po-auth { margin-top: var(--space-2); }
.po-gate .btn-ghost, .po-over .btn-ghost { margin-top: 2px; }
.po-fine { font: var(--t-caption); color: var(--text-3); text-align: center; margin: var(--space-3) 0 0; }
.po-art-ok { color: var(--moon); }
.po-swap > * { animation: po-in var(--dur-3) var(--ease-out) both; }
@keyframes po-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.po-time.list-panel { margin: 0 0 var(--space-5); text-align: start; }
.po-done { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--moon-wash); color: var(--moon); }
.mz-plus .mz-ben + .po-fine { margin-top: var(--space-2); }
.mz-plus .po-renew + .mz-legal { margin-top: var(--space-3); }
.po-plans .pp-plan-name { flex-wrap: wrap; row-gap: 2px; }
.po-plans .pp-badge { color: var(--moon); background: var(--moon-wash); }
.po-pay .ps-value { margin-bottom: var(--space-4); }
.po-pay .po-plans.list-panel { margin: 0 0 var(--space-4); }
.po-pay .po-renew { margin-top: var(--space-2); }
.po-free { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--space-4); font: var(--t-label); color: var(--text-2); }
.po-free .ic { color: var(--moon); flex: none; }
.po-pay .mz-legal { margin: var(--space-3) 0 0; }
.po-pay .btn-ghost { margin-top: var(--space-2); }
.pp-wait { height: 200px; border-radius: var(--r-panel); }

/* ===== Plus: لوح بطول الشاشة (رأس ثابت، جسم يتمرر، أسفل ثابت بزر «اشترك») */
.sheet-panel:has(.mz-plus) { padding: 0; overflow: hidden; }
.sheet-panel:has(.mz-plus) .sheet-grabber { position: absolute; top: 10px; left: 50%; margin: 0 0 0 -18px; z-index: 4; }
.sheet-panel:has(.mz-plus) .sheet-body { height: 100%; }
@media (max-width: 1023px) {
  .sheet-panel:has(.mz-plus) { height: calc(100dvh - 54px); max-height: none; }
  .mz-plus { display: flex; flex-direction: column; height: 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) { .sheet-panel:has(.mz-plus) { height: min(790px, calc(100dvh - 64px)); } }
.mz-plus .mz-plclose { position: absolute; top: 14px; left: 14px; width: 36px; height: 36px; padding: 0; border: 0; background: var(--surface-2); color: var(--text-2); z-index: 5; cursor: pointer; }
.mz-plus-head { position: relative; flex: none; height: 56px; background: var(--surface-sheet); z-index: 3; }
.mz-plus-head::after { content: ''; position: absolute; inset: 0; box-shadow: var(--pl-head-line); opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out); }
.mz-plus-head > b { position: absolute; top: 20px; inset-inline: 60px; text-align: center; font: 700 1.0625rem/1.5rem var(--font); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.mz-plus.scrolled .mz-plus-head::after { opacity: 1; }
.mz-plus.scrolled .mz-plus-head > b { opacity: 1; }
.mz-plus-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 0 16px 24px; }
.mz-plus-body::-webkit-scrollbar { display: none; }
.mz-plus-body .mz-pl-lock { height: 48px; }
.mz-pl-lock { display: flex; align-items: center; justify-content: center; gap: 12px; height: 40px; }
.mz-pl-lock .wordmark { display: block; }
.mz-pl-hair { display: block; width: 1px; height: 24px; background: var(--line); }
.mz-pl-word { font: 500 1.5rem/1 var(--font); direction: ltr; }
.mz-pl-h { font: var(--t-head); text-align: center; margin: 10px 0 16px; }
.mz-prev { position: relative; height: 150px; border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--rim); padding: 14px 16px 0; overflow: hidden; }
.mz-prev-h { display: flex; align-items: center; gap: 8px; font: var(--t-caption); color: var(--text-2); margin-bottom: 4px; }
.mz-prev-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-prev-h .meteor { flex: none; }
.mz-prev p { max-height: 84px; overflow: hidden; margin: 0; font: 400 1rem/1.75rem var(--font); -webkit-mask-image: var(--pl-fade); mask-image: var(--pl-fade); }
.mz-prev-more { position: absolute; bottom: 10px; inset-inline: 0; margin: 0 auto; width: max-content; padding: 0 8px; border: 0; background: none; text-align: center; font: 500 0.9375rem/1.25rem var(--font); color: var(--rose); cursor: pointer; }
.mz-sec0 { margin-top: 16px; }
.mz-ben.list-panel, .mz-plans.list-panel { margin-bottom: 0; }
.mz-ben .list-row { min-height: 60px; padding-block: 8px; }
.mz-plus .mz-ben .rt small { white-space: normal; display: block; }
.mz-plus .mz-plsech { margin-top: 28px; }
.mz-plans .list-row { --row-lead: 0px; min-height: 64px; cursor: pointer; }
.mz-plans .pp-plan.is-selected { background: var(--surface-2); }
.mz-plans .pp-plan.is-selected::after, .mz-plans .pp-plan:has(+ .is-selected)::after { display: none; }
.mz-plans .pp-plan.is-selected .rt b { font-weight: 700; }
.pp-plan-name { display: flex !important; align-items: center; gap: 8px; }
.pp-plan .mz-tag { font-weight: 500; }
.mz-price { font: 700 1.0625rem/1.5rem var(--font); white-space: nowrap; }
.mz-price small { font: var(--t-caption); color: var(--text-2); }
.pp-plan.is-selected .mz-radio { border-color: var(--text); }
.pp-plan.is-selected .mz-radio::after { content: ''; width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--text); }
.pp-plan:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
.mz-meter { margin: 18px 4px 0; }
.mz-meter span { display: block; font: var(--t-caption); color: var(--text-2); margin-bottom: 8px; }
.mz-meter b { color: var(--text); font-weight: 700; }
.mz-legal button { padding: 0; border: 0; background: none; font: inherit; color: var(--text-2); cursor: pointer; }
.mz-plus-foot { position: relative; flex: none; padding: 8px 16px max(44px, calc(var(--space-4) + env(safe-area-inset-bottom))); background: var(--surface-sheet); text-align: center; }
.mz-plus-foot::before { content: ''; position: absolute; bottom: 100%; inset-inline: 0; height: 24px; background: linear-gradient(180deg, transparent, var(--surface-sheet)); pointer-events: none; }
.mz-plus-foot p, .mz-plw-foot > p { font: var(--t-caption); color: var(--text-2); margin: 8px 0 0; }
.mz-plsub { margin-top: 24px; text-align: center; }
.mz-plsub b { display: block; font: var(--t-head); }
.mz-plsub p { font: var(--t-label); color: var(--text-2); margin: 4px 0 0; }
.mz-plsub .btn { margin-top: 16px; }

/* العريض: نافذة 880 وسط الشاشة، عمودان (المزايا والمعاينة) وثلاث خانات للباقات */
@media (min-width: 1024px) {
  .sheet-overlay:has(.mz-plw) { padding: 0; }
  .sheet-panel:has(.mz-plw) { width: 880px; max-width: 880px; max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid var(--line); box-shadow: var(--rim), var(--shadow-float); padding: 28px 32px 20px; }
}
.mz-plw { position: relative; }
.mz-plus.mz-plw .mz-plclose { top: -10px; left: -14px; }
.mz-plw .mz-pl-lock { height: 40px; }
.mz-plw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.mz-plw .mz-prev { height: auto; min-height: 220px; padding-bottom: 44px; }
.mz-plw .mz-prev p { max-height: 252px; -webkit-mask-image: var(--pl-fade-w); mask-image: var(--pl-fade-w); }
.mz-plw .mz-plcells { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; overflow: hidden; }
.mz-plc { display: grid; justify-items: start; align-content: start; gap: 4px; padding: 16px 18px; cursor: pointer; }
.mz-plc + .mz-plc { border-right: 1px solid var(--line); }
.mz-plc.is-selected { background: var(--surface-2); }
.mz-plc > b { font: 700 1rem/1.5rem var(--font); }
.mz-plc > small { font: var(--t-caption); color: var(--text-2); }
.mz-plc .mz-radio { margin-bottom: 6px; }
.mz-plw-foot { display: grid; justify-items: center; margin-top: 16px; }
.mz-plw-foot .mz-meter { width: 360px; text-align: center; margin: 0; }
.mz-plw-foot .btn { width: 360px; margin-top: 16px; }
.mz-plw-foot .mz-legal { margin: 10px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .pm-line, .pp-line { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pm-ring-fg { transition: none !important; }
  .ps-overlay, .ps-sheet, .mz-plus-head::after, .mz-plus-head > b { transition: none; }
  .po-swap > * { animation: none; }
  .ps-overlay.is-open .ps-sheet, .ps-overlay.is-closing .ps-sheet { transform: none; opacity: 1; }
}
/* css/admin.css */
/* منظّمي — لوحة المالك (#/admin). ألوان من المتغيرات فقط (فاتح وداكن)، والرسوم SVG بلون العلامة. */

.adm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.adm-banner {
  padding: 10px 14px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--semantic-warning);
  border-radius: var(--radius-sm);
  color: var(--semantic-warning);
  font-size: 0.875rem;
  font-weight: 600;
}
.adm-h { margin: var(--space-6) 0 var(--space-3); }

/* بطاقات الأرقام */
.adm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.adm-tile {
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface-1);
  animation: adm-in 360ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.adm-tile:nth-child(2) { animation-delay: 40ms; }
.adm-tile:nth-child(3) { animation-delay: 80ms; }
.adm-tile:nth-child(4) { animation-delay: 120ms; }
.adm-tile:nth-child(5) { animation-delay: 160ms; }
.adm-tile:nth-child(6) { animation-delay: 200ms; }
.adm-tile-label { color: var(--text-secondary); font-size: 0.8125rem; }
.adm-tile-value { color: var(--text-primary); font-size: 1.5rem; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.adm-tile-sub { color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }
.adm-tile.is-warning { border-color: var(--semantic-warning); }
.adm-tile.is-warning .adm-tile-sub { color: var(--semantic-warning); }

@keyframes adm-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* الرسوم */
.adm-chart {
  margin: 0 0 var(--space-6);
  padding: 14px 16px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface-1);
}
.adm-chart figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.adm-chart-title { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); }
.adm-chart-meta { font-size: 0.75rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.adm-chart svg { display: block; width: 100%; height: 130px; }
.adm-chart .adm-bar path { fill: var(--accent-primary); transition: opacity 150ms; }
@media (hover: hover) { .adm-chart svg:hover .adm-bar path { opacity: 0.55; } }
@media (hover: hover) { .adm-chart svg .adm-bar:hover path { opacity: 1; } }
.adm-chart .adm-grid { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.adm-chart .adm-axis { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.adm-xlabels { display: flex; justify-content: space-between; margin-top: 4px; color: var(--text-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.adm-table-toggle { margin-top: 6px; font-size: 0.8125rem; color: var(--text-secondary); }
.adm-table-toggle summary { cursor: pointer; padding: 4px 0; }
.adm-table-toggle .list-panel { margin-top: 8px; max-height: 260px; overflow-y: auto; }

.adm-row .adm-cell, .list-row .adm-cell { color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 72px; text-align: end; }
.adm .list-head span:not(:first-child) { min-width: 72px; text-align: end; }
.adm .list-head span:first-child { flex: 1; }

/* مقياس الميزانية */
.adm-meter { margin-bottom: var(--space-6); }
.adm-meter-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: 0.875rem;
  margin-bottom: 6px;
  color: var(--text-secondary);
}
.adm-meter-head span:first-child { color: var(--text-primary); font-weight: 600; }
.adm-meter-track { height: 8px; border-radius: var(--radius-pill); background-color: var(--bg-surface-2); overflow: hidden; }
.adm-meter-fill {
  height: 100%;
  background-color: var(--accent-primary);
  transform-origin: right center;
  animation: adm-grow 700ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
[dir="ltr"] .adm-meter-fill { transform-origin: left center; }
.adm-meter.is-warning .adm-meter-fill { background-color: var(--semantic-warning); }
.adm-meter.is-danger .adm-meter-fill { background-color: var(--semantic-danger); }
@keyframes adm-grow { from { transform: scaleX(0); } }

/* النماذج */
.adm-form { display: grid; gap: var(--space-3); }
.adm-inline { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.adm-inline .form-control { flex: 1; min-width: 160px; }
.adm-grid-form { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 200px); gap: var(--space-2) var(--space-3); align-items: center; }
.adm-danger { color: var(--semantic-danger); border-color: var(--semantic-danger); }
.adm-kill { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 480px) {
  .adm-grid-form { grid-template-columns: 1fr; }
  .adm-tile-value { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .adm-tile, .adm-meter-fill { animation: none; }
  .adm-chart .adm-bar path { transition: none; }
}

.fb-filters { margin: var(--space-4) 0 var(--space-3); overflow-x: auto; }
.fb-text { margin: var(--space-1) 0 0; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-line; }
.fb-row.is-new .task-title::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-inline-end: var(--space-2); border-radius: var(--radius-pill); background: var(--accent-primary); }
.fb-image { max-width: 100%; border-radius: var(--radius-md); }
/* css/ui.css */
/* منظّمي — المكوّنات المشتركة بروح iOS (خطة الواجهة، المرحلة 1): ما أُضيف فوق base.css وcomponents.css.
   حبة التبويب المنزلقة، النافذة لوحاً سفلياً صلباً على الجوال بمقبض 36×4 بلون --line. قيم نظام التصميم فقط. */

/* ── التبويبات: حبة منزلقة تحت التبويب النشط (js/ui-kit.js يضعها ويحرّكها) ── */
.tab-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--r-pill);
  background-color: var(--surface);
  box-shadow: var(--rim);
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease-spring);
}
.tab-pill.out { opacity: 0; transition: transform var(--dur-2) var(--ease-spring), opacity var(--dur-1) var(--ease-out); }
/* الحبة تحل محل خلفية التبويب النشط؛ دونها (قبل تشغيل السكربت) تبقى الخلفية الثابتة */
.tab-bar.has-pill .tab-btn.active { background-color: transparent; box-shadow: none; }

/* لوحة المفاتيح مفتوحة (js/app.js): الشريط العائم يختفي بدل أن يطفو فوقها */
.kb-open .mobile-nav { display: none; }

/* ── النوافذ على الجوال: لوح سفلي بمقبض، يُسحب لأسفل للإغلاق (js/ui-kit.js) ── */
@media (max-width: 767px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-container {
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    border-bottom: none;
    box-shadow: var(--shadow-sheet);
    opacity: 1;
    transform: translateY(100%);
    transition: transform var(--dur-3) var(--ease-sheet);
  }
  .modal-overlay.open .modal-container { transform: none; }
  /* لوحة المفاتيح مفتوحة في نافذة (uiModals.fit): النافذة فوقها بارتفاع الجزء المرئي، وكوكب «مادة جديدة» أصغر */
  .mv-kb .modal-overlay.open { top: var(--mv-top); bottom: auto; height: var(--mv-h); }
  .mv-kb .modal-overlay.open .modal-container { max-height: 100%; }
  .mv-kb .ac-prev { height: 84px; }
  /* تطبيق الآيفون (native/ios.js kb-over): اللوحة فوق اللوح والصفحة ما تقصر، فاللوح ثابت مكانه (طوله مثبّت) وآخره يتمرر فوقها */
  .kb-over .sheet-overlay.is-open .sheet-panel { padding-bottom: calc(var(--space-6) + var(--kb-h, 0px)); }
  .kb-over .modal-overlay.open .modal-body { padding-bottom: var(--kb-h, 0px); }
  /* لوح قصير وخانته تحت اللوحة (المالك 6 نوفمبر: «كلماتي» وغيرها): يرتفع بقدر ما تبان الخانة، بنفس حركة اللوحة (native/ios.js --kb-lift) */
  .kb-over .sheet-overlay.is-open .sheet-panel, .kb-over .modal-overlay.open .modal-container { transform: translateY(calc(-1 * var(--kb-lift, 0px))); transition: transform var(--kb-d, var(--dur-3)) var(--ease-sheet); }
  .mv-kb .ac-prev .planet { --ps: 48px !important; --pf: 22px !important; }
  .modal-container::before {
    content: '';
    flex-shrink: 0;
    width: 36px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: var(--r-pill);
    background-color: var(--line);
  }
  .modal-container.is-dragging { transition: none; }
  .modal-header { touch-action: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tab-pill, .toast, .modal-container, .modal-overlay, .card, .tag-chip { transition: none; }
  .btn:active:not(:disabled), button.tag-chip:active, a.tag-chip:active { transform: none; }
  .backup-reminder { animation: msg-away 1ms 10s forwards; }
}
/* «ربع ساعة بعد المحاضرة» (js/after-lecture.js) */
.al-sheet { display: grid; gap: 10px; }
.al-lead { margin: 0; font: var(--t-body); color: var(--text); }
.al-hint { margin: 0 0 4px; font: var(--t-caption); color: var(--text-2); }
.al-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.al-off { color: var(--text-3); }
/* «مراجعة اليوم» (js/today-review.js) */
.tr-sheet { display: grid; gap: 10px; }
.tr-exam { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--moon) 14%, var(--surface-2)); color: var(--text); }
.tr-exam b, .tr-row b { display: block; font: var(--t-label); font-weight: 700; }
.tr-exam small, .tr-row small { font: var(--t-caption); color: var(--text-2); }
.tr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tr-stats span { display: grid; justify-items: center; gap: 4px; padding: 12px 0; border-radius: var(--r-field); background: var(--surface-2); }
.tr-stats b { font: var(--t-head); } .tr-stats small { font: var(--t-caption); color: var(--text-2); }
.tr-cap { margin: 6px 4px 0; font: var(--t-caption); color: var(--text-2); }
/* صفوف «مراجعة اليوم» أزرار: بلا شكل زر المتصفح وبعرض اللوح (LY-1) */
.tr-row { appearance: none; width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.tr-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sheet-title:focus { outline: none; }
.tr-row .rt { min-width: 0; } .tr-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-pg { flex: none; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-3); font: var(--t-caption); color: var(--text-2); }
.tr-hint, .tr-empty { margin: 0; text-align: center; font: var(--t-caption); color: var(--text-2); }
.tr-empty { padding: 20px 8px; font: var(--t-body); }
/* css/screens.css */
/* منظّمي — الشاشات الخمس من لوحة التصميم وشكل الجوال الموحّد (عنوان كبير، شريط سفلي عائم). */

/* ══ الهيكل على الجوال: iOS بلا ترويسة؛ البحث والإضافة والأقسام الأخرى في «المزيد» و«إضافة» ══ */
@media (max-width: 767px) {
  main {
    padding-inline: var(--space-4);
    /* النموذج .scr: 12 تحت شريط الحالة، و16 فوق الكبسولة (64 فوق 8 من الحافة الآمنة) */
    padding-top: calc(var(--main-top) + env(safe-area-inset-top));
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
  /* التبويب المقسّم لا يحتاج تلاشياً؛ ما يطول منه يتمرر والتبويب النشط يُظهَر تلقائياً (router.revealActiveTab) */
  .tab-bar { -webkit-mask-image: none; mask-image: none; padding-inline-end: 3px; }
}

/* ══ عنوان كل صفحة: سطر صغير فوقه وعنوان كبير (كل الصفحات تستخدم .type-h1 في h1) ══ */
.home-eyebrow { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); letter-spacing: 0.2px; }
@media (max-width: 767px) {
  :is(#app-root, .pg-ghost-page) h1.type-h1 { font-size: var(--fs-display); line-height: 1.15; }
}

/* ══ 1 · الرئيسية ══ */

a.file-row { text-decoration: none; }
/* صفوف iOS (المذاكرة، أنا): مربع أيقونة ملوّن، قيمة، شارة، ومفتاح تشغيل */
/* الأيقونات زينة لا معنى: ألوانها من عائلة هادئة واحدة بدل ألوان الحالة الصارخة */
.row-icon { --semantic-success: var(--deco-sage); --semantic-warning: var(--deco-gold); --semantic-danger: var(--accent-primary); width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background-color: color-mix(in srgb, var(--row-color, var(--accent-primary)) 14%, transparent); color: var(--row-color, var(--accent-primary)); }
.ios-group { margin-bottom: var(--space-6); }
.ios-group .sheet-row { min-height: 50px; }
.sheet-row-label .file-row-meta { display: block; }
.row-value { font-size: var(--fs-callout); color: var(--text-muted); }
.row-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background-color: var(--accent-primary); color: var(--on-accent); font-size: var(--fs-caption); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ios-switch { width: 48px; height: 28px; flex-shrink: 0; position: relative; border-radius: var(--radius-pill); background-color: var(--border-strong); }
.ios-switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: var(--radius-pill); background-color: var(--on-color); box-shadow: var(--shadow-soft); transition: transform var(--dur-1) var(--ease-out); }
.ios-switch.is-on { background-color: var(--moon); } /* القمر لا الحبر: الدائرة البيضاء تختفي على الأبيض */
.ios-switch.is-on::after { transform: translateX(-20px); }
.sheet-tile:active, .sheet-primary:active, .sheet-cancel:active { transform: scale(0.95); }


/* قائمة واحدة بإطار واحد (القاعدة 5) */
.sheet-group {
  background-color: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* خانات خطة المراجعة بنفس الشكل */
.task-check { width: 24px; height: 24px; border-radius: var(--radius-check); transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease; }


.section-caption { margin: 0 4px 10px; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
.file-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-1) ease;
}
.file-row + .file-row { border-top: 1px solid var(--border-subtle); }
.uni-days { min-width: 52px; text-align: center; font-weight: 700; font-size: var(--fs-title); line-height: 1.1; }
.uni-days small { display: block; font-size: var(--fs-caption); font-weight: 400; color: var(--text-muted); }
.att-ask { display: flex; gap: var(--space-2); }
.uni-check { color: var(--accent-primary); display: inline-flex; }
.sheet-row[aria-checked="false"] .uni-check { visibility: hidden; }
.sheet-row[hidden] { display: none; }
.file-row:active, .sheet-row:active { background-color: var(--bg-surface-2); }
.file-row .file-icon, .sheet-file-head .file-icon { width: 44px; height: 44px; border-radius: var(--radius-md); }
.file-row .file-icon svg { width: 22px; height: 22px; }
.file-icon.is-image { background-color: var(--success-bg); color: var(--success-fg); }
.file-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.file-row-name { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.file-row-meta { font-size: var(--fs-caption); color: var(--text-muted); }
.row-chevron { display: inline-flex; color: var(--border-strong); flex-shrink: 0; }

/* ══ 3 · لوح إجراءات الملف (واللوح العام كله) ══ */
.sheet-panel { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; padding: 10px var(--space-4) calc(34px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .sheet-panel { border-radius: var(--radius-2xl); padding-bottom: var(--space-6); } }
.sheet-body { display: flex; flex-direction: column; gap: 14px; }
.sheet-file-head { display: flex; align-items: center; gap: var(--space-3); padding: 4px 4px 0; }
.sheet-file-head .file-icon { width: 52px; height: 52px; border-radius: var(--radius-md); }
.sheet-file-head .file-icon svg { width: 26px; height: 26px; }
.sheet-file-text { flex: 1; min-width: 0; }
.sheet-file-name { font-size: var(--fs-sheet-title); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.sheet-file-meta { font-size: var(--fs-small); color: var(--text-muted); }
.sheet-primary {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--r-pill);
  background-color: var(--ink);
  color: var(--on-ink);
  font: var(--t-button);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out);
}
.sheet-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.sheet-tile {
  height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-tile);
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out);
}
.sheet-tile svg { color: var(--accent-primary); }
.sheet-group { border-radius: var(--radius-tile); }
.sheet-row {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-body);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.sheet-row + .sheet-row { border-top: 1px solid var(--border-subtle); }
.sheet-row-icon { display: inline-flex; color: var(--text-secondary); }
.sheet-row-label { flex: 1; }
.sheet-row-chevron { display: inline-flex; color: var(--border-strong); }
.sheet-row.is-danger { color: var(--semantic-danger); font-weight: 600; }
.sheet-row.is-danger .sheet-row-icon { color: currentColor; }
.sheet-cancel {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: var(--r-pill);
  background-color: var(--surface-2);
  color: var(--text);
  font: var(--t-button);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out);
}

/* ══ الموقع كله: رأس الصفحة الموحّد، المواد صفوفاً، شارات الحالة، صفوف المواعيد ══ */
.page-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-top-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-top-title { margin: 0; }
.page-top-sub { font-size: var(--fs-body); color: var(--text-muted); margin: 2px 0 0; }
.page-top-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.page-top-actions .form-control { width: auto; max-width: 180px; }
@media (max-width: 767px) {
  .page-top-sub { font-size: var(--fs-callout); }
}
.task-row { padding-inline-start: 6px; gap: var(--space-2); }
.task-row.is-done .task-title { text-decoration: line-through; opacity: 0.5; }
.row-edit {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.row-edit:active { background-color: var(--bg-surface-2); }
a.row-edit { text-decoration: none; }
.back-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-bottom: var(--space-1); color: var(--accent-primary); font-size: var(--fs-button); font-weight: 500; text-decoration: none; }
.reminder-chip { border-color: transparent; border-radius: var(--radius-md); background-color: var(--muted-bg); color: var(--text-secondary); font-weight: 700; }
.reminder-chip.warning { background-color: var(--warn-bg); color: var(--warn-fg); border-color: transparent; }
.reminder-chip.success { background-color: var(--success-bg); color: var(--success-fg); border-color: transparent; }
.reminder-chip.danger { background-color: color-mix(in srgb, var(--semantic-danger) 12%, transparent); color: var(--semantic-danger); border-color: transparent; }

/* تركيز لوحة المفاتيح بلون التطبيق على كل عناصر الشاشات */
.file-row:focus-visible, .sheet-primary:focus-visible, .sheet-tile:focus-visible, .sheet-row:focus-visible,
.sheet-cancel:focus-visible, .mobile-nav-item:focus-visible, .row-edit:focus-visible, .back-link:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.sheet-primary:focus-visible { outline-color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  .ios-switch::after, .sheet-tile, .sheet-primary, .sheet-cancel { transition: none; }
  .sheet-tile:active, .sheet-primary:active,
  .sheet-cancel:active { transform: none; }
}

.install-icon { flex-shrink: 0; border-radius: var(--radius-tile); }
a.sheet-primary { text-decoration: none; } /* رابط المتجر بشكل الزر الأساسي (js/install.js) */
.sheet-note { margin: 0; padding-inline: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); text-align: center; line-height: 1.6; }

/* بطاقة تفعيل التذكيرات والتطبيق مقفل (design-reference/push-prompt) */
.pp { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-6); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--accent-subtle-bg); }
.pp-ic { flex: none; display: grid; place-items: center; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-pill); background: var(--bg-surface-1); color: var(--accent-primary); }
.pp-main { flex: 1; min-width: 0; }
.pp-title { font-weight: 700; margin-bottom: var(--space-1); }
.pp-text { color: var(--text-secondary); font-size: var(--fs-callout); line-height: 1.6; margin-bottom: var(--space-3); }
.pp-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pp-actions .btn { min-height: var(--space-10); }
.pp-later { background: none; border: 0; color: var(--text-secondary); font: inherit; padding: 0 var(--space-3); cursor: pointer; }
.tab-bar.seg-full { width: 100%; margin-bottom: var(--space-4); }
.seg-full .tab-btn { flex: 1; justify-content: center; gap: 6px; text-decoration: none; }

/* «سماء واحدة»: الزر الرئيسي حبر مسطّح (كان وردي قبل 6 نوفمبر) بلا تدرّج ولا حلقة ولا ظل (base.css .btn-primary) */
/* الإعدادات (design-reference/settings-v2): ملاحظة تحت المجموعة وحالة الإشعارات */
.ios-group + .group-note { margin: calc(var(--space-6) * -1 + var(--space-2)) 4px var(--space-6); font-size: var(--fs-small); color: var(--text-muted); line-height: 1.6; }
.row-value .is-ok { color: var(--semantic-success); }
.row-value .is-bad { color: var(--semantic-danger); }
.sp-form, .sp-field { display: grid; gap: var(--space-4); }
.sp-field { gap: var(--space-2); }
.sp-label { font-size: var(--fs-small); font-weight: 600; color: var(--text-secondary); }
.sp-form textarea.form-control { min-height: 132px; line-height: 1.7; }
.sp-count, .sp-note { justify-self: end; margin: 0; font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.6; }
.sp-note { justify-self: stretch; }
.sp-attach:not([hidden]), .sp-attach .af-chip { display: flex; align-items: center; gap: var(--space-3); }
.sp-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); }
.sp-form .sheet-group { margin: 0; }
.sp-done { display: grid; justify-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4) 0; }
.sp-done-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--accent-subtle-bg); color: var(--accent-primary); }
.sp-done h3 { margin: 0; font-size: var(--fs-title); }
.sp-done p { margin: 0; color: var(--text-secondary); line-height: 1.7; }
/* الملخص الكامل للملف الطويل (design-reference/long-summary): عدد الطلبات على «لخّص»، وأشرطة الأجزاء، وشارات النتيجة */
.ls-parts { display: flex; gap: 4px; margin-top: 6px; }
.ls-parts span { flex: 1; height: 4px; border-radius: var(--radius-pill); background-color: var(--border-subtle); }
.ls-parts span.on { background-color: var(--moon); }
.ls-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.ls-badge { padding: 2px var(--space-2); border-radius: var(--radius-pill); background-color: var(--accent-subtle-bg); color: var(--accent-primary); font-size: var(--fs-caption); font-weight: 600; }
/* الملخص فصلاً فصلاً برقم الصفحة (design-reference/chapter-summary) */
.cs-cover { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; color: var(--text-secondary); font-size: var(--fs-caption); }
.cs-cover svg { color: var(--accent-primary); flex: none; }
.cs-toc { display: flex; gap: var(--space-2); margin: var(--space-4) calc(var(--space-4) * -1) var(--space-2); padding: var(--space-2) var(--space-4); overflow-x: auto; scrollbar-width: none; }
.cs-toc button { flex: none; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--bg-surface-1);
  color: var(--text-secondary); font: inherit; font-size: var(--fs-small); font-weight: 700; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.cs-toc button:active { transform: scale(0.95); }
.cs-toc button.on { border-color: transparent; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-soft); }
.cs-chs { display: grid; gap: var(--space-4); }
.cs-ch { padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--bg-surface-1); box-shadow: var(--shadow-soft); }
.cs-ch-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.cs-num { flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill); display: grid; place-items: center; background-color: var(--surface-3); color: var(--text); font-weight: 800; }
.cs-ch-head h2 { flex: 1; min-width: 0; margin: 0; font-weight: 800; font-size: var(--fs-title); }
.cs-range { flex: none; color: var(--text-muted); font-size: var(--fs-caption); }
.cs-ch .sm-sec { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.pg { margin-inline-start: var(--space-1); padding: 1px var(--space-2); border: 0; border-radius: var(--radius-pill); background-color: var(--accent-subtle-bg);
  color: var(--accent-primary); font: inherit; font-size: var(--fs-caption); font-weight: 700; white-space: nowrap; cursor: pointer; }
.cs-src { margin: 0 0 var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background-color: var(--bg-surface-2); color: var(--text-secondary); line-height: 1.9; }
.cs-src mark { background-color: var(--accent-subtle-bg); color: var(--text-primary); border-radius: var(--radius-xs); }
.cs-src-meta { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-caption); }

/* «اشرح لي» داخل الملخص (js/explain-item.js، الشكل المعتمد design-reference/explain-item) */
.xi-btn { flex: none; align-self: center; display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background-color: var(--accent-subtle-bg); color: var(--accent-primary); font: inherit; font-size: var(--fs-caption); font-weight: 600; border: 0; cursor: pointer; }
.xi-btn.is-done { background-color: var(--success-bg); color: var(--semantic-success); }
.sm-row.is-tap { cursor: pointer; }
.sm-row.is-picked { background-color: var(--accent-subtle-bg); }
.xi-hint { font-size: var(--fs-small); color: var(--text-muted); text-align: center; margin-top: var(--space-2); }
.xi-scroll { max-height: 62vh; overflow-y: auto; padding: 0 var(--space-1); }
.xi-quote { direction: ltr; unicode-bidi: plaintext; text-align: center; font-weight: 700; font-size: var(--fs-title); padding: var(--space-3); border-radius: var(--radius-md); background-color: var(--bg-surface-2); color: var(--text-primary); }
.xi-quote.is-text { direction: rtl; font-size: var(--fs-body); }
.xi-sec { margin-top: var(--space-4); }
.xi-sec h3 { font-size: var(--fs-body); font-weight: 700; color: var(--accent-primary); margin-bottom: var(--space-2); }
.xi-steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.xi-steps li { counter-increment: s; display: flex; gap: var(--space-3); padding: var(--space-2) 0; }
.xi-steps li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: var(--radius-pill); background-color: var(--surface-3); color: var(--text); font-size: var(--fs-caption); font-weight: 700; display: grid; place-items: center; }
.xi-sym { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); }
.xi-sym b { direction: ltr; font-weight: 700; color: var(--accent-primary); }
.xi-ex { background-color: var(--bg-surface-2); border-radius: var(--radius-md); padding: var(--space-3); }
.xi-ex .ltr { direction: ltr; unicode-bidi: plaintext; font-weight: 600; }
.xi-warn { display: flex; gap: var(--space-2); color: var(--semantic-warning); }
.xi-ans { margin-top: var(--space-4); }
.xi-ans > summary { list-style: none; display: flex; justify-content: center; }
.xi-ans > summary::-webkit-details-marker { display: none; }
.xi-ans[open] > summary { display: none; }
.xi-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.xi-actions .btn { flex: 1; }
/* css/pdf-tools.css */
/* منظّمي — لوح المساعد المبسّط واختيار الصفحات (js/assistant-sheet.js)، و«الصفحات» في العارض (js/pdf-pages.js).
   الشكل المعتمد: design-reference/assistant-sheet وdesign-reference/page-picker. */
.as-sheet { display: flex; flex-direction: column; gap: var(--space-5); }
.as-sheet .pdf-note { margin: 0; }
.as-sheet .pdf-note[hidden] { display: none; }
.as-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
/* بعد شيل «أسئلة مراجعة» (20 أكتوبر): المهمة الأخيرة لوحدها تأخذ الصف كاملاً بدل خانة فاضية جنبها */
.as-tasks > .as-task:not(.is-main):last-child:nth-child(even) { grid-column: 1 / -1; }
.as-task { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-tile);
  background-color: var(--bg-surface-1); color: var(--text-primary); font: inherit; font-size: var(--fs-body); font-weight: 600; text-align: start; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.as-task:active { transform: scale(0.97); }
.as-task:focus-visible, .as-set .list-row:focus-visible, .pp-thumb:focus-visible, .pp-chip:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.as-task svg { flex: none; color: var(--accent-primary); }
.as-task.is-main { grid-column: 1 / -1; min-height: 72px; border-color: transparent; background-color: var(--ink); color: var(--on-ink); font-size: var(--fs-callout); }
.as-task.is-main svg { color: currentColor; }
.as-task small { display: block; margin-top: var(--space-1); font-size: var(--fs-caption); font-weight: 400; opacity: 0.85; }
.as-task .ls-count { position: absolute; top: var(--space-2); inset-inline-end: var(--space-2); min-width: 22px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background-color: var(--on-accent); color: var(--accent-primary); font-size: var(--fs-caption); font-weight: 700; display: grid; place-items: center; }
.as-row + .as-row { border-top: 1px solid var(--border-subtle); }
.as-set .list-row, .as-tools .list-row { width: 100%; border: 0; background: none; color: var(--text-primary); font: inherit; text-align: start; cursor: pointer; }
.as-set .as-k, .as-tools .as-k { flex: none; font-weight: 600; }
.as-set .as-v, .as-tools .as-v { flex: 1; min-width: 0; overflow: hidden; color: var(--text-muted); font-size: var(--fs-small); text-overflow: ellipsis; white-space: nowrap; text-align: end; }
.as-set .as-chev { flex: none; display: inline-flex; color: var(--text-muted); transition: transform var(--dur-1) var(--ease-out); }
.as-row.is-open .as-chev { transform: rotate(-90deg); }
.as-open { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.as-open[hidden] { display: none; }
.as-open .tab-bar { width: 100%; margin-bottom: 0; }
.as-open .tab-btn { flex: 1; }
.as-open .af, .as-open .ao-opts, .as-open .ao-tpl { margin-bottom: 0; }
.as-open .af-label, .as-open .af-hint { display: none; }
.as-open .ao-opts { grid-template-columns: 1fr; }
.as-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--text-muted); font-size: var(--fs-caption); }
.as-foot button { margin-inline-start: auto; border: 0; background: none; color: var(--accent-primary); font: inherit; font-size: var(--fs-caption); font-weight: 600; cursor: pointer; }

/* اختيار الصفحات: من–إلى وفصول الفهرس */
.pp-range { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-tile); background-color: var(--bg-surface-2); color: var(--text-secondary); font-size: var(--fs-small); }
.pp-range[hidden], .pp-chips[hidden] { display: none; }
.pp-range input { width: 64px; height: 40px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background-color: var(--bg-surface-1); color: var(--text-primary);
  font: inherit; font-size: var(--fs-body); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.pp-range-sum { margin-inline-start: auto; color: var(--text-muted); font-size: var(--fs-caption); }
.pp-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.pp-chip { flex: none; height: 32px; padding-inline: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background-color: var(--bg-surface-1); color: var(--text-secondary); font: inherit; font-size: var(--fs-caption); cursor: pointer; }
.pp-chip.is-on { border-color: var(--accent-primary); background-color: var(--accent-subtle-bg); color: var(--accent-primary); font-weight: 600; }

.pp-toc .list-row { width: 100%; border-inline: 0; border-top: 0; background: none; color: var(--text-primary); font: inherit; text-align: start; cursor: pointer; }
.pp-toc .pp-toc-pg { margin-inline-start: auto; white-space: nowrap; color: var(--text-muted); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.pp-toc .list-row.is-current { color: var(--accent-primary); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .as-task, .as-set .as-chev { transition: none; } .as-task:active { transform: none; } }
/* «كلمات الملف» (js/vocab.js، لقطة ze-tr-words) */
.vc { display: grid; gap: var(--space-3); }
.vc-tabs { width: 100%; margin: 0; }
.vc-tabs .tab-btn { flex: 1; justify-content: center; }
.vc-tabs b { font-variant-numeric: tabular-nums; opacity: 0.8; }
.vc-ask { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--bg-surface-2); color: var(--text-muted); }
.vc-ask input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; color: var(--text-primary); font: inherit; outline: none; }
.vc-list { max-height: 46vh; overflow-y: auto; }
.vc-row { align-items: center; gap: var(--space-3); }
.vc-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vc-t b { font-weight: 800; text-align: start; overflow-wrap: anywhere; }
.vc-t small { color: var(--text-secondary); font-size: var(--fs-small); }
.vc-n { flex: none; color: var(--text-muted); font-size: var(--fs-caption); font-weight: 700; font-variant-numeric: tabular-nums; }
.vc-save { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-muted); cursor: pointer; }
.vc-save.on { color: var(--accent-primary); }
.vc-save.on path { fill: currentColor; }
.vc-empty { margin: 0; padding: var(--space-5) var(--space-4); color: var(--text-muted); font-size: var(--fs-small); text-align: center; }
.vc-cards { width: 100%; min-height: 52px; border-radius: var(--radius-pill); }
/* «كلماتي» بجملتها ونطقها (js/vocab.js) */
.vc-say, .wbub .wb-say { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text); cursor: pointer; }
.vc-say:active, .wbub .wb-say:active { transform: scale(0.94); }
.vc-t .vc-s { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; color: var(--text-muted); }
.vc-s u { text-decoration: underline 2px var(--moon); text-underline-offset: 3px; color: var(--text-secondary); }
.vc-pg { flex: none; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-3); font-size: var(--fs-small); color: var(--text-secondary); }
.wbub .wb-say { width: 34px; height: 34px; margin-inline-start: -8px; padding: 0; }
/* css/ask.css */
/* «اكتب أي شي» (js/cmd-sheet.js) — النموذج المعتمد design-reference/identity screens-me.css (.mz-cmd، .mz-pal، .mz-side، .mz-th):
   الجوال لوح زجاجي من تحت (أعلاه 80) والخانة أسفله فوق لوحة المفاتيح؛ ≥1024 لوحة ⌘K في الوسط، والمحادثة لوح جانبي جنب الشريط.
   الحركة transform/opacity فقط بمدد --dur-*. نتائج البحث ولوحة ⌘K في css/search.css. */
:root {
  --t-cmd-h: 700 16px/22px var(--font); --t-live: 700 17px/24px var(--font); --t-pal: 400 18px/26px var(--font); --t-wkp: 700 15px/20px var(--font);
  --t-pv: 500 15px/22px var(--font); --t-kbd: 500 11px/1 var(--font);
  --mz-hit: color-mix(in srgb, var(--moon) 18%, transparent); --paper: var(--paper-bg); --paper-line: var(--paper-ln);
}

.cmd { position: fixed; inset: 0; z-index: 200; }
.cmd[hidden] { display: none; }
.cmd-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.cmd.is-open .cmd-scrim { opacity: 1; }
.cmd-panel.glass { position: absolute; inset-inline: 0; bottom: var(--cmd-kb, 0px); top: max(80px, calc(env(safe-area-inset-top) + 33px)); display: flex; flex-direction: column;
  padding-top: 10px; border-bottom: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--glass-solid); color: var(--text);
  transform: translateY(100%); transition: transform var(--dur-3) var(--ease-sheet), opacity var(--dur-2) var(--ease-out); }
.cmd.is-open .cmd-panel { transform: none; }
.cmd-grab { position: relative; flex: none; width: 36px; height: 4px; margin: 0 auto 14px; border-radius: var(--r-pill); background: var(--line); touch-action: none; cursor: grab; }
.cmd-grab::before { content: ''; position: absolute; inset: -14px -48px; }
.cmd-th-h { position: relative; flex: none; display: none; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 6px; border-bottom: 1px solid var(--line); }
.cmd.is-th .cmd-th-h { display: flex; }
.cmd-th-h b { flex: 1; font: var(--t-cmd-h); }
.cmd-new { width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); cursor: pointer; }
.cmd-streak { position: absolute; bottom: 0; right: 30%; width: 40px; height: 2px; border-radius: var(--r-pill); background: linear-gradient(90deg, transparent, var(--text)); opacity: 0; }
.cmd.is-busy .cmd-streak { animation: cmd-streak var(--dur-4) var(--ease-io) both; }
@keyframes cmd-streak { from { opacity: 0; transform: translateX(80px); } 30% { opacity: .85; } to { opacity: 0; transform: translateX(-140px); } }
.cmd-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 12px; scrollbar-width: none; }
.cmd-body::-webkit-scrollbar { display: none; }
.cmd-body.swap { animation: cmd-swap var(--dur-2) var(--ease-out) both; }
@keyframes cmd-swap { from { opacity: 0; transform: translateY(6px); } }
.cmd.is-th .cmd-body { padding: 0; }
.kb-over .cmd:not(.is-wide) .cmd-body { padding-bottom: calc(12px + var(--kb-h, 0px) - env(safe-area-inset-bottom)); }

/* الخانة */
.cmd-in { flex: none; display: flex; align-items: center; gap: 10px; height: 52px; margin: 0 16px calc(8px + env(safe-area-inset-bottom)); padding: 0 16px 0 6px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font: var(--t-body); }
.cmd.kb .cmd-in { margin-bottom: 8px; }
/* تطبيق الآيفون (native/ios.js kb-over): اللوحة تطلع فوق اللوح والصفحة ما تقصر، فالخانة ترتفع معها بنفس مدتها
   (كان اللوح يقفز وبينه وبين اللوحة فراغ وشريط ✓ معلّق)، وآخر النتائج يتمرر فوقها */
.cmd-in { transition: translate var(--kb-d, var(--dur-3)) var(--ease-sheet); }
.kb-over .cmd:not(.is-wide) :is(.cmd-in, .cmd-snack) { translate: 0 calc(env(safe-area-inset-bottom) - var(--kb-h, 0px)); }
.cmd-in > .meteor { flex: none; }
.cmd.is-off .cmd-in > .meteor { opacity: .4; }
.cmd-in input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; outline: none; caret-color: var(--rose); }
.cmd-in input::placeholder { color: var(--text-3); }
.cmd-clr { width: 26px; height: 26px; display: none; place-items: center; flex: none; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); cursor: pointer; }
.cmd-in:has(input:not(:placeholder-shown)) .cmd-clr { display: grid; }
.cmd-clip { width: 44px; height: 44px; display: grid; place-items: center; flex: none; margin-inline-end: -10px; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); cursor: pointer; }
.cmd-esc, .cmd-foot { display: none; }
.cmd kbd { font: var(--t-kbd); border: 1px solid var(--line); border-radius: var(--r-kbd); padding: 4px 6px; color: var(--text-2); }

/* تنبيه «انضاف الموعد · تراجع» فوق الخانة */
.cmd-snack { position: absolute; inset-inline: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 20px;
  border-radius: var(--r-pill); background: var(--surface-2); box-shadow: var(--rim); font: var(--t-label); opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), translate var(--kb-d, var(--dur-3)) var(--ease-sheet); }
.cmd.kb .cmd-snack { bottom: 72px; }
.cmd-snack.on { opacity: 1; transform: none; pointer-events: auto; }
.cmd-snack span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-snack button, .cmd-undo { flex: none; padding: 0; border: 0; background: none; color: var(--rose); font: inherit; cursor: pointer; }
.cmd-undo { margin-inline-start: 8px; }

/* المحادثة (TH) */
.cmd-th { padding: 18px 16px 12px; }
.cmd .bub-me { width: fit-content; max-width: 80%; margin: 0 auto 18px 0; padding: 10px 14px; border-radius: var(--r-field); background: var(--surface-2); font: var(--t-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd-ai { margin-bottom: 22px; }
.cmd .ans { margin: 0; font: var(--t-read); overflow-wrap: anywhere; }
.cmd .ans b { font-weight: 700; }
.cmd .ans.dim, .cmd-when { color: var(--text-2); }
.cmd-when { font: var(--t-caption); margin-bottom: 6px; }
.cmd .ans + .ans, .cmd-mini + .ans, .cmd-wkp + .ans, .cmd-ai > .ans:not(:first-child) { margin-top: 12px; }
.cmd .typing { display: flex; align-items: center; gap: 8px; margin: 12px 0 18px; font: var(--t-caption); color: var(--text-2); }
.cmd-mini { margin: 12px 0 0; }
.cmd-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.cmd-row:disabled { cursor: default; }
.cmd-mini .list-row { min-height: 60px; padding: 8px 16px; }
.cmd .list-row { --row-lead: 52px; }
.cmd-lead { width: 40px; display: grid; place-items: center; flex: none; }
.cmd .list-row-main b { display: block; font: var(--t-row); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd .list-row-main small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: var(--t-caption); color: var(--text-2); white-space: nowrap; overflow: hidden; }
.cmd .list-row-main small.cmd-rem { color: var(--text-3); }
.cmd .tag { height: 22px; padding: 0 8px; margin-inline-start: 2px; border-radius: var(--r-chip); background: var(--surface-2); display: inline-flex; align-items: center; flex: none; font: var(--t-caption); color: var(--text); }
.cmd-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.cmd-hit { width: 44px; height: 44px; display: grid; place-items: center; flex: none; margin-inline-end: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
.cmd-row.is-ask .list-row-main small { color: var(--rose); }
.cmd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cmd-chips.is-follow .tag-chip { color: var(--text-2); }
.cmd-btns { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cmd-btns.is-col { flex-direction: column; align-items: stretch; }
.cmd-btns .btn-primary .ic { color: inherit; }
.cmd-hint { font: var(--t-caption); color: var(--text-3); }
.cmd-quote { margin-top: 10px; padding: 10px 14px; border-radius: var(--r-field); background: var(--surface-2); font: var(--t-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd-okline { display: flex; align-items: center; flex-wrap: wrap; margin: 14px 0 0; font: var(--t-label); color: var(--text-2); }
.cmd-wkp { margin: 14px 0 0; padding: 16px 14px 14px; }
.cmd-wkp .weekarcs { margin-bottom: 12px; }
.cmd-wkp-f { padding-top: 12px; border-top: 1px solid var(--line); }
.cmd-wkp-f b { display: block; font: var(--t-wkp); }
.cmd-wkp-f small { font: var(--t-caption); color: var(--text-2); }
.cmd-th-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cmd-th-btns .btn { height: 48px; }

/* الشاشة الواسعة: المحادثة لوح جانبي جنب الشريط (.mz-side) */
.cmd.is-wide.is-th .cmd-panel.glass { top: 16px; bottom: 16px; left: auto; right: calc(var(--side-w) + 2 * var(--side-gap)); width: 440px; padding-top: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--rim), var(--shadow-float); opacity: 0; transform: translateX(16px); }
.cmd.is-wide.is-th.is-open .cmd-panel { opacity: 1; transform: none; }
.cmd.is-wide .cmd-grab { display: none; }
.cmd.is-wide.is-th .cmd-in { margin: 0 16px 16px; }

/* شريط الرئيسية: زر يفتح اللوح (js/home-calm.js cmdbar) */
.cmdbar .cb-open { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--text-3); font: inherit; text-align: start; cursor: pointer; }
.cmdbar .cb-ph { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdbar.off .cb-ph { color: transparent; }
.cmdbar .cb-open:focus-visible { outline: none; }
.cmdbar:has(.cb-open:focus-visible) { box-shadow: var(--focus-ring); }

/* التركيز بالكيبورد يبان على الخانة (RS-6، «اعتمد» 8 نوفمبر) */
.cmd-in:has(input:focus-visible) { box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) { .cmd-panel, .cmd-panel.glass, .cmd-scrim, .cmd-snack { transition: none; } .cmd-body.swap, .cmd.is-busy .cmd-streak { animation: none; } }
/* css/search.css */
/* نتائج «اكتب أي شي» (js/search-screen.js) وحالات اللوح (js/cmd-sheet.js) — النموذج design-reference/identity screens-me.css:
   .mz-res (لوح واحد بأقسام وفواصل)، .mz-ask (اسأل المساعد)، .mz-live («أسجّله لك؟»)، .mz-empty، و.mz-pal (لوحة ⌘K بالمعاينة). */
.cmd-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0 0; font: var(--t-caption); color: var(--text-3); }
.cmd-sec.out { padding: 12px 4px 6px; }
.cmd-more { position: relative; padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.cmd-more::after { content: ''; position: absolute; inset: -13px -12px; }
.cmd-res { margin: 0; }
.cmd-res .cmd-sec { padding: var(--space-3) 0 0; margin-inline: var(--space-4); }
.cmd-res .cmd-sec:not(:first-child) { margin-top: 2px; border-top: 1px solid var(--line); }
.cmd-res .list-row { min-height: 56px; padding: 6px 16px; }
.cmd-res .list-row:has(+ .cmd-sec)::after { display: none; }
.cmd-res .cmd-lead .thumb, .cmd-pal-res .cmd-lead .thumb { width: 28px; height: 36px; padding: 6px 4px; gap: 3px; }
.cmd mark { background: var(--mz-hit); color: inherit; border-radius: var(--r-mark); }
.cmd-recent { margin: 0; }
.cmd-recent .list-row { min-height: 48px; padding: 2px 16px; }
.cmd-clipl { margin: 0; }
.cmd-clipl .chev, .cmd-ask .chev, .cmd-tutor .chev { color: var(--text-3); }
.cmd-added { margin: 0; }
.cmd-added .list-row { min-height: 64px; padding: 10px 16px; }
.cmd-addchips { display: flex; flex-wrap: nowrap; gap: 4px; }
.cmd-addchips .tag-chip { gap: 4px; padding: 0 8px; }
.cmd-mean { margin: 8px 4px; font: var(--t-caption); color: var(--text-2); }

/* اسأل المساعد */
.cmd-ask { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 12px; padding: 0 18px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text); font: var(--t-label); text-align: start; cursor: pointer; }
.cmd-ask span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-ask.off { color: var(--text-2); border-radius: var(--r-field); padding: 10px 16px; cursor: default; }
.cmd-ask.off span { white-space: normal; }
.cmd-ask.off :is(.meteor, .ch-mark) { opacity: .4; flex: none; }
.cmd-ask .ch-mark { flex: none; overflow: visible; } /* نجمة المدرب ما تاخذ نص الصف مثل نصه */
.cmd-ask:active:not(.off) { transform: scale(var(--press-scale)); }

/* «أسجّله لك؟» */
.cmd-live { margin-top: 6px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--rim); }
.cmd-live-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cmd-live-h > div { flex: 1; min-width: 0; }
.cmd-live-h b { display: block; font: var(--t-live); overflow-wrap: anywhere; }
.cmd-live-h small { display: flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); }
.cmd-live .cmd-chips { margin: 0 0 16px; }
.cmd-live .cmd-chips .ic.t3 { color: var(--text-3); }
.cmd-add { width: 100%; }

/* ما لقينا، وبدون إنترنت، وجواب «متى» */
.cmd-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 72px 0 24px; text-align: center; }
.cmd-empty .ic { color: var(--text-3); stroke-width: .75; }
.cmd-empty p { margin: 0; font: var(--t-body); color: var(--text-2); }
.cmd-offw { padding: 4px 0 12px; }
.cmd-ansc { margin: 6px 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--rim); }
.cmd-ansc small { display: block; margin-bottom: 4px; font: var(--t-caption); color: var(--text-3); }
.cmd-ansc ul { margin: 6px 0 0; padding-inline-start: 18px; font: var(--t-body); }
.cmd .t2 { color: var(--text-2); } .cmd .t3 { color: var(--text-3); }

/* ≥1024: لوحة ⌘K في الوسط (.mz-pal): الخانة فوق، النتائج يمين والمعاينة يسار، والاختصارات تحت */
.cmd.is-wide:not(.is-th) .cmd-panel.glass { top: 150px; bottom: auto; left: 50%; right: auto; width: 640px; margin-left: -320px; padding-top: 0; overflow: hidden;
  border-radius: var(--r-sheet); border-bottom: 1px solid var(--glass-rim); opacity: 0; transform: translateY(-8px) scale(.98); }
.cmd.is-wide:not(.is-th).is-open .cmd-panel { opacity: 1; transform: none; }
.cmd.is-wide:not(.is-th) .cmd-in { order: -1; height: 60px; margin: 0; gap: 12px; padding: 0 20px; border-radius: initial; border-bottom: 1px solid var(--line); background: none; font: var(--t-pal); }
.cmd.is-wide:not(.is-th) .cmd-in > .meteor { width: 22px; height: 22px; }
.cmd.is-wide:not(.is-th) :is(.cmd-clr, .cmd-clip) { display: none; }
.cmd.is-wide:not(.is-th) .cmd-esc { display: inline-block; }
.cmd.is-wide:not(.is-th) .cmd-body { flex: none; height: 476px; padding: 12px 20px 16px; }
.cmd.is-wide:not(.is-th) .cmd-body.is-pal { display: grid; grid-template-columns: 360px 280px; padding: 0; overflow: hidden; }
.cmd.is-wide .cmd-foot { display: none; }
.cmd.is-wide:not(.is-th) .cmd-foot { display: flex; flex: none; align-items: center; gap: 20px; height: 44px; padding: 0 20px; border-top: 1px solid var(--line); font: var(--t-caption); color: var(--text-3); }
.cmd-foot span { display: flex; align-items: center; gap: 4px; }
.cmd.is-wide:not(.is-th) .cmd-snack { bottom: 56px; }
.cmd-pal-res { min-height: 0; overflow-y: auto; padding: 0 10px 10px; border-left: 1px solid var(--line); scrollbar-width: none; }
.cmd-pal-res .cmd-offw { padding: 12px 10px 4px; }
.cmd-flat .cmd-sec { padding: 8px 10px 0; margin-inline: 0; }
.cmd-flat.cmd-res .cmd-sec:not(:first-child) { margin-top: 0; border-top: 0; }
.cmd-flat .list-row { min-height: 48px; padding: 3px 10px; border-radius: var(--r-field); }
.cmd-flat .list-row::after { display: none; }
.cmd-flat .list-row.sel { background: var(--surface-2); }
.cmd-flat .cmd-lead { width: 32px; }
.cmd-pal-pv { min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 20px; text-align: center; }
.cmd-pal-pv > b { font: var(--t-pv); overflow-wrap: anywhere; }
.cmd-pal-pv > small { margin-bottom: 12px; font: var(--t-caption); color: var(--text-2); }
.cmd-pv-ic { margin: 40px 0 16px; }
.cmd-pv-t { margin: 0 0 12px; font: var(--t-caption); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cmd-pv-go { height: 40px; padding-inline: 16px; }
.cmd-page { display: flex; flex-direction: column; gap: 10px; width: 176px; height: 228px; margin-bottom: 14px; padding: 20px 16px; border-radius: var(--r-thumb); background: var(--paper); outline: 1px solid var(--line); }
.cmd-page i { display: block; height: 4px; border-radius: var(--r-pill); background: var(--paper-line); opacity: .45; }
.cmd-page i.t { width: 70%; height: 7px; margin-bottom: 4px; opacity: .8; }
.cmd-page i.s { width: 60%; }
.cmd-page i.hl { height: 10px; margin: -3px; background: var(--hl-y); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cmd-row:hover:not(:disabled), .cmd-ask:hover:not(.off) { background-color: var(--surface-2); } .cmd-res .cmd-row:hover { background-color: color-mix(in srgb, var(--surface-2) 50%, transparent); } }
/* css/bar-v4.css */
/* منظّمي — شريط V4 «الشهاب في القلب» (اعتمده المالك 7 نوفمبر؛ النموذج design-reference/round3-structure/bar، v4-*.png).
   كبسولة زجاجية وحدة بعرض الشاشة ناقص 16 من الجهتين: اليوم · المواد · [الشهاب] · ذاكر · أنا. الخانات --tw والشهاب --mw،
   والعدسة تنزلق تحت المكان المفتوح وتتخطى الشهاب (--i رقم المكان و--o واحد بعد الشهاب، يكتبهما js/router.js).
   الشهاب دائرة حبر (كريمي على الأسود والليلي، كحلي على فجر) برأس عدسة، ويفتح «دوّر أو اسأل شهاب AI» (js/meteor-sheet.js).
   «الحبة الحية» فوق الشريط (js/live-pill.js): مؤقت أو مكالمة شغّالة. الحركة transform/opacity فقط ومن متغيرات نظام التصميم. */

.mobile-nav { --mw: 74px; --tw: min(64px, calc((100vw - 32px - 8px - var(--mw)) / 4)); height: 60px; }
.mobile-nav-list {
  --o: 0;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  justify-content: center;
  padding: 0 4px;
}
/* العدسة: أول خانة تبدأ بعد نصف الفاضي، وتتحرك خانة خانة ومعها عرض الشهاب بعد المادتين */
.mobile-nav-list::before {
  inset-block: 5px;
  right: calc((100% - 4 * var(--tw) - var(--mw)) / 2 + 1px);
  transform: translateX(calc((var(--i) * var(--tw) + var(--o) * var(--mw)) * -1));
}
:root[data-theme="dawn"] .mobile-nav-list::before { background: color-mix(in srgb, var(--surface-3) 70%, transparent); }
.mobile-nav-item { padding-top: 5px; }

/* الشهاب: 52 في خانة 74، حبر ومعه رأس عدسة صغير. لمسة 52 (فوق 44) */
.nav-met-li { width: var(--mw); display: grid !important; place-items: center; }
.nav-meteor {
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--ink); color: var(--on-ink); cursor: pointer;
  transition: transform var(--dur-1) var(--ease-spring), opacity var(--dur-1) var(--ease-out);
}
.nav-meteor .meteor { color: inherit; } /* symbols.css يلوّن .meteor بلون الكلام، وهنا الزر حبر */
.nav-meteor:active { transform: scale(0.92); }
.nav-meteor:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* القارئات بملء الشاشة (navChrome.NO_MET في js/app.js): الشهاب يخفت ويبقى مكانه، وبابها لشهاب AI داخلها */
html.met-off .nav-meteor { opacity: 0; transform: scale(0.6); pointer-events: none; }
body.ne-on .nav-meteor { visibility: hidden; }

/* الآيباد العمودي: نفس الكبسولة في الوسط بعرض محتواها، خانات 88 وطول 68 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .mobile-nav { --tw: 88px; --mw: 84px; height: 68px; }
  .mobile-nav-list { left: auto; right: 50%; width: calc(4 * var(--tw) + var(--mw) + 8px); }
  .nav-meteor { width: 56px; height: 56px; }
}

/* ===== الحبة الحية (iOS 26 bottom accessory): فوق الشريط بـ8. مؤقت المذاكرة (.focus-pill، يرسمه focusTimer ويُسحب بـ float-drag)
   والمكالمة وغيرها (.lp-host من js/live-pill.js) بنفس الشكل، تدخل وتطلع بانزلاق وتلاشٍ */
@media (max-width: 1023.98px) {
  .live-pill.focus-pill { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .lp-host { position: fixed; z-index: 89; inset-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); bottom: calc(76px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
  html.has-focus-float .lp-host { transform: translateY(-52px); }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .live-pill.focus-pill, .lp-host { bottom: calc(max(28px, calc(8px + env(safe-area-inset-bottom))) + 76px); }
}
.lp-host[hidden], :is(.kb-open, body.ne-on) .lp-host { display: none; }
.lp-item { width: 100%; max-width: 420px; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: var(--r-pill);
  font: var(--t-label); color: var(--text); text-decoration: none; border: 0; cursor: pointer; pointer-events: auto;
  animation: lp-in var(--dur-2) var(--ease-out) both; }
.lp-item.is-out { animation: lp-out var(--dur-1) var(--ease-out) both; pointer-events: none; }
.lp-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--rose); flex: none; box-shadow: var(--halo-rose); }
.lp-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; font-feature-settings: "tnum"; }
@keyframes lp-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes lp-out { to { opacity: 0; transform: translateY(12px); } }
/* الشاشة الواسعة: المؤقت في الشريط الجانبي، والمكالمة لها شاشتها جنب الملف */
@media (min-width: 1024px) { .lp-host { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav-meteor, .lp-item, .lp-item.is-out { transition: none; animation: none; } }

/* الشريط الجانبي (≥1024): سطر Plus بلا رقم حتى يوصل عدد أيام التجربة (plansConfig.paintTrial) */
.sd-trial:has(bdi[data-trial="days"]:empty) { display: none; }
.sd-cmd .meteor.ask { flex: none; color: var(--text-2); }
/* صفحة بلا مكان (المشاركة بلا رابط): العدسة تختفي بنعومة */
.mobile-nav-list.no-place::before { opacity: 0; }
/* css/meteor.css */
/* «دوّر أو اسأل شهاب AI» (js/meteor-sheet.js فوق js/cmd-sheet.js) — النموذج المعتمد round3-structure s6-search وs6b-search-empty:
   الجوال: لوح من تحت بمقبضه (bar/v2-sheet)، الخانة فوق وجنبها «إلغاء»، ثم النتائج بأقسامها، ثم «اسأل شهاب AI» واقتراحاته.
   فاضي: آخر ما دوّرت عليه بصف يتمرر، و«كل الأدوات» بلوحة وحدة بأربع مجموعات. المحادثة (is-th) ولوحة ⌘K (is-wide) مثل قبل.
   الحواف والألوان والحركة من متغيرات النظام فقط، والحركة transform/opacity. */

/* ===== الجوال والآيباد: لوح من تحت بمقبضه (النموذج bar/v2-sheet-*.png؛ كان شاشة كاملة): أعلاه 214 من 844، والخانة فوق وجنبها «إلغاء».
   الفتح والإغلاق transform من css/ask.css، والسحب لتحت من المقبض يقفله (js/cmd-sheet.js) */
.cmd-cancel { display: none; }
:root .cmd.is-met:not(.is-th):not(.is-wide) .cmd-panel.glass { top: max(calc(env(safe-area-inset-top) + 33px), calc(var(--app-h, 100dvh) * 0.2535)); background: var(--surface-sheet); box-shadow: var(--rim-top); }
:root[data-theme="dawn"] .cmd.is-met:not(.is-th):not(.is-wide) .cmd-panel.glass { box-shadow: var(--shadow-float); }
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-grab { order: -2; height: 5px; }
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-res .chev { flex: none; color: var(--text-3); }
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-in { order: -1; height: 48px; margin: 0 var(--space-4) 0 56px; padding: 0 14px; border-radius: var(--r-field); background: var(--surface-2); box-shadow: var(--ring-line); }
:root[data-theme="dawn"] .cmd.is-met:not(.is-th):not(.is-wide) .cmd-in { background: var(--surface-3); }
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-in > .meteor { color: var(--text-2); }
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-clr { width: 22px; height: 22px; background: var(--text-3); color: var(--surface-sheet); }
.kb-over .cmd.is-met:not(.is-th):not(.is-wide) .cmd-in { translate: none; }
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-in :is(.cmd-clip, .cp-send) { display: none; }
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-cancel { position: absolute; top: 29px; left: var(--space-4); display: grid; place-items: center;
  min-width: 28px; height: 48px; padding: 0; border: 0; background: none; color: var(--text-2); font: var(--t-label); cursor: pointer; }
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-cancel::after { content: ''; position: absolute; inset: 0 -8px; }
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-cancel:active { opacity: .6; }
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-body { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
/* داخل اللوح: الألواح على --surface-2 بلا إطار، والصف 60، والعناوين بخط --t-label (v2-sheet .vsheet) */
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-body .list-panel { background: var(--surface-2); border-color: transparent; }
:root[data-theme="dawn"] .cmd.is-met:not(.is-th):not(.is-wide) .cmd-body .list-panel { background: var(--surface-3); }
.cmd.is-met:not(.is-th):not(.is-wide) .cmd-res .list-row { min-height: 60px; }
.cmd.is-met:not(.is-th):not(.is-wide) .mt-hint { margin: 10px var(--space-1) 0; }
.cmd.is-met:not(.is-th):not(.is-wide) .mt-cap { padding: 18px var(--space-1) var(--space-2); font: var(--t-label); }
.cmd.is-met:not(.is-th):not(.is-wide) .mt-sugg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cmd.is-met:not(.is-th):not(.is-wide) .mt-sugg::-webkit-scrollbar { display: none; }
.cmd.is-met:not(.is-th):not(.is-wide) .mt-sugg .tag-chip { flex: none; background: var(--surface-2); box-shadow: var(--rim); }
:root[data-theme="dawn"] .cmd.is-met:not(.is-th):not(.is-wide) .mt-sugg .tag-chip { background: var(--surface-3); }
/* حال الغياب في صفه («قريب من الحد»، js/search-screen.js tag) */
.cmd .tag.ember { color: var(--ember); background: var(--ember-wash); }

/* ===== السطور */
.mt-hint { margin: var(--space-2) var(--space-1) 0; font: var(--t-caption); color: var(--text-3); }
.mt-cap { padding: var(--space-4) var(--space-1) var(--space-2); font: var(--t-body); color: var(--text-2); }
.mt-all-h { margin: 0; font-weight: 400; }

/* آخر ما دوّرت عليه: صف واحد يتمرر */
.mt-recent { display: flex; gap: var(--space-2); margin-inline: calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-1); overflow-x: auto; scrollbar-width: none; }
.mt-recent::-webkit-scrollbar { display: none; }
.mt-recent .tag-chip { flex: none; gap: 6px; min-height: 44px; }

/* كل الأدوات: لوحة وحدة بأربع مجموعات */
.mt-tools { padding: var(--space-2) var(--space-4); }
.mt-grp { padding: var(--space-3) 0; }
.mt-grp + .mt-grp { border-top: 1px solid var(--line); }
.mt-grp-h { margin: 0 0 var(--space-2); font: var(--t-body); color: var(--text-2); }
.mt-chips, .mt-sugg { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mt-chips .tag-chip, .mt-sugg .tag-chip { min-height: 44px; }
.mt-sugg { margin-top: var(--space-3); }

/* صف «اسأل شهاب AI» */
.mt-ask .met-lead { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); }
.mt-ask .met-lead .meteor { color: inherit; }
.mt-ask .list-row { min-height: 64px; }
.mt-ask .list-row-main b { overflow-wrap: anywhere; }
.mt-ask .is-off { cursor: default; }
.mt-ask .is-off .met-lead { opacity: .4; }
.mt-ask .is-off small { color: var(--text-2); }

/* ما لقينا شي */
.mt-none { padding: var(--space-6) 0 var(--space-2); }

@media (prefers-reduced-motion: reduce) { .cmd.is-met .cmd-cancel:active { opacity: 1; } }

/* سطر شهاب AI من يومك واقتراحاته (js/coach-home.js) تحت صف السؤال */
.chx-empty .chx-say { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) var(--space-1) 0; }
.chx-empty .chx-say p { margin: 0; font: var(--t-body); color: var(--text-2); }
.chx-empty .chx-sug { gap: 6px; }

/* الحاسب: محادثة شهاب AI لوح جانبي جنب الشريط (ask.css)، والشريط الجانبي يبقى يشتغل وراها (رابطه يقفلها ويروح، js/router.js hashchange) */
.cmd.is-wide.is-coach:is(.is-th, .is-mem) { pointer-events: none; }
.cmd.is-wide.is-coach:is(.is-th, .is-mem) .cmd-scrim { opacity: 0; }
.cmd.is-wide.is-coach:is(.is-th, .is-mem) .cmd-panel { pointer-events: auto; }
/* «مثبّتة» أول «كل الأدوات» */
.mt-pins { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.mt-pins-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.mt-arr { color: var(--rose); }
/* css/notes.css */
/* منظّمي — الملاحظات (js/note-editor.js وjs/views-notes.js): تنسيق النص، لوح «تنسيق أكثر»، وصفوف تبويب المادة. المحرر وشريطه في css/notes-time.css.
   تنسيق النص هنا عام: يظهر بنفس الشكل في المحرر والمعاينة والملخص والتدوينات. */

/* تنسيق النص (renderMarkdown والمحرر): التظليل والألوان، والخط من الصفحة لا من وسم font */
mark, font[face] { font-family: inherit; color: inherit; }
mark.hl-y, font[face="nvhl-y"] { background: var(--hl-y); }
mark.hl-g, font[face="nvhl-g"] { background: var(--hl-g); }
mark.hl-p, font[face="nvhl-p"] { background: var(--hl-p); }
mark.hl-b, font[face="nvhl-b"] { background: var(--hl-b); }
mark, font[face^="nvhl-"]:not([face="nvhl-none"]) { border-radius: var(--radius-xs); padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tc-a { color: var(--accent-primary); }
.tc-r { color: var(--semantic-danger); }
.tc-g { color: var(--semantic-success); }
.tc-b { color: var(--tc-blue); }
.md-small { font-size: var(--fs-small); color: var(--text-muted); }
.ne-body .md-small { font-size: calc(var(--fs-small) * var(--note-scale, 1)); }

/* صفحة الملاحظة على الجوال بلا شريط التنقل (css/notes-time.css للشكل) */
body.ne-on .mobile-nav { display: none !important; }
.ne-round { width: var(--control-h); height: var(--control-h); flex: none; border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: var(--bg-surface-2); color: var(--text-primary); border: 1px solid var(--border-subtle); padding: 0; }

/* نص الملاحظة: الحجم والتباعد من «عرض الملاحظة» (--note-scale و--note-lh على الجذر) */
.ne-body { position: relative; font-size: calc(var(--fs-body) * var(--note-scale, 1)); line-height: var(--note-lh, 1.9); color: var(--text-primary); overflow-wrap: anywhere; min-height: 240px; }
.ne-body:focus { outline: none; }
.ne-body.is-empty::before { content: attr(data-placeholder); color: var(--text-muted); position: absolute; inset-inline: 0; pointer-events: none; }
/* :not(.sb *): قطع الملخص بشكلها */
.ne-body :is(h1, h2, h3):not(.sb *) { font-size: calc(var(--fs-title) * var(--note-scale, 1)); font-weight: 800; margin: var(--space-5) 0 var(--space-2); line-height: 1.4; }
.ne-body h4 { font-size: calc(var(--fs-sheet-title) * var(--note-scale, 1)); font-weight: 700; margin: var(--space-4) 0 var(--space-1); color: var(--accent-primary); }
.ne-body h5, .ne-body h6 { font-size: inherit; font-weight: 700; margin: var(--space-3) 0 var(--space-1); }
.ne-body > :first-child { margin-top: 0; }
.ne-body p:not(.sb *) { margin: 0 0 var(--space-3); }
.ne-body :is(ul, ol):not(.sb *) { margin: 0 0 var(--space-3); padding-inline-start: 1.3em; }
.ne-body li:not(.sb *) { margin-bottom: var(--space-1); }
.ne-body li::marker { color: var(--accent-primary); font-weight: 700; }
.ne-body blockquote:not(.sb *) { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-inline-start: 4px solid var(--accent-primary); background: var(--accent-subtle-bg); border-radius: var(--radius-sm); color: var(--text-primary); }
.ne-body hr { border: 0; border-top: 1px dashed var(--border-strong); margin: var(--space-5) 0; }
.ne-body a { color: var(--accent-primary); }
.ne-body code { background: var(--bg-surface-2); border-radius: var(--radius-xs); padding: 1px 5px; font-size: calc(var(--fs-small) * var(--note-scale, 1)); }
/* قائمة المهام: المربع من CSS ولمسته تقلب المهمة (note-editor.js onBox) */
.ne-body ul:has(> li.md-task) { padding-inline-start: 0; }
.ne-body li.md-task { list-style: none; position: relative; padding-inline-start: 1.9em; margin-inline-start: 0; }
.ne-body li.md-task::before, .ne-body li.md-task::after { content: ''; position: absolute; inset-inline-start: 0; top: 0.35em; width: 1.2em; height: 1.2em; box-sizing: border-box; border-radius: var(--radius-check); cursor: pointer; }
.ne-body li.md-task::before { border: 2px solid var(--border-strong); }
.ne-body li.md-task.is-done::before { background: var(--moon); border-color: var(--moon); }
.ne-body li.md-task.is-done::after { background: var(--on-accent); -webkit-mask: no-repeat center / 75% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E"); mask: no-repeat center / 75% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E"); }
.ne-body li.md-task.is-done { color: var(--text-muted); text-decoration: line-through; }
.ne-body li.md-task input { display: none; }
.ne-body .sm { font-size: inherit; }

/* لوحا «Aa» والتظليل: فوق المحرر بلا نافذة (المحرر يبقى حياً للتحديد) */
.ne-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; }
.ne-panel { position: fixed; inset-inline: 0; bottom: 0; z-index: 51; background: var(--bg-surface-1); border-radius: var(--radius-modal) var(--radius-modal) 0 0; box-shadow: var(--shadow-sheet); padding: var(--space-3) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); max-width: var(--sheet-max-w); margin: 0 auto; }
.ne-grip { width: 40px; height: 5px; border-radius: var(--radius-pill); background: var(--border-strong); margin: 0 auto var(--space-3); }
.ne-panel-head { display: flex; justify-content: space-between; align-items: center; }
.ne-panel-head b { font-size: var(--fs-sheet-title); }
.ne-label { display: block; font-size: var(--fs-caption); color: var(--text-muted); font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
.ne-hint { font-size: var(--fs-caption); color: var(--text-muted); margin: var(--space-4) 0 0; }
.ne-styles { display: flex; gap: var(--space-2); overflow-x: auto; margin-top: var(--space-3); }
.ne-style { flex: none; min-height: var(--control-h); padding: 0 14px; border-radius: var(--radius-md); background: var(--bg-surface-2); border: 1.5px solid transparent; color: var(--text-primary); font: inherit; }
.ne-style.is-h { font-weight: 800; font-size: var(--fs-sheet-title); }
.ne-style.is-sub { font-weight: 700; color: var(--accent-primary); }
.ne-style.is-small { font-size: var(--fs-caption); }
.ne-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--bg-surface-2); }
.ne-seg button { min-height: 42px; border: 0; background: none; display: grid; place-items: center; border-radius: var(--radius-sm); font: inherit; font-weight: 700; font-size: var(--fs-sheet-title); color: var(--text-primary); padding: 0; }
.ne-seg button.on { background: var(--bg-surface-1); box-shadow: var(--shadow-soft); color: var(--accent-primary); }
.ne-colors { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }
.ne-label + .ne-colors { margin-top: 0; }
.ne-dot { width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center; border: 2px solid transparent; padding: 0; color: var(--text-muted); background: none; }
.ne-dot.on { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.ne-dot.is-none { border-color: var(--border-strong); background: var(--bg-surface-1); }
.ne-dot.tc-none { background: var(--text-primary); }
.ne-dot.hl-y { background: var(--hl-y); } .ne-dot.hl-g { background: var(--hl-g); } .ne-dot.hl-p { background: var(--hl-p); } .ne-dot.hl-b { background: var(--hl-b); }
.ne-dot.tc-a { background: var(--accent-primary); } .ne-dot.tc-r { background: var(--semantic-danger); } .ne-dot.tc-g { background: var(--semantic-success); } .ne-dot.tc-b { background: var(--tc-blue); }
.ne-size { display: flex; align-items: center; gap: var(--space-3); }
.ne-size input { flex: 1; accent-color: var(--accent-primary); min-height: var(--control-h); }
.ne-size small { font-weight: 700; color: var(--text-secondary); }
.ne-size big { font-weight: 700; font-size: var(--fs-title); color: var(--text-secondary); }

/* الملخص: النص العادي أخف والمهم (الغامق) أغمق، فتلتقط العين المهم أولاً */
.sm-md, .sm-lead, .sm-text, .sm-box { color: var(--text-secondary); }
.sm strong { color: var(--text-primary); }

/* الملخص بالشكل الجديد (z7-summary): العنوان من رأس الملخص نفسه، وتحت ثلاثة أزرار ثابتة: اشرح لي، أسئلة منه، بطاقات */
.ne-sum.is-reading .tab-bar { width: fit-content; margin-inline-start: auto; }
.cs-ch .sm-sec-title { font-size: var(--fs-small); color: var(--text-muted); }
.sum-acts { position: sticky; z-index: 3; bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-2); margin-top: var(--space-4); }
.sum-acts .btn { gap: 6px; min-height: 52px; border-radius: var(--radius-pill); box-shadow: var(--shadow-float); }
.ne-sum:not(.is-reading) .sum-acts { display: none; }
.is-explain .sm-row.is-tap { position: relative; }
.is-explain .sm-row.is-tap::after { content: ''; position: absolute; inset: -2px -6px; border-radius: var(--radius-md); background: var(--accent-subtle-bg); opacity: 0; pointer-events: none; animation: sum-hint 1.4s var(--ease-out) 2; }
@keyframes sum-hint { 40% { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .is-explain .sm-row.is-tap::after { animation: none; } }
/* css/summary-blocks.css */
/* منظّمي — قطع «الملخص المرئي» (js/summary-blocks.js؛ الشكل المعتمد design-reference/chapter-blocks، 12 أكتوبر).
   كل قطعة = محرك عرض + اسم + أيقونة + نغمة. النغمة تضبط --tone و--tone-bg للقطعة كلها، والألوان من متغيرات التصميم فقط. */
.sb { --tone: var(--accent-primary); --tone-bg: var(--accent-subtle-bg); display: grid; gap: var(--space-3); min-width: 0; }
.sb.t-green { --tone: var(--semantic-success); --tone-bg: var(--success-bg); }
.sb.t-amber { --tone: var(--semantic-warning); --tone-bg: var(--warn-bg); }
.sb.t-red { --tone: var(--semantic-danger); --tone-bg: var(--muted-bg); }
.sb.t-blue { --tone: var(--tc-blue); --tone-bg: var(--bg-surface-2); }
.sb.t-gray { --tone: var(--text-secondary); --tone-bg: var(--bg-surface-2); }
.sb p { margin: 0; }
.sb-h { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-button); font-weight: 700; }
.sb-ic { flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); }
.sb-box { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface-1); border: 1px solid var(--border-subtle); min-width: 0; }
.sb small { font-size: var(--fs-caption); }

/* تنبيه وفكرة */
.sb-co { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--tone-bg); line-height: 1.85; }
.sb-co > svg { flex: none; color: var(--tone); margin-top: var(--space-1); }
.sb-co.is-big { background: var(--bg-surface-1); border: 1px solid var(--border-subtle); font-size: var(--fs-sheet-title); font-weight: 500; }

/* نص مقتبس */
/* الحشو العلوي يترك مكان الشارة */
.sb-qt { position: relative; margin: var(--space-2) 0 0; padding: calc(var(--space-5) + var(--space-3)) var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface-1); border: 1px solid var(--border-subtle); }
.sb-qm { position: absolute; top: calc(var(--space-3) * -1); inset-inline-start: var(--space-4); width: 28px; height: 28px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--tone); color: var(--on-accent); }
.sb-qt p { font-size: var(--fs-sheet-title); line-height: 2; font-weight: 500; }
.sb-qt small { display: block; margin-top: var(--space-3); color: var(--text-muted); }

/* قائمة تحقق، مصطلحات، أسئلة: صفوف داخل إطار واحد */
.sb-chk, .sb-terms, .sb-qa { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface-1); overflow: hidden; }
.sb-chk label { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); line-height: 1.7; font-size: var(--fs-small); cursor: pointer; }
.sb-chk label + label, .sb-terms > div + div, .sb-qa > details + details { border-top: 1px solid var(--border-subtle); }
.sb-chk input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--tone); }
.sb-chk input:checked + span { color: var(--text-muted); text-decoration: line-through; }
.sb-terms > div { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); line-height: 1.7; font-size: var(--fs-small); }
.sb-terms b small { display: block; color: var(--text-muted); font-weight: 500; }
.sb-terms span { color: var(--text-secondary); }
.sb-qa summary { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); font-weight: 600; line-height: 1.7; cursor: pointer; list-style: none; }
.sb-qa summary::-webkit-details-marker { display: none; }
.sb-qa .no-a summary { cursor: default; }
.sb-qa summary > span { flex: 1; min-width: 0; }
.sb-qa summary em { flex: none; font-style: normal; font-size: var(--fs-caption); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--tone-bg); color: var(--tone); font-weight: 700; }
.sb-qa summary > svg { flex: none; color: var(--text-muted); transition: transform var(--dur-2) var(--ease-out); }
.sb-qa details[open] summary > svg { transform: rotate(180deg); color: var(--tone); }
.sb-ans { margin: 0 var(--space-4) var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface-2); color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.8; }
.sb-tf .sb-ans { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.sb-tf .sb-ans.is-ok { background: var(--success-bg); } .sb-tf .is-ok b, .sb-tf .is-ok svg { color: var(--success-fg); }
.sb-tf .sb-ans.is-no { background: var(--muted-bg); } .sb-tf .is-no b, .sb-tf .is-no svg { color: var(--semantic-danger); }

/* خطوات */
.sb-steps { list-style: none; margin: 0; padding: 0; }
.sb-steps li { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-4); }
.sb-steps li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--border-subtle); }
.sb-n { flex: none; width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--tone); color: var(--on-accent); font-weight: 800; font-size: var(--fs-small); }
.sb-steps b { display: block; margin-top: var(--space-1); }
.sb-steps p { color: var(--text-secondary); line-height: 1.8; font-size: var(--fs-small); }

/* خط زمني */
.sb-tl { position: relative; padding-inline-start: var(--space-6); }
.sb-tl::before { content: ''; position: absolute; inset-inline-start: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--tone), var(--border-subtle)); }
.sb-tl > div { position: relative; padding-bottom: var(--space-4); }
.sb-tl > div::before { content: ''; position: absolute; inset-inline-start: calc(var(--space-6) * -1 + 2px); top: 6px; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--bg-base); border: 2.5px solid var(--tone); box-sizing: border-box; }
.sb-tl em { font-style: normal; font-weight: 800; color: var(--tone); font-size: var(--fs-small); }
.sb-tl p { color: var(--text-secondary); line-height: 1.8; }

/* سلسلة */
.sb-chain { display: grid; gap: var(--space-1); }
.sb-st { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-surface-1); border: 1px solid var(--border-subtle); border-inline-start: 3px solid var(--tone); line-height: 1.7; }
.sb-st small { display: block; font-weight: 700; color: var(--text-muted); }
.sb-arr { justify-self: center; color: var(--text-muted); }

/* أزواج */
.sb-pairs, .sb-ift, .sb-dlg { display: grid; gap: var(--space-2); }
.sb-pair { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); background: var(--bg-surface-1); }
.sb-pa, .sb-pb { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); line-height: 1.7; font-size: var(--fs-small); color: var(--text-secondary); }
.sb-pa small, .sb-pb small { display: block; font-weight: 700; }
.sb-pa > svg, .sb-pa small { color: var(--semantic-danger); }
.sb-pb { background: var(--success-bg); border-top: 1px solid var(--border-subtle); color: var(--text-primary); }
.sb-pb > svg, .sb-pb small { color: var(--semantic-success); }
.sb-pa > svg, .sb-pb > svg { flex: none; margin-top: var(--space-1); }

/* أرقام */
.sb-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); }
.sb-nums > div { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface-1); border: 1px solid var(--border-subtle); }
.sb-nums b { display: block; font-size: var(--fs-card-title); font-weight: 800; color: var(--tone); font-variant-numeric: tabular-nums; line-height: 1.3; }
.sb-nums span { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.6; }

/* دورة */
.sb-cyc { position: relative; aspect-ratio: 1; width: 100%; max-width: 340px; margin: 0 auto; }
.sb-ring { position: absolute; inset: 17%; border: 2px dashed var(--border-strong); border-radius: var(--radius-pill); }
.sb-mid { position: absolute; inset: 36%; display: grid; place-items: center; text-align: center; font-weight: 700; font-size: var(--fs-small); color: var(--tone); }
.sb-cst { position: absolute; width: 34%; padding: var(--space-2); border-radius: var(--radius-md); background: var(--bg-surface-1); border: 1.5px solid var(--border-strong); text-align: center; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-secondary); transform: translate(-50%, -50%); box-sizing: border-box; }
.sb-cst b { display: block; font-size: var(--fs-small); color: var(--text-primary); }
.sb-cst i { position: absolute; top: -10px; inset-inline-start: -8px; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--tone); color: var(--on-accent); font-style: normal; font-weight: 800; font-size: var(--fs-caption); display: grid; place-items: center; }

/* هرم */
.sb-pyr { display: grid; justify-items: center; gap: var(--space-1); }
.sb-pyr > div { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-align: center; font-size: var(--fs-small); line-height: 1.5; background: var(--bg-surface-2); color: var(--text-secondary); box-sizing: border-box; }
.sb-pyr b { display: block; color: var(--text-primary); }
.sb-pyr > div:first-child { background: var(--tone); color: var(--on-accent); } .sb-pyr > div:first-child b { color: var(--on-accent); }
.sb-pyr > div:nth-child(2) { background: var(--tone-bg); }

/* بطاقات تذكّر: الضغط يقلب للجواب */
.sb-fc { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.sb-card { min-height: 112px; padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--bg-surface-1); color: var(--text-primary); display: flex; flex-direction: column; gap: var(--space-2); text-align: start; font: inherit; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.sb-card:active { transform: scale(0.98); }
.sb-card > span { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; font-weight: 600; line-height: 1.7; }
.sb-card small { color: var(--text-muted); font-weight: 700; }
.sb-card .sb-a, .sb-card.is-flip .sb-q { display: none; }
.sb-card.is-flip .sb-a { display: flex; }
.sb-card.is-flip { background: var(--tone); color: var(--on-accent); border-color: transparent; }
.sb-card.is-flip small, .sb-card.is-flip .sb-tap { color: var(--on-accent); }
.sb-card .sb-tap { flex: none; color: var(--tone); font-size: var(--fs-caption); font-weight: 700; }

/* إذا… فـ…، حوار */
.sb-ift > div { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-2); align-items: stretch; }
.sb-ift > div > span { padding: var(--space-3); border-radius: var(--radius-md); font-size: var(--fs-small); line-height: 1.6; }
.sb-ift small { display: block; font-weight: 700; color: var(--text-muted); }
.sb-if { background: var(--bg-surface-1); border: 1px solid var(--border-subtle); }
.sb-then { background: var(--tone-bg); font-weight: 600; } .sb-then small { color: var(--tone); }
.sb-ift svg { align-self: center; color: var(--text-muted); transform: scaleX(-1); }
.sb-dlg > div { max-width: 82%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface-1); border: 1px solid var(--border-subtle); line-height: 1.7; font-size: var(--fs-small); justify-self: start; }
.sb-dlg > .is-o { justify-self: end; background: var(--tone-bg); border-color: transparent; }
.sb-dlg small { display: block; font-weight: 700; color: var(--tone); }

/* مجموعات ومصفوفة */
.sb-cls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.sb-cls > div, .sb-mx > div { padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface-1); border: 1px solid var(--border-subtle); line-height: 1.7; }
.sb-cls > div { border-top: 3px solid var(--tone); }
.sb-cls b, .sb-mx b { display: block; margin-bottom: var(--space-1); font-size: var(--fs-small); }
.sb-cls span { display: inline-block; margin: 0 0 var(--space-1); margin-inline-end: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--bg-surface-2); font-size: var(--fs-caption); color: var(--text-secondary); }
.sb-mx { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); font-size: var(--fs-small); color: var(--text-secondary); }
.sb-mx > div:nth-child(1), .sb-mx > div:nth-child(4) { background: var(--tone-bg); border-color: transparent; }
.sb-mx > div:nth-child(1) b, .sb-mx > div:nth-child(4) b { color: var(--tone); }

/* عمودين، وتشابه واختلاف */
.sb-pc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.sb-pc > div { padding: var(--space-4); border-radius: var(--radius-lg); min-width: 0; }
.sb-pc .is-x { background: var(--success-bg); } .sb-pc .is-y { background: var(--muted-bg); }
.sb-pc b { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); font-size: var(--fs-small); }
.sb-pc .is-x b { color: var(--success-fg); } .sb-pc .is-y b { color: var(--semantic-danger); }
.sb-pc ul, .sb-vn ul { margin: 0; padding-inline-start: var(--space-4); font-size: var(--fs-small); line-height: 1.8; color: var(--text-secondary); }
.sb-vn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); background: var(--bg-surface-1); }
.sb-vn > div { padding: var(--space-3); }
.sb-vn > div + div { border-inline-start: 1px solid var(--border-subtle); }
.sb-vn > .is-both { background: var(--tone-bg); }
.sb-vn b { display: block; margin-bottom: var(--space-1); font-size: var(--fs-small); }

/* رسم بياني */
.sb-bars { display: grid; gap: var(--space-3); }
.sb-bars > div { display: grid; grid-template-columns: minmax(64px, 30%) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; font-size: var(--fs-small); }
.sb-bars > div > span:first-child { font-weight: 600; }
.sb-bars b { color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-bt { height: 12px; border-radius: var(--radius-pill); background: var(--bg-surface-2); overflow: hidden; }
.sb-bt i { display: block; height: 100%; border-radius: inherit; background: var(--tone); }

/* تشبيه */
.sb-ana { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-2); }
.sb-ana > div { padding: var(--space-4); border-radius: var(--radius-lg); text-align: center; line-height: 1.6; background: var(--bg-surface-1); border: 1px solid var(--border-subtle); }
.sb-ana > .is-b { background: var(--tone-bg); border-color: transparent; }
.sb-ana small { display: block; color: var(--text-muted); font-weight: 700; margin-bottom: var(--space-1); }
.sb-ana > span { align-self: center; font-weight: 800; color: var(--tone); }
.sb-why { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-surface-2); font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.8; }

/* جدول */
/* الجوال (مراجعة 20 أكتوبر): كل عمود 6em على الأقل وما يكسر الكلمة من نصها (.sm يكسر في أي حرف)، والزائد يتمرر داخل الجدول لا الصفحة */
.sb-tbl { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface-1); }
.sb-tbl table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.sb-tbl th, .sb-tbl td { min-width: 6em; overflow-wrap: break-word; word-break: normal; }
.sb-tbl th { background: var(--bg-surface-2); padding: var(--space-3); font-weight: 700; text-align: start; }
.sb-tbl td { padding: var(--space-3); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); line-height: 1.7; vertical-align: top; }
.sb-tbl td:first-child { color: var(--text-primary); font-weight: 600; }

/* اتجاهات وأماكن */
.sb-plc { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". n ." "e c w" ". s ."; gap: var(--space-2); }
/* خطا البوصلة: صليب متقطع يربط الجهات بالوسط عشان تنقرا كخريطة */
.sb-plc::before, .sb-plc::after { content: ''; position: absolute; border: 0 dashed var(--border-strong); }
.sb-plc::before { top: var(--space-5); bottom: var(--space-5); inset-inline-start: 50%; border-inline-start-width: 1px; }
.sb-plc::after { left: var(--space-5); right: var(--space-5); top: 50%; border-top-width: 1px; }
.sb-plc > div { position: relative; z-index: 1; padding: var(--space-2); border-radius: var(--radius-md); background: var(--bg-surface-2); text-align: center; }
.sb-plc .is-n { grid-area: n; } .sb-plc .is-s { grid-area: s; } .sb-plc .is-e { grid-area: e; } .sb-plc .is-w { grid-area: w; } .sb-plc .is-c { grid-area: c; background: var(--tone-bg); }
.sb-plc small { display: block; font-weight: 700; color: var(--text-muted); }
.sb-plc span { display: block; font-size: var(--fs-caption); font-weight: 600; }

/* بطاقة تعريفية وأجزاء الشيء */
.sb-prof { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-4); align-items: start; }
.sb-av { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--tone-bg); color: var(--tone); display: grid; place-items: center; grid-row: span 2; }
.sb-prof h3 { margin: 2px 0; font-size: var(--fs-sheet-title); }
.sb-sub { color: var(--text-muted); font-size: var(--fs-small); }
.sb-prof dl { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: var(--fs-small); line-height: 1.7; }
.sb-prof dt { color: var(--text-muted); font-weight: 600; }
.sb-prof dd { margin: 0; color: var(--text-secondary); }
.sb-prof dt:empty { display: none; }
.sb-prof dt:empty + dd { grid-column: 1 / -1; }
.sb-parts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.sb-pc0 { width: 96px; height: 96px; border-radius: var(--radius-pill); background: var(--tone-bg); color: var(--tone); display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; font-size: var(--fs-small); padding: var(--space-2); box-sizing: border-box; }
.sb-pc0 span { font-size: var(--fs-caption); color: var(--text-secondary); }
.sb-parts ol { margin: 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: var(--space-2); }
.sb-parts li { counter-increment: p; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--space-2); font-size: var(--fs-small); line-height: 1.5; }
.sb-parts li::before { content: counter(p); grid-row: span 2; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--tone); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; font-size: var(--fs-caption); }
.sb-parts li span { color: var(--text-secondary); }

/* تصريف */
.sb-cw { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.sb-cw b { font-size: var(--fs-card-title); color: var(--tone); } .sb-cw span { color: var(--text-secondary); }
.sb-cg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.sb-cg > div { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface-2); }
.sb-cg small { display: block; color: var(--text-muted); }

/* طيف (من… إلى) */
.sb-ends { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--text-muted); font-weight: 700; }
.sb-bar { height: 10px; margin: var(--space-2) 0 var(--space-3); border-radius: var(--radius-pill); background: linear-gradient(to left, var(--semantic-danger), var(--semantic-warning), var(--semantic-success), var(--tc-blue)); }
.sb-scale ol { margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); text-align: center; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-secondary); }
.sb-scale li b { display: block; color: var(--text-primary); font-size: var(--fs-small); }
.sb-scale li::before { content: ''; display: block; width: 10px; height: 10px; margin: calc(var(--space-5) * -1) auto var(--space-2); border-radius: var(--radius-pill); background: var(--bg-surface-1); border: 2.5px solid var(--tone); box-sizing: border-box; }

/* شجرة (خريطة مفاهيم) */
.sb-map { display: grid; justify-items: center; }
.sb-node { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1.5px solid var(--border-strong); background: var(--bg-surface-1); text-align: center; font-weight: 700; line-height: 1.5; font-size: var(--fs-small); }
.sb-node small { display: block; font-weight: 400; color: var(--text-secondary); }
.sb-node.is-root { background: var(--tone); border-color: transparent; color: var(--on-accent); padding-inline: var(--space-5); font-size: var(--fs-body); }
.sb-node.is-root small { color: var(--on-accent); }
.sb-node.is-root .pg { background: transparent; color: inherit; border-color: currentColor; }
.sb-fork { width: 2px; height: var(--space-4); background: var(--border-strong); }
.sb-kids { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-2); width: 100%; padding-top: var(--space-3); border-top: 1.5px solid var(--border-strong); }
.sb-leaf { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: center; margin-top: var(--space-2); }
.sb-leaf span { font-size: var(--fs-caption); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--bg-surface-2); color: var(--text-secondary); font-weight: 500; }

/* قانون مشروح ومعادلة تفاعل */
.sb-f { display: grid; gap: var(--space-2); }
.sb-eq { text-align: center; overflow-wrap: break-word; font-family: 'Times New Roman', serif; font-style: italic; font-size: var(--fs-card-title); padding: var(--space-1) 0; }
.sb-eq span { padding: 0 var(--space-1); border-bottom: 2px solid; }
.sb .sb-c1 { border-color: var(--accent-primary); } .sb .sb-c2 { border-color: var(--semantic-success); } .sb .sb-c3 { border-color: var(--semantic-warning); } .sb .sb-c4 { border-color: var(--tc-blue); }
.sb-legend { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: var(--fs-small); color: var(--text-secondary); }
.sb-legend > div { display: flex; gap: var(--space-2); align-items: baseline; }
.sb-legend b { flex: none; font-family: 'Times New Roman', serif; font-style: italic; min-width: 48px; border-bottom: 2px solid; text-align: center; color: var(--text-primary); }
.sb-rx { text-align: center; }
.sb-eqn { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-ring); font-weight: 700; }
.sb-eqn > span { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface-2); }
.sb-eqn .is-p { background: var(--tone-bg); color: var(--tone); }
.sb-eqn i { font-style: normal; color: var(--text-muted); }
.sb-rx p { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }

/* مثال محلول وبرهان */
.sb-exq { font-weight: 600; line-height: 1.8; padding-bottom: var(--space-3); border-bottom: 1px dashed var(--border-strong); }
.sb-ex ol { margin: var(--space-3) 0; padding-inline-start: var(--space-5); color: var(--text-secondary); line-height: 1.9; font-size: var(--fs-small); }
.sb-exa { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--success-bg); color: var(--success-fg); font-weight: 700; }
.sb-exa > svg { flex: none; }
.sb-pg { font-weight: 700; margin-bottom: var(--space-2) !important; }
.sb-pl { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-top: 1px dashed var(--border-subtle); }
.sb-pn { color: var(--text-muted); font-weight: 700; font-size: var(--fs-caption); }
.sb-pl small { color: var(--text-muted); }
.sb-qed { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3) !important; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--success-bg); color: var(--success-fg); font-weight: 700; font-size: var(--fs-small); }

/* كود */
.sb-code { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); }
.sb-code .sm-code { margin: 0; border-radius: initial; }
.sb-notes { padding: var(--space-3) var(--space-4); background: var(--bg-surface-1); font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.8; }
.sb-notes b { display: inline-block; min-width: 2.4em; color: var(--tone); }
.sb-code .sb-why { padding: 0 var(--space-4) var(--space-3); border-radius: initial; background: var(--bg-surface-1); }

/* الحاسب: البطاقات أعرض */
@media (min-width: 900px) {
  .sb-fc { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
/* المعادلات بشكلها العلمي (js/math.js، MathML من المتصفح): البسط فوق والمقام تحت، بلون النص */
math { color: inherit; direction: ltr; math-style: normal; }
math[display="block"] { font-size: var(--fs-sheet-title); }
/* المعادلة الطويلة تتمرر داخل صندوقها (لا تطلع برا الشاشة)، وتبدأ من أولها: القصيرة بالوسط، والطويلة من اليسار */
.sb-eq { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.sb-eq math { font-style: normal; display: block math; width: max-content; max-width: none; margin-inline: auto; }
.sb-eq .sb-c1 { color: var(--accent-primary); } .sb-eq .sb-c2 { color: var(--semantic-success); } .sb-eq .sb-c3 { color: var(--semantic-warning); } .sb-eq .sb-c4 { color: var(--tc-blue); }
.sb-eqn math { font-size: inherit; }
/* رقاقة التفاعل HTML (msub يترك فراغاً: 6H₂ O) */
.sb-eqn .chem { font-family: math, 'Times New Roman', serif; font-weight: 400; white-space: nowrap; }
.chem sub, .chem sup, .sb sup { line-height: 0; }
/* الطباعة وPDF: الجواب ظاهر مع السؤال، والأسئلة المطوية مفتوحة */
@media print {
  .sb-card .sb-a { display: flex; }
  .sb-card .sb-tap { display: none; }
}
/* css/me.css */
/* منظّمي — مجموعة «أنا» (design-reference/identity/screens-me.css): «أنا» وقمرك والخزانة، الصندوق و«ليلة جديدة»، بطاقة المشاركة، وتلميح القمر.
   القوائم .list-panel/.list-row (components.css) وبداخلها .lead و.rt بشكل النموذج؛ الألوان والانحناءات والحركة من متغيرات نظام التصميم.
   ألوان ثابتة بحكم أصحابها: زر Apple (أسود/أبيض) وحرف G الرسمي بألوانه الأربعة. */
:root {
  --mz-apple-bg: #000; --mz-apple-fg: #fff; --mz-g-r: #EA4335; --mz-g-b: #4285F4; --mz-g-y: #FBBC05; --mz-g-g: #34A853;
  --mz-mot: var(--moon-dark); --mz-num-fs: 1.625rem;
  --mz-sel: 0 0 0 2px var(--surface-2), 0 0 0 3.5px var(--text); /* القطعة المختارة */
  --mz-lockring: 0 0 0 2px var(--surface);
  --mz-tile-line: 0 0 0 1px var(--line);
  --mz-on-line: inset 0 0 0 1px var(--text);
  --mz-fade-x: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); /* قناع شفافية لا لون */
  /* سحب رأس «أنا» وصفحاتها لتحت شريط الحالة: على الآيفون (حافة آمنة فوق) كما هو، وبلا حافة (أندرويد، المتصفح) لا سحب فلا ينقص الرأس */
  --mz-pull: calc(-1 * min(var(--main-top), env(safe-area-inset-top, 0px)));
}

/* ===== أساسيات المجموعة (ui.css في النموذج) */
.mz-sec { margin-top: 32px; }
.mz-sech0 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 10px; }
.mz-sech0 h2 { font: var(--t-head); margin: 0; }
.mz-sech0 a { font: 500 0.9375rem/1.25rem var(--font); color: var(--rose); text-decoration: none; }
.mz-box, .mz-panel { display: block; background: var(--surface); border-radius: var(--r-panel); border: 1px solid var(--line); box-shadow: var(--rim); color: inherit; text-decoration: none; }
.mz-box { padding: 20px; }
.mz-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-chip); background: var(--surface-2); font: var(--t-caption); color: var(--text); flex: none; }
.mz-tbtn { height: 36px; padding: 0; border: 0; background: none; font: 500 0.875rem/1.25rem var(--font); color: var(--rose); cursor: pointer; }
.mz-b52 { height: 52px; }
.mz-full { width: 100%; }
.mz-list .list-row { color: inherit; text-decoration: none; width: 100%; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.mz-list .list-row:is(a, button):active { background: var(--surface-2); }
.mz-list .lead { width: 40px; display: grid; place-items: center; flex: none; }
.mz-list .rt { flex: 1; min-width: 0; }
.mz-list .rt b { display: block; font: 500 1rem/1.5rem var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-list .rt small { display: flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.mz-list .chev { color: var(--text-3); flex: none; }
.ic.t2 { color: var(--text-2); }
.mz-val { font: var(--t-label); color: var(--text-2); white-space: nowrap; display: inline-flex; align-items: center; }
.mz-val .is-moon { color: var(--moon); }
.mz-legal, .me-foot { text-align: center; font: var(--t-caption); color: var(--text-3); margin: 24px 0; }
.mz-legal a, .me-foot a { color: var(--text-2); text-decoration: none; }
.me-foot a { text-decoration: underline; text-underline-offset: 3px; } /* بين نص: الرابط يتميّز بغير اللون (a11y) */
.mz-radio { width: 22px; height: 22px; border-radius: var(--r-pill); border: 1.5px solid var(--text-3); flex: none; display: grid; place-items: center; }
.mz-radio.on { border-color: var(--text); }
.mz-radio.on::after { content: ''; width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--text); }
.mz-tog { position: relative; width: 51px; height: 31px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--surface-3); flex: none; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.mz-tog::after { content: ''; position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: var(--r-pill); background: var(--text-2); transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.mz-tog.on { background: var(--text); }
.mz-tog.on::after { transform: translateX(-20px); background: var(--surface); }
.mz-tog:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.mz-hz { position: absolute; inset-inline: 0; height: 1px; pointer-events: none; }
.mz-hz i { position: absolute; left: -10%; right: -10%; top: -150px; height: 300px; background: radial-gradient(ellipse 46% 50% at 50% 50%, var(--dawn), transparent 72%); opacity: calc(var(--dawn-a) * .55); }

/* ===== أنا: الرأس والقمر والمسار ونقاط الليلة */
.mz-mepage.mz-in { animation: mz-fade var(--dur-2) var(--ease-out) both; }
@keyframes mz-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mz-halo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.mz-halo path, .mz-halo .h2 { stroke: var(--moon); stroke-opacity: .26; fill: none; }
.mz-halo .h2 { stroke-opacity: .18; } .mz-halo .h2.rb { stroke: var(--dawn); stroke-opacity: .4; stroke-width: 2; } .mz-halo .hc { fill: var(--moon); opacity: .5; }
.mz-trk { overflow: visible; flex: none; }
.mz-trk path { fill: none; stroke-linecap: round; }
.mz-trk .past { stroke: var(--text-2); stroke-opacity: .6; stroke-width: 2; }
.mz-trk .fut { stroke: var(--text-3); stroke-width: 1.6; stroke-dasharray: 2 4; }
.mz-trk text { font: var(--t-caption); fill: var(--text-3); }
.mz-light .fill, .mz-light .halo { transform-box: fill-box; transform-origin: center; }

/* ===== مجرّتك، خزانتك، الأرقام، الإعدادات */
.mz-ward { padding: 12px; }
.mz-wtabs.tab-bar { margin-bottom: 0; }
.mz-wtabs .tab-btn { flex: auto; padding: 0 10px; font: 500 0.8125rem/1.25rem var(--font); }
.mz-wtabs .tab-btn.active { font-weight: 700; }
.mz-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; padding: 12px 0 6px; }
.mz-item { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 12px 4px 10px; border: 0; border-radius: var(--r-field); background: none; color: var(--text); text-align: center; font: inherit; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.mz-item.sel { background: var(--surface-2); }
.mz-item.sel .mz-tile { box-shadow: var(--mz-sel); }
.mz-item b { font: var(--t-caption); margin-top: 10px; white-space: nowrap; }
.mz-item small { font: var(--t-micro); color: var(--text-3); }
.mz-item.worn small { color: var(--moon); }
.mz-item.lock .mz-tile .bg { fill: var(--surface-3); } .mz-item.lock .mz-tile .mot, .mz-item.lock .mz-tile .disc, .mz-item.lock .mz-tile .core, .mz-item.lock .mz-tile .eng { --mz-mot: var(--text-3); opacity: .55; }
.mz-item.lock b { color: var(--text-2); }
.mz-item:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.mz-tw { position: relative; display: block; width: 56px; height: 56px; }
.mz-tile { display: block; border-radius: var(--r-field); }
.mz-tile .bg { fill: var(--moon-disc-0, var(--moon-disc)); } /* لون المظهر الأصلي حتى لو لبس الطالب سطحاً (js/wear.js) */
.mz-tile .mot { fill: none; stroke: var(--mz-mot); stroke-width: 1.6; stroke-linejoin: round; opacity: .42; }
.mz-tile .mot .f { fill: var(--mz-mot); stroke: none; }
.mz-tile.comp .bg { fill: var(--surface-2); }
.mz-tile.comp .core { fill: var(--moon-dark); stroke: var(--line); }
.mz-tile.comp .disc { fill: var(--mz-skin, var(--moon-disc-0, var(--moon-disc))); }
.mz-tile.comp .ring { fill: none; stroke: var(--moon); stroke-opacity: .3; }
.mz-tile.comp .ring.rb { stroke: var(--dawn); stroke-opacity: .5; stroke-width: 2; }
.mz-tile.comp .eng { fill: var(--moon); opacity: .75; }
.mz-lock { position: absolute; bottom: -4px; left: -4px; width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); display: grid; place-items: center; box-shadow: var(--mz-lockring); }
.mz-wfoot { display: flex; align-items: center; gap: 12px; padding: 12px 4px 2px; border-top: 1px solid var(--line); margin-top: 6px; text-align: start; }
.mz-wfoot .grow { flex: 1; min-width: 0; }
.mz-wfoot b { font: 700 0.9375rem/1.25rem var(--font); display: block; }
.mz-wfoot small { font: var(--t-caption); color: var(--text-2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-wlock { font: var(--t-caption); color: var(--text-3); white-space: nowrap; }
.mz-wlink { display: flex; justify-content: center; margin-top: 4px; }
.mz-wlink .btn { font: 500 0.875rem/1.25rem var(--font); }
.mz-srow { min-height: 60px; padding-block: 8px; }
.mz-srow .rt b { font-weight: 500; }
.mz-mewide { display: grid; grid-template-columns: 420px 1fr; gap: 40px; align-items: start; }
.mz-mecol2 { min-width: 0; }
.mz-inplace { padding-top: 4px; }
.mz-ipback { display: inline-flex; align-items: center; gap: 4px; height: 36px; font: var(--t-label); color: var(--text-2); margin-inline-start: -6px; text-decoration: none; }
.mz-iph { font: var(--t-title); margin: 4px 0 16px; }

/* ===== قمرك */
.mz-msheet { text-align: center; }
.sheet-panel:has(.mz-msheet) { padding: 10px 20px max(48px, calc(var(--space-6) + env(safe-area-inset-bottom))); }
.sheet-panel:has(.mz-msheet) .sheet-title { text-align: center; font: var(--t-head); margin: 8px 0 10px; }
.mz-nightn { font: var(--t-label); color: var(--moon); margin-top: 2px; }
.mz-track { margin-top: var(--space-3); height: 60px; display: flex; justify-content: center; }
/* الإتقان يكبّر القمر (design-reference/me-mastery): سطر الإتقان تحت المسار، ومفتاح ليلة الإتقان في «قمرك» */
.mm-line { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: var(--space-3) auto 0; padding: var(--space-1) var(--space-3); max-width: 100%; color: inherit; text-decoration: none; border-radius: var(--r-field); }
.mm-line:active { background: var(--surface-2); }
.mm-pts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); } .mm-pts .hm-pt { width: 6px; height: 6px; border-width: 1px; } .mm-pts .hm-pt > i { inset: -1px; }
.mm-t { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--t-label); color: var(--text-2); white-space: nowrap; } .mm-t b, .mm-t .moon-t { font-weight: 700; color: var(--moon); } .mm-t .moon-t { font-weight: inherit; }
.mm-key { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0 0 var(--space-4); font: var(--t-caption); color: var(--text-2); } .mm-key svg { flex: none; overflow: visible; }
.mz-inplace .mm-key { margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-block: 0; }
@media (min-width: 768px) { .mm-line { margin-top: var(--space-4); } }
.mz-rule-r { font: var(--t-read); color: var(--text); text-wrap: pretty; margin: 0; }
.mz-inplace .mz-rule-r { max-width: 520px; text-wrap: balance; }
.mz-phases { display: flex; justify-content: space-between; margin: 24px 0 20px; }
.mz-phases > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mz-phases b { font: var(--t-caption); color: var(--text-2); }
.mz-phases .cur b { color: var(--moon); font-weight: 700; }
.mz-phases small { font: var(--t-micro); color: var(--moon); margin-top: -6px; }
.mz-pg { overflow: visible; }
.mz-pg .o { fill: none; stroke: var(--text-3); stroke-width: 1.5; }
.mz-pg .l { fill: var(--text-3); opacity: .28; }
.mz-pg.cur .o { stroke: var(--moon); stroke-opacity: .6; } .mz-pg.cur .l { fill: var(--moon); opacity: .3; }
.mz-mcount { border-top: 1px solid var(--line); padding-top: 16px; }
.mz-mcount b { display: block; font: 700 1.0625rem/1.5rem var(--font); color: var(--moon); }
.mz-mcount small { font: var(--t-caption); color: var(--text-2); }
.mz-inplace .mz-phases, .mz-inplace .mz-mcount { background: var(--surface); }
.mz-inplace .mz-phases { border: 1px solid var(--line); border-radius: var(--r-panel) var(--r-panel) 0 0; padding: 20px 8px; margin-bottom: 0; border-bottom: 0; }
.mz-inplace .mz-mcount { border: 1px solid var(--line); border-end-start-radius: var(--r-panel); border-end-end-radius: var(--r-panel); padding: 16px 20px; text-align: center; }

/* ===== ليلة جديدة والصندوق: طبقة ملء الشاشة، والصفحة تحتها تختفي */
.mz-solo :is(#app-root, .mobile-nav, .metcircle) { opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.mz-nn { position: fixed; inset: 0; z-index: 400; display: flex; justify-content: center; overflow-y: auto; text-align: center; }
.mz-nn-scrim { position: fixed; inset: 0; background: var(--sky-0); opacity: .94; }
.mz-nn-in { position: relative; width: min(390px, 100%); height: 844px; flex: none; margin: auto 0; }
.mz-nn-moon { position: absolute; left: 50%; top: 150px; width: 240px; height: 240px; margin-left: -120px; display: grid; place-items: center; }
.mz-nn-moon > span { grid-area: 1 / 1; display: grid; }
.mz-nn-moon > .o { opacity: 0; }
.mz-nn-dot { position: absolute; left: 50%; top: -34px; width: 16px; height: 16px; margin-left: -8px; border-radius: var(--r-pill); opacity: 0; z-index: 3; }
.mz-nn-dot.r { border: 2.4px solid var(--rose); } .mz-nn-dot.m { background: var(--moon); }
.mz-nn-t { position: absolute; top: 430px; inset-inline: 16px; font: var(--t-title); margin: 0; }
.mz-nn-n { position: absolute; top: 472px; inset-inline: 16px; font: var(--t-label); color: var(--moon); }
.mz-roll { display: inline-grid; height: 20px; overflow: hidden; vertical-align: top; }
.mz-roll i { grid-area: 1 / 1; font-style: normal; } .mz-roll .o { opacity: 0; }
.mz-nn-track { position: absolute; top: 508px; inset-inline: 16px; display: flex; justify-content: center; }
.mz-nn-cap { position: absolute; top: 604px; inset-inline: 16px; font: var(--t-label); color: var(--text-2); margin: 0; }
.mz-nn-btns { position: absolute; top: 680px; inset-inline: 16px; display: grid; gap: 10px; }

/* ===== بطاقة المشاركة */
.mz-share { text-align: center; }
.sheet-panel:has(.mz-share) { padding: 10px 16px max(40px, calc(var(--space-6) + env(safe-area-inset-bottom))); }
.sheet-panel:has(.mz-share) .sheet-title { text-align: center; font: var(--t-head); margin: 6px 0 14px; }
.mz-card { position: relative; display: block; width: 252px; height: 448px; margin: 0 auto; border-radius: var(--r-field); overflow: hidden; background: linear-gradient(180deg, var(--sky-top), var(--sky-horizon)); box-shadow: var(--mz-tile-line); }
.mz-card-st { position: absolute; inset: 0; fill: var(--star); opacity: .7; }
.mz-card-m { position: absolute; top: 74px; left: 64px; }
.mz-card-t { position: absolute; top: 240px; inset-inline: 12px; font: 700 1rem/1.5rem var(--font); }
.mz-card-s { position: absolute; top: 266px; inset-inline: 12px; font: 500 0.6875rem/1rem var(--font); color: var(--moon); }
.mz-card-h { position: absolute; top: 330px; inset-inline: 0; height: 30px; }
.mz-card-h .mz-hz { top: 30px; } .mz-card-h .mz-sil { top: 2px; left: 0; }
.mz-card-f { position: absolute; bottom: 22px; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mz-card-f > span:last-child { font: 500 0.625rem/0.875rem var(--font); color: var(--text-2); direction: ltr; }
.mz-sh-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 10px; }
.mz-share .btn { gap: 8px; }

/* ===== تلميح قمرك فوق الشريط */
.mo-tip { position: fixed; z-index: 151; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3);
  border-radius: var(--r-field); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-float); color: var(--text); text-decoration: none;
  opacity: 0; transform: translateY(6px); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring); }
.mo-tip.is-in { opacity: 1; transform: none; }
.mo-tip b { display: block; font: var(--t-caption); font-weight: 700; }
.mo-tip small { font: var(--t-micro); color: var(--text-3); }
.mo-tip::after { content: ''; position: absolute; top: 100%; left: var(--mo-a, 50%); margin-left: -7px; border: 7px solid transparent; border-top-color: var(--surface); }

/* ===== صفحات «أنا» الفرعية: رجوع، عنوان كبير وسطر، وعنوان مختصر عند التمرير */
.mz-pbar { height: 44px; margin: -12px -6px 8px; display: flex; align-items: center; }
.mz-notif, .mz-gpa, .mz-ap, .mz-prefs { display: flow-root; } /* هامش شريط الرجوع السالب لا يندمج بهامش الصفحة */
@media (max-width: 767px) { .mz-notif, .mz-gpa, .mz-ap, .mz-prefs { margin-top: var(--mz-pull); } }
.mz-prefs .mz-title + .mz-sec { margin-top: 20px; }
.mz-iconbtn { width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--text); flex: none; }
.mz-iconbtn:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
.mz-title { font: var(--t-title); margin: 0; }
.mz-psub { font: var(--t-label); color: var(--text-2); margin: 2px 0 16px; }
.mz-ibar { position: fixed; top: 0; inset-inline: 0; z-index: 140; height: calc(44px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  background: var(--sky-0); border-bottom: 1px solid var(--line); opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out); }
.mz-ibar.is-on { opacity: 1; pointer-events: auto; }
.mz-ibar b { text-align: center; font: 700 1.0625rem/1.5rem var(--font); }
@media (min-width: 768px) { .mz-ibar { display: none; } }
.mz-sech { margin-top: 28px; }
.mz-nrows .list-row { min-height: 64px; }
.mz-nrow { cursor: pointer; }
.mz-nrow .mz-tog { pointer-events: none; }
.mz-na { flex: none; overflow: visible; }
.mz-qcard { padding: 12px 16px 16px; display: flex; flex-direction: column; align-items: center; }
.mz-qcard p { font: var(--t-caption); color: var(--text-2); margin: 4px 0 0; }
.mz-arcbox { position: relative; touch-action: none; border-radius: var(--r-field); }
.mz-arcbox:focus-within { outline: 2px solid var(--rose); outline-offset: 4px; }
.mz-harc { overflow: visible; display: block; }
.mz-harc .mz-hd { cursor: grab; }
.mz-harc .mz-hl { font: 700 0.875rem/1.25rem var(--font); fill: var(--text); }
.mz-harc .mz-he { font: var(--t-caption); fill: var(--text-3); }
.mz-harc .mz-hc { font: var(--t-caption); fill: var(--text-2); }
.mz-harc .mz-hn { font: var(--t-subtitle); fill: var(--text); }
.mz-list .list-row.mz-tone { min-height: 56px; padding-block: 0; }
.mz-tone .lead { align-self: stretch; }
.al-play.mz-play { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--surface-2); display: grid; place-items: center; color: var(--text); cursor: pointer; }
.al-play.mz-play.is-playing { background: var(--text); color: var(--surface); }
.mz-tone-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; align-self: stretch; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.mz-tone .rt b { font-weight: 400; }
.mz-note { font: var(--t-caption); color: var(--text-2); margin: 10px 4px 0; }
.mz-winsheet { text-align: center; padding-bottom: 8px; }
.mz-winsheet .mz-arcbox { display: inline-block; margin-top: 24px; }

/* ===== المعدل */
.mz-gpacard { padding: 18px 16px 14px; line-height: 1.625rem; }
.mz-gpa .mz-sech0 .mz-tbtn { height: 20px; font: 500 0.9375rem/1.25rem var(--font); }
.mz-gclose { margin-top: 16px; }
.mz-list .list-row.mz-need::after { display: none; }
.mz-gpacard > small { font: var(--t-caption); color: var(--text-2); }
.mz-gpa-top { display: flex; align-items: flex-end; justify-content: space-between; }
.mz-gpa-n { display: flex; align-items: baseline; gap: 8px; }
.mz-gpa-n b { font: var(--t-num-xl); color: var(--moon); }
.mz-gpa-n span { font: var(--t-head); color: var(--text-2); }
.mz-gpa-exp { text-align: end; padding-bottom: 8px; }
.mz-gpa-exp small { display: block; font: var(--t-caption); color: var(--text-2); }
.mz-gpa-exp b { font: 700 1.25rem/1.625rem var(--font); }
.mz-gpa-ph { font: var(--t-caption); color: var(--text-3); margin: 10px 0 2px; }
.mz-path { display: block; margin: 0 auto; overflow: visible; }
.mz-path .pa { fill: none; stroke: var(--text-2); stroke-opacity: .6; stroke-width: 2; stroke-linecap: round; }
.mz-path .fu { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.mz-path .mo { fill: var(--moon); } .mz-path .fd { fill: var(--surface); stroke: var(--text-3); stroke-width: 1.4; } .mz-path .ln { stroke: var(--line); stroke-width: 1; }
.mz-gl { font: 500 0.75rem/1rem var(--font); fill: var(--text-2); } .mz-gl.now { fill: var(--moon); }
.mz-gpa-cap { font: var(--t-caption); color: var(--text-2); text-align: center; margin: 2px 0 0; }
.mz-gtabs.tab-bar { margin: 20px 0 0; }
.mz-gtabs .tab-btn { flex: 1; }
.mz-gterm .list-row, .mz-arch .list-row { min-height: 64px; }
.mz-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 32px; padding: 0 12px; border-radius: var(--r-chip); background: var(--surface-2); font: 700 0.9375rem/1.25rem var(--font); color: var(--text); flex: none; }
.mz-needp.list-panel { margin-bottom: 0; }
.mz-need { min-height: 0; padding-block: 14px 8px; }
.mz-chip { position: relative; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-chip); background: var(--surface-2); font: var(--t-caption); font-weight: 700; color: var(--text); cursor: pointer; }
.mz-chip::after { content: ''; position: absolute; inset: -9px -1px; }
.mz-list .mz-need .rt small { overflow: visible; }
.mz-needr { font: var(--t-label); color: var(--text-2); padding: 0 68px 14px 16px; margin: -4px 0 0; }
.mz-needr span { display: block; }
.mz-needr b { color: var(--text); } .mz-needr .is-danger { color: var(--ember); } .mz-needr .is-danger b { color: inherit; }
.mz-rule { font: var(--t-caption); color: var(--text-3); margin: 10px 4px 0; }
.mz-rule button { padding: 0; border: 0; background: none; font: inherit; color: var(--rose); cursor: pointer; }
.mz-tr .list-row { --row-lead: 0px; min-height: 60px; }
.mz-tr .mz-trh[aria-expanded="true"]::after { display: none; }
.mz-sub2 { padding: 0 var(--space-4) 10px; }
.mz-subr { display: flex; align-items: center; gap: 10px; height: 36px; font: var(--t-label); color: var(--text-2); text-decoration: none; }
.mz-subr .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-subr small { font: var(--t-caption); color: var(--text-3); }
.mz-subr b { color: var(--text); font: 700 0.875rem/1.25rem var(--font); min-width: 24px; text-align: end; }
.mz-exp.btn { display: flex; width: 100%; gap: 8px; margin-top: 8px; color: var(--rose); }
.mz-anote { display: flex; align-items: center; gap: 8px; font: var(--t-caption); color: var(--text-2); margin: -2px 4px 12px; }
.mz-stack { width: 56px; display: flex; justify-content: flex-start; }
.mz-stack .planet + .planet { margin-inline-start: -10px; box-shadow: var(--mz-lockring); }
.mz-gsheet { padding-bottom: 8px; }
.mz-gs-h { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; text-align: start; }
.mz-gs-h b { display: block; font: var(--t-head); } .mz-gs-h small { font: var(--t-caption); color: var(--text-2); }
.mz-ggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mz-ggrid button { height: 60px; border: 0; border-radius: var(--r-field); background: var(--surface-2); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; font: inherit; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.mz-ggrid button.on { background: var(--surface-3); box-shadow: var(--mz-on-line); }
.mz-ggrid b { font: 700 1.125rem/1.5rem var(--font); } .mz-ggrid small { font: var(--t-caption); color: var(--text-2); }
.mz-ggrid button:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.mz-gs-t.list-panel { margin: 16px 0 0; } .mz-gs-t .list-row { min-height: 60px; }
.mz-gs-more { margin-top: 8px; }
.mz-gph { margin-bottom: 28px; }
.mz-g3 { display: grid; grid-template-columns: 350px minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.mz-sec24 { margin-top: 24px; }
@media (max-width: 1365px) { .mz-g3 { grid-template-columns: 330px minmax(0, 1fr); } .mz-g3 > :last-child { grid-column: 2; } .mz-g3 > :nth-child(2) { grid-row: 1; grid-column: 2; } }

/* ===== تبديل المظهر (ليلي/أسود خالص، views.meThemeFade): الشكل القديم يذوب في الجديد بالشفافية، وبلا View Transitions ستارة بلون السماء */
html.mz-tvt::view-transition-old(root) { animation: mz-tout var(--dur-2) var(--ease-out) both; }
html.mz-tvt::view-transition-new(root) { animation: mz-tin var(--dur-2) var(--ease-out) both; }
@keyframes mz-tout { to { opacity: 0; } }
@keyframes mz-tin { from { opacity: 0; } }
.mz-veil { position: fixed; inset: 0; z-index: 1000; background: var(--sky-0); opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out); }
.mz-veil.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mz-veil { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
  .mz-ibar { transition: none; }
  .mz-mepage.mz-in { animation: none; }
  .mo-tip, .mz-tog, .mz-tog::after, .mz-item, .mz-solo :is(#app-root, .mobile-nav, .metcircle) { transition: none; }
}

/* ——— باكج الثقة (js/trust-pack.js، design-reference/trust-pack): الشارة، شاشة الترحيب وصندوق المؤسس، ولوح الدعوة ——— */
.tp-badge { position: relative; flex: none; display: grid; place-items: center; }
.tp-badge svg { display: block; width: 100%; height: 100%; }
.tp-badge .tp-ring { fill: none; stroke: var(--on-planet); stroke-opacity: .28; stroke-width: 1.5; }
.tp-badge .tp-spark { fill: var(--on-planet); fill-opacity: .7; }
.tp-no { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 6%; font: var(--t-head); color: var(--on-planet); }
.tp-badge.sm { width: 44px; height: 44px; }
.tp-badge.sm .tp-no { font: var(--t-micro); font-weight: 700; }
.tp-badge.lg { width: 116px; height: 116px; }
.tp-badge.lg .tp-no { font: var(--t-num-s); }
.tp-ov .mz-nn-in { height: auto; min-height: 100%; display: flex; }
.tp-stage { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 72px 16px 40px; }
.tp-eye { font: var(--t-label); color: var(--moon); }
.tp-stage .tp-h { font: var(--t-display); margin: 0; } /* مو select.tp-h في منتقي الساعة (FR-5) */
.tp-lead { color: var(--text-2); max-width: 30ch; margin: 0; }
.tp-seats { display: inline-flex; gap: 6px; align-items: center; font: var(--t-label); color: var(--text-2); background: var(--surface-2); border-radius: var(--r-pill); padding: 6px 14px; }
.tp-seats b { color: var(--moon); }
.tp-chest { position: relative; display: grid; place-items: center; width: 190px; height: 190px; margin-top: 4px; }
.tp-chest::before { content: ""; position: absolute; inset: -12%; background: var(--glow-moon); }
.tp-chest svg { position: relative; }
.tp-cname { font: var(--t-head); margin: 0; }
.tp-cap { font: var(--t-caption); color: var(--text-3); margin: 0; }
.tp-btns { display: grid; gap: 10px; width: 100%; margin-top: 8px; }
.tp-note { display: flex; gap: 12px; align-items: flex-start; width: 100%; background: var(--moon-wash); border-radius: var(--r-field); padding: 12px 14px; text-align: start; }
.tp-note svg { flex: none; margin-top: 3px; color: var(--moon); }
.tp-note p { margin: 0; }
.tp-note b { color: var(--moon); }
@media (prefers-reduced-motion: no-preference) {
  .tp-ov .mz-nn-scrim { animation: mz-tin var(--dur-2) var(--ease-out) both; }
  .tp-stage > * { animation: mz-fade var(--dur-3) var(--ease-out) both; }
  .tp-stage > :nth-child(n + 4) { animation-delay: 60ms; }
  .tp-stage > :nth-child(n + 6) { animation-delay: 120ms; }
}
.tp-sec .mz-tag { color: var(--moon); background: var(--moon-wash); }
.tp-inv { display: flex; flex-direction: column; gap: 16px; }
.tp-icard { display: flex; flex-direction: column; gap: 14px; }
.tp-icard p { margin: 0; color: var(--text-2); }
.tp-icard p b { color: var(--moon); }
.tp-irow { display: flex; align-items: baseline; gap: 8px; color: var(--text-2); }
.tp-big { font: var(--t-num-l); color: var(--moon); }
.tp-dots { display: flex; gap: 8px; }
.tp-dots i { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); }
.tp-dots i.on { background: var(--moon); }
.tp-link { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; border: 0; background: var(--surface-2); border-radius: var(--r-field); padding: 12px 14px; font: var(--t-label); color: var(--text-2); cursor: pointer; }
.tp-link bdi { flex: 1; direction: ltr; text-align: left; }
.tp-link:active { transform: scale(var(--press-scale)); }
.pp-plan-price .tp-was { display: block; font: var(--t-caption); color: var(--text-3); text-decoration: line-through; }
/* أزرار باكج الثقة ذهبية مثل النموذج المعتمد (design-reference/trust-pack/trust.css .btn) */
.btn-primary.tp-gold, .btn-primary.tp-gold:active:not(:disabled) { background-color: var(--moon); color: var(--on-planet); }
@media (hover: hover) { .btn-primary.tp-gold:hover:not(:disabled) { background-color: var(--moon); color: var(--on-planet); } }

/* «الأذكار» (js/adhkar.js، design-reference/adhkar): العدّاد حلقة تمتلي، والتبويب يتلاشى ويرجع */
.adk-body { transition: opacity var(--dur-1) var(--ease-out); }
.adk-body.out { opacity: var(--pg-dim); } /* يخفت لنصفه مثل الصفحات، لا ينطفي ثم يضوي */
.adk-tabs { margin-bottom: var(--space-4); }
.adk-prog { display: flex; align-items: center; gap: var(--space-3); margin: 0 4px var(--space-3); font: var(--t-caption); color: var(--text-2); }
.adk-prog > i { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.adk-prog > i > i { display: block; height: 100%; background: var(--moon); transform-origin: right; transition: transform var(--dur-2) var(--ease-out); }
.adk-row { align-items: center; gap: var(--space-3); text-align: start; width: 100%; transition: opacity var(--dur-2) var(--ease-out); }
.adk-row .rt { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.adk-t { font: var(--t-read); color: var(--text); transition: color var(--dur-2) var(--ease-out); }
.adk-row small { font: var(--t-caption); color: var(--text-3); }
.adk-row small em { font-style: normal; color: var(--moon); }
.adk-ct { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.adk-ct .ring { position: absolute; inset: 0; }
.adk-ct b { position: relative; font: var(--t-label); font-weight: 700; color: var(--text); }
.adk-ct b svg { color: var(--moon); }
.adk-row.done .adk-t { color: var(--text-3); }
.adk-prow { padding-block: var(--space-2) var(--space-3); }
.adk-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.adk-chip { min-height: 32px; padding: 6px 12px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); font: var(--t-caption); color: var(--text-2); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.adk-chip.on { background: var(--text); color: var(--surface); }
.adk-prow[hidden] { display: none; }
.adk-note { font: var(--t-caption); color: var(--text-2); margin: 10px 4px 0; }

/* «أنا» الجولة الثالثة (s5-me) */
.me-col, .mz-mecol { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.me-col > .mz-sec, .mz-mecol > .mz-sec { margin-top: 0; }
.me-head { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); }
@media (max-width: 767px) { .me-r3 .me-head { margin-top: calc(-1 * min(var(--space-3), env(safe-area-inset-top, 0px))); } }
.me-av { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font: var(--t-subtitle); }
.me-id { flex: 1; min-width: 0; }
.me-name { font: var(--t-title); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-line { font: var(--t-label); color: var(--text-2); margin: 2px 0 0; }
.me-setuni { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.me-gear { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.me-plus { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--rim), var(--shadow-float); }
.me-plus-h { display: flex; align-items: center; gap: var(--space-2); }
.me-plus-h b { font: var(--t-subtitle); }
.me-ptag { display: inline-grid; place-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--rose) 55%, transparent); color: var(--rose); font: var(--t-caption); font-weight: 700; flex: none; }
.me-plus p { margin: var(--space-2) 0 var(--space-4); font: var(--t-body); color: var(--text); }
.me-plus-act { display: flex; align-items: center; gap: var(--space-3); }
.me-plus-act .btn { flex: 1; min-height: 52px; border-radius: var(--r-pill); }
.me-plus-act small { font: var(--t-caption); color: var(--text-2); flex: none; }
.me-plusline { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: 10px var(--space-4); margin: 0; color: var(--text); text-decoration: none; }
.me-plusline .grow { flex: 1; min-width: 0; } .me-plusline b { display: block; font: var(--t-head); } .me-plusline small { display: block; font: var(--t-caption); color: var(--text-2); }
.me-moon { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--rim); overflow: hidden; }
.me-moonlink { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-4); color: var(--text); text-decoration: none; position: relative; z-index: 1; }
.me-moondisc { position: relative; width: 88px; height: 88px; flex: none; display: grid; place-items: center; }
.me-moondisc .mz-halo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.me-mt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.me-mt b { font: var(--t-subtitle); }
.me-mt small { font: var(--t-label); color: var(--text-2); }
.me-pts { display: flex; flex-wrap: wrap; gap: var(--space-3); font: var(--t-label); color: var(--text-2); }
.me-pts > span { display: inline-flex; align-items: center; gap: 6px; }
.me-pts > span.on { color: var(--text); }
.me-nights { flex: none; display: flex; flex-direction: column; align-items: center; padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--line); position: relative; z-index: 1; }
.me-nights b { font: var(--t-num-l); } .me-nights small { font: var(--t-label); color: var(--text-2); }
.me-chestb { flex-basis: 100%; min-height: 48px; border-radius: var(--r-pill); position: relative; z-index: 1; }
.me-scene { position: absolute; inset-inline: 0; bottom: 0; opacity: .5; pointer-events: none; }
.me-list { margin: 0; }
.me-list .list-row { color: var(--text); min-height: 64px; }
.me-list .lead { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: var(--r-row); background: var(--surface-2); color: var(--text); }
.me-list .list-row-main b { display: block; font: var(--t-head); }
.me-list .list-row-main small { display: block; font: var(--t-caption); color: var(--text-2); margin-top: 2px; }
.me-list .chev { color: var(--text-3); flex: none; }
.me-badge { min-width: 26px; height: 26px; padding: 0 7px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--rose); color: var(--on-rose); font: var(--t-caption); font-weight: 700; flex: none; }
.me-wsheet .mz-ward { padding: 0; border: 0; background: none; box-shadow: none; }
.me-wsheet .mz-sech0 { display: none; }
@media (min-width: 768px) and (max-width: 1179.98px) { .me-col { max-width: 640px; margin-inline: auto; } }
.me-list .list-row { width: 100%; border: 0; background: none; font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.me-list .list-row:active, .sp-list .list-row:active { background: var(--surface-2); }
.sp-list .list-row { width: 100%; border: 0; background: none; font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.rt small .me-em { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* MM-6: الحالة قبل الإيميل، والإيميل الطويل ينقص بـ… */
/* LY-4: وصف الصف نص بس (بلا أيقونة) ينقص بـ… بدل ما ينقطع، مع تكبير النص؛ وتبويبات المعدل تنزل سطر ثاني مثل تبويبات المادة */
.mz-list .rt small:not(:has(> *)) { display: block; text-overflow: ellipsis; }
.mz-gtabs.tab-bar { flex-wrap: wrap; height: auto; min-height: 40px; }
.mz-gtabs .tab-btn { flex: 1 0 0; min-width: max-content; height: 34px; }
.mz-list .rt small > span:only-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* css/study-place.css */
/* منظّمي — «ذاكر» (#/study، js/study-hub.js، s4-study-*.png): البطل، الأدوات الأربع، اللوح، وتحتها أرقام الأسبوع. متغيرات النظام فقط. */

.sp { display: grid; gap: var(--space-4); padding-block-end: var(--space-8); }
.sp-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.sp-head { padding-block: var(--space-2) 0; }
.sp-t { font: var(--t-title); color: var(--text); margin: 0; }
.sp-sub { font: var(--t-label); color: var(--text-2); margin-top: 2px; }
.sp-off { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-row); background: var(--surface-2); color: var(--text-2); font: var(--t-caption); }
.sp-off .ic { flex: none; }

.sp-hero { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--rim), var(--shadow-float); }
.sp-cap { font: var(--t-label); color: var(--text-2); }
.sp-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-2); color: var(--text); min-width: 0; }
.sp-n { font: var(--t-num-xl); }
.sp-u { font: var(--t-subtitle); }
.sp-big small { font: var(--t-label); color: var(--text-2); }
.sp-name { font: var(--t-subtitle); display: flex; min-width: 0; max-width: 100%; }
.sp-name bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp-why { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--t-caption); color: var(--text-2); }
.sp-act { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.sp-go { flex: 1; min-height: 52px; border-radius: var(--r-pill); gap: var(--space-2); font: var(--t-button); }
.sp-timer { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); transition: transform var(--dur-1) var(--ease-out); }
.sp-timer:active { transform: scale(var(--press-scale)); }

.sp-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-4) var(--space-2); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--rim); position: relative; }
.sp-tool { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: var(--t-label); text-align: center; cursor: pointer; transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.sp-tool:active { transform: scale(var(--press-scale)); }
.sp-ti { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-lens); background: var(--surface-2); }
.sp-tools.off .sp-tool[aria-disabled="true"] { opacity: 0.45; }
.sp-tools.lift { z-index: 310; }
.sp-tool.on .sp-ti { background: var(--surface-3); }

.sp-list { margin: 0; }
.sp-list .list-row { min-height: 64px; color: var(--text); }
.sp-list .lead { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: var(--r-row); background: var(--surface-2); color: var(--text); }
.sp-list .list-row-main b { display: block; font: var(--t-head); }
.sp-list .list-row-main small { display: block; font: var(--t-caption); color: var(--text-2); margin-top: 2px; }
.sp-list .chev { color: var(--text-3); flex: none; }

.sp-more .sec { margin: 0; }
.sp-exsheet { display: grid; gap: var(--space-4); }
.sp-exsheet p { margin: 0; color: var(--text-2); font: var(--t-body); }

@media (min-width: 768px) {
  .sp { max-width: 640px; margin-inline: auto; }
  .sp-hero { padding: var(--space-6); }
}
@media (min-width: 1024px) {
  .sp { max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: var(--space-6); }
  .sp-more { padding-top: calc(var(--space-10) + var(--space-4)); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-tool, .sp-timer { transition: none; }
}
.sp-more > .list-panel, .sp-more > .sh-recent { margin-top: var(--space-4); }
/* css/sky-place.css */
/* منظّمي — «سماك» (#/sky?seg=…، js/sky-place.js): رأس «‹ أنا» و«سماك» وشريط القطع الثلاث. متغيرات النظام فقط. */

.skp-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 var(--space-3); }
.skp-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding-inline: 2px 10px; margin-inline-start: -8px; font: var(--t-label); color: var(--text-2); text-decoration: none; }
.skp-t { font: var(--t-title); color: var(--text); margin: 0; }
.tab-bar.skp-tabs { margin-bottom: var(--space-4); }
.skp-tabs .tab-btn { flex: 1; justify-content: center; }
.skp-page .fs-sub:first-of-type { margin-top: 0; }

/* مجرّتك: الرأس فوق الحقل، والعنوان والرقم تحته كما كانوا */
.skp-gx { position: relative; z-index: 3; padding: calc(env(safe-area-inset-top) + 4px) 6px 0; }
.skp-gx .skp-bar { margin-bottom: var(--space-2); }
.skp-gx .tab-bar.skp-tabs { margin-bottom: 0; background-color: color-mix(in srgb, var(--surface-2) 82%, transparent); }
.skp-gx + .gx-top { padding-top: var(--space-2); }
@media (min-width: 1024px) {
  .skp-gx { position: absolute; top: 24px; inset-inline-end: 32px; width: 420px; padding: 0; }
}
@media (min-width: 1024px) { .skp-gx + .gx-top { inset-inline-end: 476px; } }
/* قمر مجرّتك ينزل تحت رأس «سماك» حتى ما يغطي شريط القطع */
.skp-gx ~ .gm-moon { top: calc(env(safe-area-inset-top) + 212px); }
@media (min-width: 1024px) { .skp-gx ~ .gm-moon { top: 196px; } }
/* css/wrapped.css */
/* منظّمي — «سماي هالفصل» (js/wrapped.js، النموذج design-reference/batch2/b/wrapped.html و b2.css): القطعة الرابعة في «سماك»
   وقصصها فوق الشاشة كلها وبطاقة المشاركة. المتغيرات فقط، والحركة transform/opacity، وتقليل الحركة يوقفها. */

/* ===== شريط القطع الأربع (النموذج .tab-bar.four) */
.skp-tabs.four .tab-btn { padding-inline: 6px; font-size: var(--fs-callout); }

/* ===== القطعة: بطاقة الغلاف */
.wr-cover { margin-top: var(--space-4); padding: 22px 18px 18px; text-align: center; position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); }
.wr-cover h2 { font: var(--t-subtitle); color: var(--text); margin: 14px 0 0; }
.wr-cover p { font: var(--t-label); color: var(--text-2); margin: 4px 0 0; }
.wr-cover .wr-btn { margin-top: 16px; }
.wr-soon .wr-cons { opacity: 0.45; }
.wr-cap { font: var(--t-caption); color: var(--text-3); text-align: center; margin: 10px 0 0; }

/* الكوكبة (النموذج .const) */
.wr-cons { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.wr-cons line { stroke: var(--moon); stroke-opacity: 0.45; stroke-width: 1; }
.wr-cons circle.s { fill: var(--moon); }
.wr-cons circle.g { fill: var(--moon); opacity: 0.18; }
:root[data-theme="dawn"] .wr-cons line { stroke: var(--moon-ink); }
:root[data-theme="dawn"] .wr-cons circle { fill: var(--moon-ink); }

/* الأزرار (النموذج .b-btn) */
.wr-btn { height: 48px; border: 0; border-radius: var(--r-pill); padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--t-button); white-space: nowrap; cursor: pointer; transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.wr-btn:active { transform: scale(0.97); }
.wr-btn.ink { background: var(--ink); color: var(--on-ink); }
.wr-btn.second { background: var(--surface-2); color: var(--text); height: 44px; }
.wr-btn.full { width: 100%; }
.wr-btn svg { flex: none; }

/* ===== القصص فوق الشاشة كلها */
.wr-story { position: fixed; inset: 0; z-index: 900; background: linear-gradient(180deg, var(--sky-top), var(--sky-horizon)); color: var(--text);
  touch-action: none; -webkit-user-select: none; user-select: none; outline: none; }
:root[data-theme="dawn"] .wr-story { background: var(--sky-img) 50% 100% / cover no-repeat, linear-gradient(180deg, var(--sky-top), var(--sky-horizon)); }
.wr-bg { position: absolute; inset: 0; pointer-events: none; opacity: var(--stars-a, 1); }
.wr-bg svg { display: block; fill: var(--star); }
:root[data-theme="dawn"] .wr-bg { opacity: 0.25; }
.wr-in { position: relative; height: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 18px); }

.wr-prog { display: flex; gap: 4px; direction: rtl; }
.wr-prog i { flex: 1; height: 3px; border-radius: var(--r-mark); background: color-mix(in srgb, var(--text) 22%, transparent); overflow: hidden; }
.wr-prog b { display: block; height: 100%; background: var(--text); transform: scaleX(0); transform-origin: right; }
.wr-prog i.on b { transform: none; }
.wr-prog i.cur b { animation: wr-fill 6000ms linear forwards; }
.wr-story.paused .wr-prog i.cur b { animation-play-state: paused; }
.wr-story.still .wr-prog i.cur b { animation: none; transform: scaleX(0.45); }
@keyframes wr-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.wr-top { display: flex; align-items: center; justify-content: space-between; height: 48px; margin-top: 6px; }
.wr-who { display: flex; align-items: center; gap: 8px; font: var(--t-label); font-weight: 700; }
.wr-who small { font: var(--t-caption); color: var(--text-2); font-weight: 400; }
.wr-ib { width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--text); flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.wr-ib.glass { background: var(--glass-bg); border: 1px solid var(--glass-rim); box-shadow: var(--shadow-float); }

.wr-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 6px; position: relative; min-height: 0; }
.wr-stage.k-share { justify-content: flex-start; padding: 8px 0 0; }
.wr-body { will-change: auto; }
.wr-kick { font: var(--t-label); color: var(--text-2); }
.wr-hero { font: 700 4.5rem/1 var(--font); font-feature-settings: "tnum"; letter-spacing: -0.02em; margin-top: 6px; display: flex; align-items: baseline; gap: 10px; color: var(--text); }
.wr-hero small { font: var(--t-subtitle); letter-spacing: 0; }
.wr-hero.sm { font: var(--t-display); margin: 0; }
.wr-line { font: var(--t-subtitle); font-weight: 500; margin-top: 14px; color: var(--text-2); }
.wr-line b { color: var(--text); font-weight: 700; }
.wr-center { text-align: center; }
.wr-center h2 { font: var(--t-display); margin: 26px 0 0; color: var(--text); }
.wr-center p { font: var(--t-body); color: var(--text-2); margin: 8px 0 0; }
.wr-gentle .moonx { margin: 0 auto; }

/* شبكة الليالي (النموذج .ngrid): عمود لكل أسبوع والأول يمين */
.wr-grid { display: grid; grid-template-columns: repeat(var(--wk, 16), 1fr); gap: 9px 0; margin-top: 30px; direction: rtl; justify-items: center; align-items: center; }
.wr-grid i { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--line); }
.wr-grid i.on { width: 9px; height: 9px; background: var(--moon); }
.wr-grid i.top { box-shadow: var(--halo-moonrim-3); }
.wr-grid i.x { visibility: hidden; }
:root[data-theme="dawn"] .wr-grid i.on { background: var(--moon-ink); }
.wr-ax { display: flex; justify-content: space-between; font: var(--t-caption); color: var(--text-3); margin-top: 10px; }

/* المواد (النموذج .cbar) */
.wr-tc { display: flex; align-items: center; gap: 14px; margin-top: 14px; min-width: 0; }
.wr-tc .wr-hero { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.wr-bars { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.wr-cb { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 10px; font: var(--t-label); }
.wr-cb .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-cb .tr { height: 8px; border-radius: var(--r-mark); background: var(--line); overflow: hidden; }
.wr-cb .tr i { display: block; height: 100%; border-radius: var(--r-mark); background: var(--pi); transform-origin: right; }
.wr-cb .num { font-feature-settings: "tnum"; color: var(--text-2); text-align: end; }

/* السلسلة (النموذج .moons و.st-note) */
.wr-moons { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px; direction: rtl; }
.wr-note { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font: var(--t-body); color: var(--text-2); }
.wr-note b { color: var(--text); }

.wr-foot2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wr-hint { font: var(--t-caption); color: var(--text-3); }
.wr-btns { display: flex; gap: 10px; }
.wr-btns .wr-btn { flex: 1; }
.wr-btns .wr-btn.ink { flex: 2; }

/* ===== بطاقة المشاركة (النموذج .share-card) */
.wr-card { border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--rim); padding: 20px 20px 16px; position: relative; overflow: hidden; }
.wr-k { font: var(--t-caption); color: var(--text-2); display: flex; justify-content: space-between; }
.wr-card .wr-cons { margin-top: 4px; }
.wr-big { font: 700 3.5rem/1 var(--font); font-feature-settings: "tnum"; margin-top: 12px; display: flex; align-items: baseline; gap: 8px; color: var(--text); }
.wr-big small { font: var(--t-head); }
.wr-rows { margin-top: 14px; display: flex; flex-direction: column; }
.wr-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font: var(--t-label); color: var(--text-2); }
.wr-rows b { color: var(--text); font-feature-settings: "tnum"; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.wr-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font: var(--t-caption); color: var(--text-3); }
.wr-foot span { display: inline-flex; align-items: center; gap: 6px; }
.wr-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 0 6px; font: var(--t-label); color: var(--text); }
.wr-opt small { display: block; font: var(--t-caption); color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  .wr-prog i.cur b { animation: none; transform: scaleX(0.45); }
  .wr-btn { transition: none; }
}
/* css/settings-groups.css */
/* منظّمي — «الإعدادات» بمجموعاتها (#/prefs، s8-settings-*.png) وزر رجوع «حسابك». متغيرات النظام فقط. */

.sg-group { margin-top: var(--space-6); }
.mz-prefs .mz-title + .sg-group { margin-top: var(--space-4); }
.sg-h { font: var(--t-label); color: var(--text-2); margin: 0 var(--space-1) var(--space-2); }
.sg-group .list-panel { margin: 0; }
.sg-acct { min-height: 72px; }
.sg-av { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font: var(--t-head); flex: none; }
.sg-acct .rt { min-width: 0; }
.sg-acct .rt small { display: block; font: var(--t-caption); color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg .mz-srow .lead { color: var(--text-2); }
/* أيقونة كل صف في مربعها مثل صفوف «أنا» (s8-settings: المظهر، التنبيهات…)، لا أيقونة عارية */
.sg .mz-srow .lead:not(.sg-av) { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: var(--r-row); background: var(--surface-2); color: var(--text); }
.sg-ver { text-align: center; font: var(--t-caption); color: var(--text-3); margin: var(--space-6) 0; }

.mz-iconbtn.mz-backl { width: auto; display: inline-flex; gap: 2px; padding-inline: 6px 10px; font: var(--t-label); color: var(--text-2); text-decoration: none; }
.mz-iconbtn.mz-backl .ic { color: var(--text-2); }

.account-page { display: flow-root; }
@media (max-width: 767px) { #app-root > .mz-pbar:first-child { margin-top: var(--mz-pull, 0px); } }
/* css/chest.css */
/* منظّمي — الصندوق v3 (js/chest-art.js وchest-fx.js وchest-open.js وchest-odds.js، اعتمده المالك 22 أكتوبر، والغطاء الحاد 19:59).
   ألوان الندرة (--rar-*) وكسوات الصندوق (--chest-*) في css/base.css و«فجر» في css/dawn.css. الحركة كلها WAAPI بـ transform/opacity،
   والحالات الثابتة هنا: s-idle (قبل الانفجار) وs-done (النهاية)، والندرة الحالية في data-rar. بلا حركة CSS ولا زجاج. */

/* ===== الصندوق */
/* لقطات مولّدة بنفس المحاذاة (js/chest-art.js)، والطبقات فوقها: نور الشق بلون الندرة، ووهج القفل، ولمعة مقنّعة بصورة المقفل */
.ch { position: relative; display: block; width: var(--cx-s, 240px); max-width: 100%; aspect-ratio: 1; }
.cx-in { position: absolute; inset: 0; transform-origin: 50% 90%; }
.cx-in img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.cx-a, .cx-o { opacity: 0; }
.cx-sh { position: absolute; left: 12%; right: 12%; bottom: 0; height: 10%; border-radius: var(--r-pill); background: radial-gradient(closest-side, color-mix(in srgb, var(--sky-0) 80%, transparent), transparent); }
:root[data-theme="dawn"] .cx-sh { background: radial-gradient(closest-side, color-mix(in srgb, var(--text) 22%, transparent), transparent); }
.cx-seam { position: absolute; left: 6%; width: 88%; top: calc(var(--cx-seam) - 8%); height: 16%; border-radius: var(--r-pill); background: radial-gradient(closest-side, var(--ch-rar, var(--rar-c)), color-mix(in srgb, var(--ch-rar, var(--rar-c)) 30%, transparent) 55%, transparent); mix-blend-mode: screen; opacity: 0; }
.cx-lock { position: absolute; left: calc(var(--cx-lx) - 11%); top: calc(var(--cx-ly) - 11%); width: 22%; height: 22%; border-radius: var(--r-pill); background: radial-gradient(closest-side, var(--chest-flash), color-mix(in srgb, var(--ch-rar, var(--rar-c)) 40%, transparent) 50%, transparent); mix-blend-mode: screen; opacity: 0; }
.cx-sheen { position: absolute; inset: 0; overflow: hidden; -webkit-mask: var(--cx-m) center / contain no-repeat; mask: var(--cx-m) center / contain no-repeat; }
.cx-sheen b { position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--chest-flash) 60%, transparent), transparent); transform: translateX(-120%) skewX(-18deg); }
.cx-night { --cx-seam: 47%; --cx-lx: 40%; --cx-ly: 62%; --cx-m: url(/img/chest-night-closed-v1.webp); }
.cx-badr { --cx-seam: 46%; --cx-lx: 38%; --cx-ly: 55%; --cx-m: url(/img/chest-badr-closed-v1.webp); }
.cx-gift { --cx-seam: 48%; --cx-lx: 40%; --cx-ly: 44%; --cx-m: url(/img/chest-gift-closed-v1.webp); }
.ch-ray { opacity: 0; }

/* ===== الفتح: فوق .mz-nn (390×844 كبقية لحظات القمر) */
.ch-ov .mz-nn-in { overflow: hidden; }
.ch-stage { position: absolute; inset: 0; }
.ch-skip { position: absolute; top: 52px; inset-inline-end: 8px; height: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--r-pill); background: none; font: var(--t-label); color: var(--text-2); cursor: pointer; z-index: 6; }
.ch-k { position: absolute; top: 104px; inset-inline: 16px; display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; font: var(--t-head); color: var(--text); z-index: 3; }
.ch-glow { position: absolute; top: 175px; left: 50%; width: 420px; height: 420px; margin-left: -210px; border-radius: var(--r-pill); opacity: 0; pointer-events: none; }
.ch-gl-c { background: radial-gradient(circle, color-mix(in srgb, var(--rar-c) 45%, transparent) 0, transparent 68%); }
.ch-gl-r { background: radial-gradient(circle, color-mix(in srgb, var(--rar-r) 50%, transparent) 0, transparent 68%); }
.ch-gl-e { background: radial-gradient(circle, color-mix(in srgb, var(--rar-e) 52%, transparent) 0, transparent 68%); }
.ch-gl-l { background: radial-gradient(circle, color-mix(in srgb, var(--rar-l) 60%, transparent) 0, transparent 68%); }
.ch-rays { position: absolute; top: 42px; left: 50%; margin-left: -260px; pointer-events: none; opacity: 0; }
.ch-box { position: absolute; top: 250px; left: 50%; margin-left: -120px; z-index: 2; cursor: pointer; border: 0; padding: 0; background: none; transform-origin: 50% 90%; }
.ch-box .ch { transition: transform var(--dur-2) var(--ease-out); }
.ch-box:focus-visible { outline: 2px solid var(--rose); outline-offset: 6px; border-radius: var(--r-panel); }
.ch-ring-k { position: absolute; top: 380px; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: var(--r-pill); border: 3px solid var(--rar-c); opacity: 0; pointer-events: none; z-index: 3; }
.ch-pill { position: absolute; top: 508px; left: 50%; width: 180px; height: 36px; margin-left: -90px; display: grid; z-index: 3; }
.ch-pill > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: var(--r-pill); border: 1px solid; font: var(--t-button); opacity: 0; }
.ch-pill .p-c { color: var(--rar-c); background: color-mix(in srgb, var(--rar-c) 14%, transparent); border-color: color-mix(in srgb, var(--rar-c) 50%, transparent); }
.ch-pill .p-r { color: var(--rar-r); background: color-mix(in srgb, var(--rar-r) 14%, transparent); border-color: color-mix(in srgb, var(--rar-r) 55%, transparent); }
.ch-pill .p-e { color: var(--rar-e); background: color-mix(in srgb, var(--rar-e) 16%, transparent); border-color: color-mix(in srgb, var(--rar-e) 60%, transparent); }
.ch-pill .p-l { color: var(--rar-l); background: color-mix(in srgb, var(--rar-l) 18%, transparent); border-color: color-mix(in srgb, var(--rar-l) 70%, transparent); }
.ch-up { pointer-events: none; position: absolute; top: 236px; left: 0; right: 0; margin: 0; font: var(--t-subtitle); opacity: 0; z-index: 4; }
.ch-hint { position: absolute; top: 560px; inset-inline: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; font: var(--t-label); color: var(--text-2); z-index: 3; }
.ch-taps { display: flex; gap: 10px; }
.ch-taps i { width: 10px; height: 10px; border-radius: var(--r-pill); border: 1.5px solid var(--text-3); }
.ch-flash { position: absolute; inset: 0; background: var(--chest-flash); opacity: 0; pointer-events: none; z-index: 5; }
.ch-p { position: absolute; width: 18px; height: 18px; display: grid; place-items: center; pointer-events: none; z-index: 4; opacity: 0; }
.ch-p svg, .ch-fly svg { fill: currentColor; }
.ch-p.rar-c { --ch-rar: var(--rar-c); } .ch-p.rar-r { --ch-rar: var(--rar-r); } .ch-p.rar-e { --ch-rar: var(--rar-e); } .ch-p.rar-l { --ch-rar: var(--rar-l); } .ch-p.rar-m { --ch-rar: var(--moon); }
.ch-p { color: var(--ch-rar); }

/* الندرة الحالية (data-rar): الشق والداخل والنور والملصق والأشعة ولون كل ما يتبعها */
.ch-ov[data-rar="c"] { --ch-rar: var(--rar-c); } .ch-ov[data-rar="r"] { --ch-rar: var(--rar-r); }
.ch-ov[data-rar="e"] { --ch-rar: var(--rar-e); } .ch-ov[data-rar="l"] { --ch-rar: var(--rar-l); }
.ch-ov[data-rar="c"] :is(.p-c, .ch-ray-c), .ch-ov[data-rar="r"] :is(.p-r, .ch-ray-r),
.ch-ov[data-rar="e"] :is(.p-e, .ch-ray-e), .ch-ov[data-rar="l"] :is(.p-l, .ch-ray-l) { opacity: 1; }
.ch-ov.s-idle[data-rar="c"] .ch-gl-c, .ch-ov.s-idle[data-rar="r"] .ch-gl-r, .ch-ov.s-idle[data-rar="e"] .ch-gl-e, .ch-ov.s-idle[data-rar="l"] .ch-gl-l { opacity: var(--ch-charge, .3); }
.ch-ov .ch-taps i.on { border-color: var(--ch-rar); background: var(--ch-rar); }
.ch-ov :is(.ch-up, .ch-fly, .ch-rtag) { color: var(--ch-rar); }
.ch-ov .ch-ring .seg.ch-new { stroke: var(--ch-rar); }
.ch-ov .ch-pts .pt.lit { border-color: var(--ch-rar); background: var(--ch-rar); outline-color: color-mix(in srgb, var(--ch-rar) 14%, transparent); }

/* النهاية (s-done): الصندوق راح، والقطعة في الوسط والأشعة خلفها */
.ch-ov.s-done :is(.ch-box, .ch-hint, .ch-pill) { opacity: 0; pointer-events: none; }
.ch-ov.s-done .ch-rays { opacity: .55; }
.ch-ov.s-done .ch-glow { opacity: 0; transform: translateY(-80px); }
.ch-ov.is-complete.s-done .ch-done { opacity: 1; }
.ch-ov.s-done[data-rar="c"] .ch-gl-c, .ch-ov.s-done[data-rar="r"] .ch-gl-r, .ch-ov.s-done[data-rar="e"] .ch-gl-e, .ch-ov.s-done[data-rar="l"] .ch-gl-l { opacity: .9; }
.ch-ov.s-idle :is(.ch-item, .ch-res) { opacity: 0; visibility: hidden; }
.ch-item { position: absolute; top: 218px; left: 50%; width: 168px; height: 168px; margin-left: -84px; display: grid; place-items: center; z-index: 3; }
.ch-item > * { grid-area: 1 / 1; }
.ch-ring { display: block; overflow: visible; }
.ch-ring .seg { fill: none; stroke: var(--line); stroke-width: 5; stroke-linecap: round; }
.ch-ring .seg.on { stroke: var(--moon); }
.ch-ring .ch-new { stroke-dasharray: 100; }
.ch-fly { pointer-events: none; position: absolute; top: 400px; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; display: grid; place-items: center; line-height: 0; opacity: 0; z-index: 4; }
.ch-tile { line-height: 0; }
.ch-tile .mz-tile, .ch-tl .mz-tile, .ch-brow .lead .mz-tile { box-shadow: var(--mz-tile-line); }
.ch-sil { width: 104px; height: 104px; border-radius: var(--r-field); background: var(--sky-0); outline: 2px solid var(--ch-rar); opacity: 0; }
.ch-done { pointer-events: none; position: absolute; top: 160px; left: 0; right: 0; margin: 0; font: var(--t-display); color: var(--moon); opacity: 0; z-index: 4; }
.ch-res { position: absolute; inset: 0; pointer-events: none; }
.ch-res > * { pointer-events: auto; }
.ch-pts { position: absolute; top: 396px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; }
.ch-ov .ch-t { position: absolute; top: 428px; inset-inline: 16px; margin: 0; font: var(--t-title); color: var(--text); }
.ch-meta { position: absolute; top: 474px; inset-inline: 16px; display: flex; justify-content: center; align-items: center; gap: 8px; font: var(--t-label); color: var(--text-2); }
.ch-rtag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-chip); font: var(--t-caption); font-weight: 700; background: color-mix(in srgb, var(--ch-rar) 16%, transparent); }
.ch-count { position: absolute; top: 510px; inset-inline: 16px; display: flex; justify-content: center; align-items: center; gap: 10px; font: var(--t-num-s); color: var(--text); }
.ch-count small { font: var(--t-label); color: var(--text-2); }
.ch-count .mz-pg { width: 30px; height: 30px; }
.ch-roll { display: inline-grid; height: 2.125rem; overflow: hidden; }
.ch-roll i { grid-area: 1 / 1; font-style: normal; }
.ch-roll .o { opacity: 0; }
.ch-note { position: absolute; top: 562px; inset-inline: 28px; margin: 0; font: var(--t-label); color: var(--text-2); }
.ch-note.is-done { color: var(--moon-ink, var(--moon)); }
.ch-what { position: absolute; top: 606px; inset-inline: 0; width: max-content; height: 44px; margin: 0 auto; padding: 0 var(--space-3); border: 0; background: none; font: var(--t-label); color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ch-btns { position: absolute; top: 680px; inset-inline: 16px; display: grid; gap: 10px; }
.ch-ov.s-idle :is(.ch-btns, .ch-what) { visibility: hidden; }
/* جمعت كل الزينة: صندوق مقفول ثابت ورسالة */
.ch-still-box { position: absolute; top: 225px; left: 50%; margin-left: -100px; }
.ch-none .ch-note { top: 476px; }

/* ===== أطوار القمر الصغيرة (العدّاد، اللوح، «أنا»، الخزانة) */
:is(.ch-count, .ch-tph, .ch-mph, .ch-strip) .mz-pg .l { fill: var(--moon); opacity: .9; }
:is(.ch-count, .ch-tph, .ch-mph, .ch-strip) .mz-pg .o { stroke: var(--moon); stroke-opacity: .45; }
.ch-tph { position: absolute; top: -4px; inset-inline-end: -4px; width: 18px; height: 18px; border-radius: var(--r-pill); background: var(--surface); line-height: 0; box-shadow: var(--mz-lockring); }
.ch-tph .mz-pg { width: 18px; height: 18px; }
.ch-tl .ch-tph { top: auto; bottom: -4px; inset-inline: -4px auto; width: 16px; height: 16px; }
.ch-tl .ch-tph .mz-pg { width: 16px; height: 16px; }

/* ===== «إيش داخل الصندوق؟» */
.ch-pips { display: inline-flex; align-items: center; gap: 3px; }
.ch-pips .pt.lit { outline: 0; }
.ch-tabs { margin-bottom: var(--space-3); }
.ch-pane.is-in { animation: ch-swap var(--dur-2) var(--ease-out) both; }
@keyframes ch-swap { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ch-pane.is-in { animation: none; } }
.ch-lead-p { margin: 0 0 var(--space-3); font: var(--t-label); color: var(--text-2); }
.ch-lead-p b { color: var(--text); }
.ch-h { margin: var(--space-4) 0 var(--space-2); font: var(--t-label); font-weight: 700; color: var(--text); }
.ch-lead { width: 40px; flex: none; display: flex; justify-content: center; }
.ch-phases .list-row { min-height: 52px; padding-block: 8px; }
.ch-phases b, .ch-odds b { display: block; font: var(--t-label); font-weight: 700; color: var(--text); }
.ch-strip { display: flex; flex: none; gap: 1px; }
.ch-strip .mz-pg { width: 13px; height: 13px; }
.ch-orow { align-items: flex-start; padding-block: 14px; }
.ch-orow .ch-lead { padding-top: 6px; }
.ch-orow.is-off { opacity: .5; }
.ch-pc { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.ch-odds .ch-pct { font: var(--t-head); color: var(--text); }
.ch-p2 { font: var(--t-micro); color: var(--text-2); white-space: nowrap; }
.ch-wip { color: var(--moon-ink, var(--moon)); white-space: nowrap; }
.ch-tiles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ch-tl { position: relative; display: block; line-height: 0; }
.ch-tl .mz-tile { border-radius: var(--r-thumb); }
.ch-tl:not(.own) .mz-tile { opacity: .4; }
.ch-tl.wip .mz-tile { opacity: .75; }
.ch-rules { margin: var(--space-3) 0 0; padding-inline-start: 18px; font: var(--t-caption); color: var(--text-2); }
.ch-rules li { margin-bottom: 6px; }
.ch-rules b { color: var(--text); }

/* ===== «أنا»: تبنيها الحين (صفوف داخل إطار واحد) */
.ch-mlink { border: 0; background: none; padding: 0; font: var(--t-label); color: var(--rose); cursor: pointer; }
.ch-brow .lead { line-height: 0; }
.ch-brow .lead .mz-tile { border-radius: var(--r-thumb); }
.ch-mph { flex: none; line-height: 0; }
.ch-mph .mz-pg { width: 28px; height: 28px; }
:root[data-theme="dawn"] .ch-rtag { background: color-mix(in srgb, var(--ch-rar) 12%, var(--glass-solid)); } /* الأشعة الذهبية خلف الملصق على السماء الفاتحة */
:root[data-theme="dawn"] .ch-mlink { color: color-mix(in srgb, var(--rose) 45%, var(--text)); }
/* css/alarm.css */
/* منظّمي — المنبّه (js/alarm.js، النموذج المعتمد design-reference/alarm): خيار النافذة، لوح النغمات، وشاشة الرنين.
   البطاقة بلا زجاج (حد backdrop-filter في perf-budget): سماء القمر خلفها تكفي. */
/* 1) صف «التنبيه» في نافذة الموعد */
.tab-bar.al-seg { margin-bottom: var(--space-2); }
.al-seg .tab-btn svg { display: inline-block; }
.al-seg .tab-btn.active { color: var(--accent-primary); }
.al-hint { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }

/* 3) لوح النغمات */
.al-play { flex: none; display: grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm);
  border: 0; border-radius: var(--radius-pill); background: var(--accent-subtle-bg); color: var(--accent-primary); cursor: pointer; }
.al-play.is-playing { background: var(--ink); color: var(--on-ink); }

/* 4) شاشة المنبّه ملء الشاشة («سماء واحدة»، screens-time.css): السماء معتمة خلفها، الحلقة بشَرطة وردية وموجة تتنفّس وهو يرن،
   وفي الغفوة تمتلئ بالباقي على الرنّة. على الجوال بنفس مواضع النموذج، وعلى الشاشات الواسعة عمود في الوسط */
.al-ring { position: fixed; inset: 0; z-index: 600; overflow-y: auto; background: var(--sky-0); animation: al-in var(--dur-3) var(--ease-out) both; }
.tm-alarm { position: relative; min-height: 100%; }
.tm-alhead { position: absolute; top: 82px; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tm-alhead b { display: inline-flex; align-items: center; gap: 6px; font: var(--t-head); }
.tm-alhead small { font: var(--t-caption); color: var(--text-2); }
.tm-alr { position: absolute; top: 200px; left: 50%; margin-left: -120px; width: 240px; height: 240px; display: grid; place-items: center; }
.tm-alring { position: absolute; inset: 0; overflow: visible; }
.tm-altrack { fill: none; stroke: var(--text); stroke-opacity: .2; stroke-width: 3; }
.tm-alwave { fill: none; stroke: var(--text); stroke-opacity: .08; stroke-width: 1; transform-box: fill-box; transform-origin: 50% 50%; animation: al-wave calc(var(--dur-4) * 4) var(--ease-out) infinite alternate; }
.tm-alleft { fill: none; stroke: var(--text-2); stroke-width: 3; stroke-linecap: round; }
.tm-altime { font: var(--t-alarm); position: relative; display: flex; flex-direction: column; align-items: center; }
.tm-altime small { font: var(--t-label); color: var(--text-2); margin-top: 8px; }
.tm-alwhat { position: absolute; top: 474px; inset-inline: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.tm-alwhat h2 { font: var(--t-subtitle); margin-top: 6px; overflow-wrap: anywhere; }
.tm-alwhat span { font: var(--t-label); color: var(--text-2); }
.tm-albtns { position: absolute; top: 622px; inset-inline: 16px; display: flex; flex-direction: column; gap: 12px; }
.tm-albtns .btn { height: 56px; } .tm-albtns .btn.full { font: 600 17px/22px var(--font); } .tm-altext .btn { font: 500 17px/22px var(--font); }
.al-ring:focus { outline: none; }
.tm-altext { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: -4px; }
.tm-altext i { width: 4px; height: 4px; border-radius: var(--r-pill); background: var(--text-3); }
/* شاشة قصيرة أو واسعة: عمود في الوسط بدل المواضع الثابتة */
@media (max-height: 759px), (min-width: 768px) {
  .tm-alarm { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; }
  .tm-alarm > * { position: static; inset: auto; width: 100%; max-width: 480px; }
  .tm-alarm > .tm-alr { position: relative; inset: auto; margin: 40px 0 34px; width: 240px; height: 240px; }
  .tm-albtns { margin-top: 40px; }
}

.al-ring.is-out { animation: al-out var(--dur-2) var(--ease-out) both; }

@keyframes al-in { from { opacity: 0; } }
@keyframes al-out { to { opacity: 0; transform: translateY(12px); } }
@keyframes al-wave { from { opacity: .4; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .al-ring, .tm-alwave { animation: none; } }
/* css/home-calm.css */
/* منظّمي — الرئيسية «سماء واحدة» (js/home-calm.js وhome-extras.js وhome-edit.js؛ النموذج design-reference/identity screens.css «الرئيسية» وui.css).
   القوس والقمر و«بعدها» فوق الأفق، والأقسام تحته: قوائم صفوف في إطار واحد، وبطاقتان فقط (جلسة الليلة وأسبوعك).
   متغيرات نظام التصميم فقط، والحركة transform/opacity، ولا حركة تتكرر. */
:root { --t-row: 500 16px/24px var(--font); --t-hb: 700 19px/28px var(--font); --t-ses: 500 15px/22px var(--font); }

/* ===== الدخول والخروج (الرئيسية وصفحة التخصيص) */
.hs { position: relative; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.hs.enter { opacity: 0; transform: translateY(12px); }
.hs.leave { opacity: 0; transform: translateY(-8px); transition-duration: var(--dur-1); }
 /* فوق مربع «مدربك» (ينطوي مع التمرير، css/coach-home.css) */
@media (min-width: 768px) and (max-width: 1023px) { .hs { padding-bottom: 34px; } } /* النموذج: حشوة الرئيسية 184 لا 150 */

/* ===== الشاشة الأولى */
.home-hero { position: relative; overflow-x: clip; }

.offline { height: 28px; border-radius: var(--r-pill); background: var(--surface-2); display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font: var(--t-caption); color: var(--text-2); }
/* النموذج: عرض 120% (−10% لكل جهة) بقطع 46%؛ هنا بعرض الصندوق وقطع 55.2% (= 46% × 1.2) فنفس الرسم بلا عنصر يطلع برا الصفحة */

.hh-arc { position: absolute; left: 0; z-index: 1; }
.hh-arc svg { display: block; overflow: visible; }
.arc-cap { position: absolute; font: var(--t-caption); color: var(--text-3); white-space: nowrap; }

/* أوقات الصلاة على القوس: اسم الجاية خفيف من الداخل، والتلميح فيه الأذان والإقامة */
.arc-prayn { position: absolute; transform: translate(-50%, -50%); font: var(--t-micro); color: var(--text-3); white-space: nowrap; pointer-events: none; }
.arc-prayn.r { transform: translate(0, -50%); } .arc-prayn.l { transform: translate(-100%, -50%); }
.arc-tip .ptip { display: flex; flex-direction: column; gap: 6px; }
.arc-tip .ptip > b { display: flex; align-items: baseline; gap: 8px; font: var(--t-label); font-weight: 700; }
.arc-tip .ptip > b small { font: var(--t-caption); color: var(--moon); }
.pt-two { display: flex; gap: 18px; }
.pt-two > span { display: flex; flex-direction: column; }
.pt-two b { font: var(--t-head); color: var(--text); }
.arc-hit { position: absolute; z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer; }
.arc-hit-up { z-index: 4; } /* فوق القمر لما يغطي نقطتها */
.arc-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* لمسة نقطة تحت القمر: برا القوس وفوق القمر */

.hb { position: absolute; z-index: 2; width: 300px; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* «كمّل <الملف> من ص N»: الاسم وحده ينقص من آخره، والصفحة تبقى ظاهرة */

.hb .btn { margin-top: 12px; height: 44px; }
.hb .btn .meteor { color: inherit; }

.arc-tip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-field); background: var(--surface-2); border: 1px solid var(--line);
  opacity: 0; transform: translateY(4px); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); pointer-events: none; }
.arc-tip.on { opacity: 1; transform: none; pointer-events: auto; }
.arc-tip[hidden] { display: none; }
.arc-tip > div { font: var(--t-body); }
.arc-tip div > b { display: block; font: var(--t-label); font-weight: 700; white-space: nowrap; }
.arc-tip small { font: var(--t-caption); color: var(--text-2); white-space: nowrap; }
.arc-tip > i { position: absolute; bottom: -7px; width: 12px; height: 12px; background: var(--surface-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }

/* ===== شريط «اكتب أي شي»: ينطوي في دائرة الشهاب مع التمرير */
.cmdbar { position: fixed; z-index: 20; inset-inline: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); height: 52px; margin: 0; border-radius: var(--r-pill);
  display: flex; align-items: center; gap: 10px; padding: 0 18px 0 6px; color: var(--text-3); font: var(--t-body);
  transform-origin: left center; transition: transform var(--dur-2) var(--ease-sheet), opacity var(--dur-2) var(--ease-sheet); }
.cmdbar .clip { width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); cursor: pointer; }

.cmdbar.off .meteor { opacity: .35; }
html.cmd-folded .cmdbar { transform: scaleX(.14); opacity: 0; pointer-events: none; }
/* الشهاب مخفي فعلاً (visibility بعد انتهاء التلاشي، فلا يُلمس ولا يقرأه قارئ الشاشة) حتى ينطوي الشريط */

@media (min-width: 768px) { .cmdbar { left: calc(50% - 280px); right: calc(50% - 280px); bottom: calc(max(28px, calc(8px + env(safe-area-inset-bottom))) + 84px); } }
@media (min-width: 1024px) { .cmdbar { display: none; } }
/* مؤقت المذاكرة الشغّال (.focus-pill) يرتفع فوق شريط «اكتب أي شي» في الرئيسية بدل ما يغطيه، وينزل مكانه لما ينطوي الشريط */
@media (max-width: 1023.98px) { .focus-pill { transition: transform var(--dur-2) var(--ease-sheet), opacity var(--dur-1) var(--ease-out); }  }

/* ===== الأقسام */
.hs .sec { margin-top: 32px; }
.hs .list-panel { margin-bottom: 0; }
.hs-head { min-height: 56px; padding: 16px 16px 8px; justify-content: space-between; align-items: baseline; }
.hs-head h2 { margin: 0; font: var(--t-head); }

.hs-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.hs-row { display: flex; }
.hs-lead { width: 40px; display: grid; place-items: center; flex: none; }

.list-row-main b .pdot { margin-inline-end: 8px; vertical-align: 1px; }
.hs .ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs .tag { height: 22px; padding: 0 8px; border-radius: var(--r-chip); background: var(--surface-2); display: inline-flex; align-items: center; flex: none; font: var(--t-caption); color: var(--text); }
.hs .ember-t, .hs .list-row-main small.ember-t { color: var(--ember); }
.hs .chev { color: var(--text-3); }
.hs .rend { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; font: var(--t-button); font-feature-settings: "tnum"; }
.hs .pts3 { display: inline-flex; gap: 4px; margin-inline-start: 6px; }

.hs-pp:not(:last-child)::after { content: ''; position: absolute; inset-block-end: 0; inset-inline: 16px; height: 1px; background: var(--line); }

.hs-pp .pp { flex: 1; margin: 0; padding: 0; border-radius: initial; background: none; box-shadow: none; }

/* البطاقات: جلسة الليلة وأسبوعك */

.card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.card-h h2 { margin: 0; font: var(--t-head); }
.card-h > span { font: var(--t-caption); }
.hs .t2 { color: var(--text-2); } .hs .t3 { color: var(--text-3); }

.ses-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: inherit; text-decoration: none; }
.ses-row .grow { flex: 1; min-width: 0; }
.ses-row b { display: block; font: var(--t-ses); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ses-row b.ses-fn { display: flex; }
.ses-row small { display: block; margin: 2px 0 8px; font: var(--t-caption); color: var(--text-2); }
.thumb { display: inline-flex; flex-direction: column; gap: 4px; flex: none; width: 44px; height: 56px; padding: 8px 6px; border-radius: var(--r-thumb); background: var(--paper-bg); outline: 1px solid var(--line); }
.thumb i { display: block; height: 2px; border-radius: var(--r-pill); background: var(--paper-ln); opacity: .55; }
.thumb i:nth-child(1) { width: 70%; height: 3px; opacity: .8; }
.thumb i:nth-child(4) { width: 55%; }

.hs-full { width: 100%; }
.hs .btn .meteor { color: inherit; }

.weekarcs { display: flex; justify-content: space-between; gap: 11px; margin-bottom: 16px; }
.weekarcs .wd { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.weekarcs .wd span { font: var(--t-caption); color: var(--text-2); }
.weekarcs .wd.today span { color: var(--text); font-weight: 700; }
.weekarcs svg { overflow: visible; }

.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cols2.one { grid-template-columns: minmax(0, 1fr); }
.cols2.below { margin-top: 36px; }

.hs .stack { display: flex; flex-direction: column; gap: 16px; }

/* الظهور بالنزول (homeCalm.reveal) */
.hs .rv, .pv .rv { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-3) var(--ease-out) var(--rv-d, 0ms), transform var(--dur-3) var(--ease-out) var(--rv-d, 0ms); }
.hs .rv.in, .pv .rv.in { opacity: 1; transform: none; }

/* ===== صفحة التخصيص ولوح «إضافة قسم» */

.tgl { position: relative; width: 51px; height: 31px; flex: none; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--surface-3); cursor: pointer; }
.tgl i { position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: var(--r-pill); background: var(--text-2); transition: transform var(--dur-2) var(--ease-spring); }
.tgl.on { background: var(--text); }
.tgl.on i { transform: translateX(-20px); background: var(--surface); }
.tgl:focus-visible, .grip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.grip { width: 44px; height: 44px; margin-inline: -10px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-3); cursor: grab; touch-action: none; }
.sh-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sh-h h2 { margin: 0; font: var(--t-head); }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); cursor: pointer; }

.sheet-body > .sh-h { margin-bottom: 2px; } /* فجوة الورقة 14 + 2 = 16 كما في النموذج */

.hs-imp { display: grid; gap: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  .hs, .hs .rv, .pv .rv, .cmdbar, .arc-tip, .tgl i, html.on-home .metcircle, .focus-pill { transition: none; }
  .hs .rv, .pv .rv { opacity: 1; transform: none; }
}
.hs { -webkit-touch-callout: none; }
/* رابط «أذكار بعد الصلاة» آخر تلميح الصلاة (js/adhkar.js) */
.arc-tip .pt-adhkar { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font: var(--t-caption); color: var(--text); text-decoration: none; }
.arc-tip .pt-adhkar svg:first-child { color: var(--moon); }
.arc-tip .pt-adhkar span { flex: 1; }
.arc-tip .pt-adhkar svg:last-child { color: var(--text-3); }
/* css/today.css */
/* منظّمي — «اليوم لك» (design-reference/today، js/home-today.js): القائمة في الرئيسية، و«ليش؟»، ورسالة الصبح في السماء،
   ولحظة «كيف مشى يومك؟». متغيرات نظام التصميم فقط، والحركة transform/opacity. */
.td .hs-head { justify-content: space-between; }
.td-sub { font: var(--t-caption); color: var(--text-2); }
.td-row { gap: var(--space-2); padding-inline-end: var(--space-3); }
.td-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); background: none; border: 0; padding: 0; color: inherit; text-align: start; font: inherit; cursor: pointer; }
.td-main .list-row-main { min-width: 0; }
.td-main small { display: flex; gap: var(--space-2); align-items: baseline; min-width: 0; }
.td-why { flex: none; color: var(--moon); }
.td-go { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: var(--t-caption); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.td-go:active { transform: scale(.96); }
.td-go svg { color: var(--moon); }
.td-foot { padding-block: var(--space-2) var(--space-3); }
.td-foot small { font: var(--t-micro); color: var(--text-3); }

/* «ليش؟» وسؤالي أول مرة */
.td-sheet { display: flex; flex-direction: column; gap: var(--space-3); }
.td-lede { margin: 0; font: var(--t-caption); color: var(--text-2); }
.td-cap { margin: 0; font: var(--t-caption); color: var(--text-2); text-align: center; }
.td-cap.dim { color: var(--text-3); }
.td-full { width: 100%; }
.td-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.td-q { margin: var(--space-2) 0 0; font: var(--t-label); font-weight: 700; color: var(--text); }
.td-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.td-chip { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); font: var(--t-caption); color: var(--text-2); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.td-chip:active { transform: scale(.96); }
.td-chip.on { background: var(--text); color: var(--surface); }
.td-sheet .list-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* رسالة الصبح انشالت من «اليوم» (s1-today ما فيه سطرين تحت العنوان، فحص الجولة 3): تبقى إشعار الصبح (js/reminder-core.js today|am) */

/* ختام اليوم: لحظة بملء الشاشة فوق .mz-nn (js/moon-moments.js) */
.td-nn .mz-nn-in { height: auto; min-height: 100%; overflow-y: auto; }
.td-nn-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 420px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 72px) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-6)); }
.td-nn-moon { margin-bottom: var(--space-2); }
.td-nn h2 { margin: 0; font: var(--t-title); color: var(--text); text-align: center; }
.td-nn-s { margin: 0; font: var(--t-label); color: var(--text-2); text-align: center; }
.td-cons { width: 240px; height: 70px; margin: var(--space-2) 0; overflow: visible; }
.td-ln { stroke: var(--star); stroke-opacity: .6; stroke-width: 1; opacity: .3; transition: opacity var(--dur-2) var(--ease-out); }
.td-ln.on { opacity: 1; }
.td-st { fill: var(--star); opacity: .35; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.td-st.on { fill: var(--moon); opacity: 1; transform: none; }
.td-nn-l { width: 100%; text-align: start; }
.td-nr { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.td-nr:disabled { cursor: default; }
.td-nr.on b { color: var(--text-2); }
.td-nr .list-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-nr small { font: var(--t-caption); color: var(--text-3); }
.td-nn-b { width: 100%; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }

@media (prefers-reduced-motion: reduce) { .td-st, .td-ln, .td-go, .td-chip { animation: none; transition: none; } }
/* css/today-place.css */
/* منظّمي — مكان «اليوم» (js/today-place.js، النموذج design-reference/round3-structure/a s1، s1b، s1c، s1d):
   رأس بتاريخ وتحية وعنوان قصير، قوس السماء والجاي، المثبّتات، تبويبات اليوم/القادم/الأسبوع، ولوح صفوف واحد لكل تبويب، ولوح «أضف».
   متغيرات نظام التصميم فقط، والحركة transform/opacity، والمظاهر الثلاثة. */

/* ===== الصفحة: عمود واحد، وفي الشاشات الواسعة بالوسط */
.tpl { max-width: 720px; margin-inline: auto; }
.tp-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 8px; }
.tp-ht { min-width: 0; flex: 1; }
.tp-kick { font: var(--t-label); color: var(--text-2); }
.tp-h1 { font: var(--t-title); margin-top: 2px; overflow-wrap: anywhere; }
.tp-off { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-2); font: var(--t-caption); color: var(--text-2); }
.tp-off[hidden] { display: none; }
.tp-acts { display: flex; gap: 8px; flex: none; }
.tp-ib { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface-2) 70%, transparent); box-shadow: var(--rim); color: var(--text); cursor: pointer; }
.tp-ib:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ===== البطل: القوس والقمر (زينة لا رابط، ui-walk#8) والجاي بالوسط */
.tp-hero { margin: 4px auto 0; max-width: 100%; }
.tp-moon { position: absolute; z-index: 2; pointer-events: none; }
.arc-glow { position: absolute; z-index: 0; width: 96px; height: 96px; border-radius: var(--r-round); background: var(--glow-moon); opacity: .8; pointer-events: none; }
.tp-nx { position: absolute; z-index: 3; inset-inline: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); text-align: center; cursor: pointer; }
.tp-nx.empty { cursor: default; }
.tp-nx.empty p { font: var(--t-label); color: var(--text-2); max-width: 260px; }
.tp-nx:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-field); }
.tp-chip { height: 26px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface-2) 80%, transparent); font: var(--t-caption); color: var(--text-2); }
.tp-chip b { color: var(--text); font-weight: 700; }
.tp-what { display: flex; align-items: center; gap: 10px; font: var(--t-subtitle); max-width: 100%; }
.tp-what > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-where { font: var(--t-label); color: var(--text-2); }

/* ===== المثبّتات: ≤4 شرائح، لمستها 44 */
.tp-pins { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 6px; }
.tp-pins::-webkit-scrollbar { display: none; }
.tp-pin { position: relative; flex: none; height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface-2) 85%, transparent); box-shadow: var(--rim); font: var(--t-label); color: var(--text); text-decoration: none; white-space: nowrap; cursor: pointer; }
.tp-pin::before { content: ''; position: absolute; inset: -6px 0; }
.tp-pin b { font-weight: 700; color: var(--text-2); }
.tp-pin b.warn { color: var(--ember); }
.tp-pin .ic { color: var(--text-2); }
.tp-pined { padding: 0 10px; color: var(--text-2); }
.tp-pinlede { font: var(--t-caption); color: var(--text-2); margin: 0 4px 10px; }
.tp-pinrow { width: 100%; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }

/* ===== التبويبات واللوح */
.tp-tabs { margin-top: 18px; }
.tp-top:empty { display: none; }
.tp-body { margin-top: 14px; }
.tp-panel { margin-bottom: 14px; }
.tp-row { --row-lead: 56px; gap: 12px; }
.tp-row.tm-trow { --row-lead: 46px; }
button.tp-row, a.tp-row { width: 100%; border: 0; border-radius: var(--r-none); background: none; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.tp-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.tp-row .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-row .rt b { display: flex; align-items: center; gap: 6px; font: var(--t-row); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-row .rt small { font: var(--t-caption); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-row .rt small.ember-t { color: var(--ember); }
.tp-t { width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; color: var(--text); }
.tp-t b { font: var(--t-label); font-weight: 700; }
.tp-t small { font: var(--t-micro); color: var(--text-2); }
.tp-star { color: var(--star); }
.tp-row.past :is(.rt b, .tp-t b) { color: var(--text-2); } /* باهت باللون لا بالشفافية: التباين يبقى ≥ 4.5 */
.tp-act { flex: none; min-width: 72px; min-height: 44px; }
.tp-mark { flex: none; display: inline-flex; align-items: center; gap: 4px; font: var(--t-caption); color: var(--moon); }
.tp-mark.late { color: var(--ember); }
.tp-due { flex: none; font: var(--t-label); font-weight: 700; }
.tp-due.ember-t { color: var(--ember); }
.tp-chev { color: var(--text-3); flex: none; }
.tp-empty { --row-lead: 0px; }
.tp-empty .rt b { font: var(--t-label); font-weight: 700; }
.list-cap { font: var(--t-caption); color: var(--text-2); margin: 18px 6px 8px; }
.list-cap:first-child { margin-top: 0; }
.list-cap.ember-t { color: var(--ember); }
/* العنوان داخل اللوح («فات موعدها»، «هالأسبوع»): بحشوة الصفوف لا لاصق بحافة الإطار (لقطات الجولة الثالثة، s1b) */
.list-panel > .list-cap { margin: 0; padding: var(--space-4) var(--space-4) var(--space-1); }
/* .hs .list-panel (home-calm.css) كان يصفّر المسافة بين ألواح «اليوم» فيلتصق لوح القائمة بلوح التقويم والبلاك بورد */
.tp-body .list-panel.tp-panel { margin-bottom: 14px; }
.tp-chips { margin-bottom: 12px; }
.tp-chips { align-items: center; padding-block: 4px; }
.tp-chips .chip { position: relative; height: 36px; border-radius: var(--r-chip); background: var(--surface-2); padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); white-space: nowrap; flex: none; border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.tp-chips .chip::before { content: ''; position: absolute; inset: -4px 0; }
.tp-chips .chip.on { border-color: var(--text); background: var(--surface-3); color: var(--text); }
.tp-chips .chip:active { transform: scale(var(--press-scale)); }
.tpl .tm-trow.late::after { display: none; }
.tp-dayh { margin-top: 4px; }
.tp-wk { padding: 12px 10px 8px; }
.tm-wlab { width: var(--lab); min-height: 44px; display: flex; flex-direction: column; justify-content: center; padding: 0 6px; border: 0; border-radius: var(--r-field); background: none; color: var(--text-2); text-align: start; cursor: pointer; }
.tm-wlab b { font: var(--t-label); font-weight: 700; color: var(--text); }
.tm-wrow.sel .tm-wlab { background: var(--surface-2); }

/* ===== ليلة الاختبار */
.tp-exam { position: relative; overflow: hidden; padding: 18px; margin-top: 16px; }
.tp-exam .ek { display: flex; align-items: center; gap: 8px; font: var(--t-label); color: var(--moon); }
.tp-exam h2 { font: var(--t-subtitle); margin-top: 6px; }
.tp-exam .es { font: var(--t-label); color: var(--text-2); margin-top: 2px; }
.tp-exam .glowm { position: absolute; inset-inline-end: -30px; top: -40px; width: 160px; height: 160px; border-radius: var(--r-round); background: var(--glow-moon); opacity: .45; pointer-events: none; }
.tp-exam .mn { position: absolute; inset-inline-end: 20px; top: 18px; }
.tp-exam .steps { list-style: none; margin: 14px 0 16px; padding: 0; }
.tp-exam .steps li { position: relative; }
.tp-exam .steps li + li::before { content: ''; position: absolute; top: 0; inset-inline: 40px 0; height: 1px; background: var(--line); }
.tp-exam .steps button { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.tp-exam .n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--r-round); background: var(--surface-3); font: var(--t-caption); font-weight: 700; }
.tp-exam .st { flex: 1; font: var(--t-body); }
.tp-exam .st small { display: block; font: var(--t-caption); color: var(--text-2); }
.tp-exam .mins { font: var(--t-caption); color: var(--text-2); }
.tp-exam > .btn { width: 100%; }

/* ===== لوح «أضف» (s1d) */
.qa-sheet .qa { padding: 0 4px 4px; }
.qa-h { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 14px; }
.qa-h h2 { font: var(--t-head); }
.qa-x { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.qa-field { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 6px 0 16px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface-2); }
.qa-field input { flex: 1; min-width: 0; height: 50px; border: 0; background: none; color: var(--text); font: var(--t-body); outline: none; }
.qa-field:focus-within { box-shadow: var(--ring-on); }
.qa-mic { width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); cursor: pointer; }
.qa-mic.on { color: var(--rose); }
.qa-parse { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: var(--r-field); background: var(--moon-wash); }
.qa-parse[hidden] { display: none; }
.qa-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qa-pt b { font: var(--t-label); font-weight: 700; }
.qa-pt small { font: var(--t-caption); color: var(--text-2); }
.qa-ok { color: var(--moon); flex: none; }
.qa-dot { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-round); background: var(--surface-3); flex: none; }
.qa-lab { font: var(--t-caption); color: var(--text-2); margin: 18px 2px 8px; }
.qa-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.qt { height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; border: 0; border-radius: var(--r-field); background: var(--surface-2); font: var(--t-caption); color: var(--text-2); white-space: nowrap; cursor: pointer; }
.qt .ic { color: var(--text); }
.qt.on { box-shadow: var(--ring-on); color: var(--text); font-weight: 700; background: var(--surface-3); }
.qa-go { width: 100%; min-height: 52px; }

/* ===== فجر: القمر بحبره، والأسطح أفتح درجة */
:root[data-theme="dawn"] :is(.tp-mark, .tp-exam .ek, .qa-ok) { color: var(--moon-ink); }
:root[data-theme="dawn"] .qt:not(.on) { background: var(--surface-3); }

@media (min-width: 768px) { .tp-h1 { font: var(--t-display); } }

/* أيام لوح المحاضرة: سبعة (السبت أول)، لمسة 44 وتلتف لو ضاق السطر */
.tm .tp-days { flex-wrap: wrap; gap: 6px; }
.tm .tp-days .tm-dch { flex: 1 0 44px; min-width: 44px; min-height: 44px; padding-inline: 4px; }
/* FR-11: الجملة سطرين داخل القوس، فالقمر والقوس نفسه ما يغطون «على يومك» في المغرب */
.tp-nx.empty p { max-width: min(200px, 56%); margin-inline: auto; text-wrap: balance; }
/* css/b2-today.css */
/* منظّمي — إضافات «اليوم» و«ذاكرها» (الدفعة 2، اعتمدها المالك 8 نوفمبر: design-reference/batch2/a es1، es2، tx1، st1، st2):
   عدّاد موسم الاختبارات بدل قوس اليوم، لوح «كم جبت؟»، شريحة الغياب الجمرية، «كيف مشى يومك؟» وأقمار «أيامك»،
   وبطاقة «ذاكرها» العلوية (أول رفع / وش يجي في اختبارك). المتغيرات فقط، والحركة transform/opacity، والمظاهر الثلاثة. */

/* ===== موسم الاختبارات: عدّاد على قوس من «الحين» لآخر اختبار (es1) */
.es-cd { position: relative; height: 222px; margin: 4px -16px 0; overflow-x: clip; } /* توهج القمر يطلع تحت مثل النموذج */
.es-in { position: absolute; top: 0; left: 50%; width: 390px; height: 222px; transform: translateX(-50%); }
.es-in > svg { position: absolute; inset: 0; width: 390px; height: 222px; direction: ltr; z-index: 1; }
.es-in .arc-glow { left: 297px; top: 144px; }
.es-moon { position: absolute; left: 331px; top: 182px; z-index: 2; pointer-events: none; }
.es-in .mid { position: absolute; inset-inline: 0; top: 78px; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 2; text-align: center; }
.es-in .when { height: 26px; border-radius: var(--r-pill); padding: 0 12px; display: inline-flex; align-items: center; font: var(--t-caption); color: var(--text-2); background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.es-in .num { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.es-in .num b { font: var(--t-num-xl); font-feature-settings: "tnum"; }
.es-in .num span { font: var(--t-subtitle); color: var(--text-2); }
.es-in .what { display: flex; align-items: center; gap: 8px; max-width: 300px; font: var(--t-label); color: var(--text-2); }
.es-in .what > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-lab { font: var(--t-micro); fill: var(--text-3); }
.cd-lab.on { fill: var(--text); font-weight: 700; }

/* «اختباراتك» أول «القادم»: «كم جبت؟» للي فات و«جاهز؟» للجاي */
.es-ex .es-act { min-width: 80px; }

/* «جاهز؟»: خطة ليلة الاختبار في لوح */
.tp-exam.es-ready { margin-top: 0; padding: 4px 2px 0; }

/* ===== «كم جبت؟» (es2) */
.es-score { display: flex; flex-direction: column; }
.es-sh { display: flex; align-items: center; gap: 10px; margin: 0 2px 4px; }
.es-sh h3 { flex: 1; min-width: 0; font: var(--t-head); overflow-wrap: anywhere; }
.es-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--text-2); cursor: pointer; }
.es-x .ic { box-sizing: content-box; padding: 8px; border-radius: var(--r-round); background: var(--surface-2); }
.es-x:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-round); }
.es-sub { font: var(--t-label); color: var(--text-2); margin: 0 2px 14px; }
.es-score .score { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 10px 0 6px; }
.es-score .score b { font: var(--t-num-xl); font-feature-settings: "tnum"; display: inline-flex; align-items: center; }
.es-score .caret { display: inline-block; width: 2px; height: 56px; margin-inline-start: 4px; border-radius: var(--r-hair); background: var(--rose); animation: es-caret 1s steps(2, start) 8; }
.es-score .score > span, .es-max { font: var(--t-subtitle); color: var(--text-2); }
.es-max { min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.es-max.on { background: var(--surface-2); color: var(--text); }
.es-max:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.score-note { text-align: center; font: var(--t-caption); color: var(--text-2); min-height: 18px; }
.score-note b { color: var(--moon); font-weight: 700; }
.score-note.bad { color: var(--ember); }
.es-score .keys { direction: ltr; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 14px; }
.es-score .keys > button, .es-score .keys > .blank { height: 48px; border-radius: var(--r-field); display: grid; place-items: center; }
.es-score .keys > button { padding: 0; border: 0; background: var(--surface-2); color: var(--text); font: 500 22px/1 var(--font); font-feature-settings: "tnum"; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.es-score .keys > button:active { transform: scale(.96); }
.es-score .keys > button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.es-save { width: 100%; }
.es-later { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 0; border: 0; background: none; font: var(--t-label); color: var(--text-2); text-align: center; cursor: pointer; }
.es-later:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-field); }
@keyframes es-caret { to { opacity: 0; } }

/* ===== «اليوم» بالليل (tx1): شريحة الغياب الجمرية مثبّتة أول وحدة، و«كيف مشى يومك؟» */
.tp-pin.tp-ember { background: var(--ember-wash); color: var(--ember); box-shadow: none; font-weight: 700; }
.tp-pin.tp-ember .ic { color: var(--ember); }
.es-scorerow .tp-t, .tn-mood .tp-t { color: var(--text-2); }
.tn-mood { gap: 12px; }
.tn-mood .rt { flex: 1; min-width: 0; }
.tn-phases { display: flex; gap: 6px; flex: none; }
.tn-phases > button { position: relative; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-round); background: var(--surface-2); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.tn-phases > button::before { content: ''; position: absolute; inset: -2px; }
.tn-phases > button:active { transform: scale(.94); }
.tn-phases > button.on { box-shadow: var(--ring-moon-2); }
.tn-phases > button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* «أيامك» في «سماك»: أقمار آخر 14 يوم */
.tn-sky { margin-top: 16px; }
.tn-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px 4px; padding-block: 12px; }
.tn-day { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.tn-day > i { display: block; width: 20px; height: 20px; border-radius: var(--r-round); box-shadow: var(--ring-line-15); }
.tn-day small { font: var(--t-micro); color: var(--text-3); white-space: nowrap; }

/* ===== بطاقة «ذاكرها» العلوية (st1 أول رفع، st2 وش يجي في اختبارك) */
.top1 { margin: 0 0 16px; padding: 18px; position: relative; overflow: hidden; }
.top1 .k { display: flex; align-items: center; gap: 6px; font: var(--t-label); color: var(--text-2); }
.top1 h2 { font: var(--t-subtitle); margin-top: 4px; }
.top1 p { font: var(--t-label); color: var(--text-2); margin-top: 4px; }
.top1 .row2 { display: flex; gap: 8px; margin-top: 16px; position: relative; }
.top1 .row2 .btn { flex: 1; gap: 6px; }
.up-art { position: absolute; left: 18px; top: 18px; width: 56px; height: 70px; border-radius: var(--r-thumb); border: 1.5px dashed var(--text-3); display: grid; place-items: center; color: var(--text-2); }
.top1.up .txt { padding-left: 70px; }
.cs-panel.locked .list-row { opacity: .45; }
.lock-note { font: var(--t-caption); color: var(--text-2); margin: -6px 6px 16px; }
.top1.exam-top .glowm { position: absolute; left: -40px; top: -50px; width: 170px; height: 170px; border-radius: var(--r-round); background: var(--glow-moon); opacity: .4; pointer-events: none; }
.top1.exam-top .k { color: var(--moon); position: relative; }
.topics { list-style: none; margin: 12px 0 0; padding: 0; position: relative; }
.topics li { display: flex; align-items: center; gap: 12px; min-height: 52px; position: relative; }
.topics li + li::before { content: ''; position: absolute; top: 0; left: 0; right: 40px; height: 1px; background: var(--line); }
.topics .n { width: 28px; height: 28px; border-radius: var(--r-round); display: grid; place-items: center; font: 700 13px/1 var(--font); background: var(--surface-3); flex: none; }
.topics .st { flex: 1; min-width: 0; }
.topics .st b { display: block; font: 500 15px/22px var(--font); overflow-wrap: anywhere; }
.topics .st small { display: block; font: var(--t-caption); color: var(--text-2); }
.topics .hits { display: flex; gap: 3px; flex: none; }
.topics .hits i { width: 6px; height: 14px; border-radius: var(--r-tick); background: var(--line); }
.topics .hits i.on { background: var(--moon); }
.src-line { font: var(--t-caption); color: var(--text-3); margin-top: 6px; position: relative; }

/* ===== فجر */
:root[data-theme="dawn"] :is(.es-x .ic, .es-max.on, .es-score .keys > button, .tn-phases > button) { background: var(--surface-3); }
:root[data-theme="dawn"] :is(.score-note b, .top1.exam-top .k) { color: var(--moon-ink); }
:root[data-theme="dawn"] .topics .hits i.on { background: var(--moon-ink); }
:root[data-theme="dawn"] .tn-phases > button.on { box-shadow: var(--ring-moon-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .es-score .caret { animation: none; }
  .es-score .keys > button, .tn-phases > button, .es-max { transition: none; }
}
/* css/comeback.css */
/* منظّمي — «الشوط الثاني» و«المدرب» (js/views-comeback.js وjs/coach.js) من النموذج المعتمد design-reference/second-half/*.css.
   متغيرات نظام التصميم فقط، والحركة transform/opacity. */
.sh-page { padding-bottom: var(--space-8); }
.sh-full { width: 100%; }
.sh-cap { margin: var(--space-3) 0 0; font: var(--t-caption); color: var(--text-3); text-align: center; }
.sh-kick { margin: 0; font: var(--t-micro); letter-spacing: .02em; color: var(--moon); }
.sh-q { margin: var(--space-2) 0 0; font: var(--t-label); font-weight: 700; color: var(--text); }

/* بطاقة الرئيسية */
.sh-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.sh-card-top { display: flex; justify-content: space-between; align-items: center; }
.sh-min { font: var(--t-caption); color: var(--text-2); }
.sh-h { margin: 0; font: var(--t-title); color: var(--text); }
.sh-p { margin: 0 0 var(--space-2); font: var(--t-label); color: var(--text-2); }
.sh-week { display: flex; align-items: center; gap: var(--space-3); }
.sh-week small { font: var(--t-caption); color: var(--text-2); }

/* شريط المباراة */
.sh-pitch { margin: var(--space-3) 0 var(--space-4); }
.sh-track { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--surface-3); }
.sh-fill { position: absolute; inset-block: 0; right: 0; border-radius: var(--r-pill); background: var(--moon); opacity: .55; }
.sh-half { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--text-3); transform: translateX(50%); }
.sh-ball { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: var(--r-pill); background: var(--text); outline: 3px solid var(--surface); transform: translate(50%, -50%); }
.sh-now { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: var(--r-pill); background: var(--moon); outline: 4px solid var(--surface); box-shadow: var(--glow-moon); transform: translate(50%, -50%); }
.sh-ticks { display: flex; justify-content: space-between; margin-top: var(--space-2); font: var(--t-micro); color: var(--text-3); }

/* ملخص بالأرقام (بطاقة أرقام، مو قائمة) */
.sh-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); width: 100%; }
.sh-sum > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-card); background: var(--surface-2); }
.sh-sum b { font: var(--t-display); font-size: var(--fs-title); color: var(--text); line-height: 1.1; }
.sh-sum small { font: var(--t-caption); color: var(--text-2); }

/* صفوف المواد */
.sh-row { width: 100%; gap: var(--space-3); border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.sh-row .list-row-main, .sh-sheet .list-row-main, .sh-dec .list-row-main, .sh-ml .list-row-main, .sh-page .list-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sh-row small, .sh-sheet small, .sh-page .list-row small, .sh-ml small { font: var(--t-caption); color: var(--text-2); white-space: normal; }
.sh-row small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); }
.sh-dot { width: 3px; height: 3px; border-radius: var(--r-pill); background: var(--text-3); }
.sh-warn { color: var(--warn); }
.sh-tag { flex: none; padding: 5px 10px; border-radius: var(--r-pill); font: var(--t-micro); }
.sh-calm { background: var(--surface-2); color: var(--ok); }
.sh-push { background: var(--surface-3); color: var(--text); }
.sh-decide { background: var(--warn-bg); color: var(--warn-fg); }

/* الأوراق */
.sh-sheet { display: flex; flex-direction: column; gap: var(--space-3); }
.sh-swap { animation: sh-swap var(--dur-2) var(--ease-out) both; }
.sh-ask-top { display: flex; align-items: center; gap: var(--space-3); }
.sh-ask-top b { display: block; font: var(--t-label); font-weight: 700; color: var(--text); }
.sh-score { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-3) 0; }
.sh-big { font: var(--t-display); font-size: var(--fs-hero); color: var(--text); line-height: 1; }
.sh-in { width: 3.2ch; padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; text-align: center; caret-color: var(--moon); }
.sh-in::placeholder { color: var(--text-3); }
.sh-in:focus-visible { outline: none; border-bottom-color: var(--moon); }
.sh-of { font: var(--t-label); color: var(--text-2); }
.sh-step { width: 48px; height: 48px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: var(--t-title); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.sh-step:active { transform: scale(var(--press-scale)); }
.sh-result b .num, .sh-dec b .num { color: var(--moon); }

/* أعتذر ولا أكمل */
.sh-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.sh-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-card); background: var(--surface-2); text-align: center; }
.sh-opt.on { outline: 1.5px solid var(--moon); outline-offset: -1.5px; }
.sh-opt small { font: var(--t-caption); color: var(--text-2); }
.sh-opt b { font: var(--t-display); font-size: var(--fs-title); color: var(--text); }
.sh-opt span { font: var(--t-micro); color: var(--text-3); }
.sh-dec { margin: var(--space-3) 0 var(--space-4); }
.sh-page .list-panel + .list-panel { margin-top: var(--space-3); }

/* لحظات بملء الشاشة (هدف، يوم المباراة، أول دقيقة، الليل) */
.sh-moment .mz-nn-in { height: auto; min-height: 100%; }
.sh-mc { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: 88px var(--space-4) var(--space-6); text-align: center; }
.sh-mc .sh-pitch { width: 100%; }
.sh-goal { margin: 0; font: var(--t-display); font-size: var(--fs-hero); color: var(--text); animation: sh-in var(--dur-3) var(--ease-spring) both; }
.sh-mh { margin: 0; font: var(--t-title); color: var(--text); }
.sh-ms { margin: 0; font: var(--t-label); color: var(--text-2); }
.sh-ba { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-2) 0; }
.sh-ba > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; padding: var(--space-3); border-radius: var(--radius-card); background: var(--surface-2); }
.sh-ba > div.on { outline: 1.5px solid var(--moon); outline-offset: -1.5px; }
.sh-ba small, .sh-ba span { font: var(--t-caption); color: var(--text-2); }
.sh-ba b { font: var(--t-display); font-size: var(--fs-title); color: var(--text); }
.sh-arrow { color: var(--text-3); }
.sh-ml { width: 100%; text-align: start; }
.sh-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.pf-chip { padding: 8px 14px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); font: var(--t-caption); color: var(--text-2); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.pf-chip:active { transform: scale(var(--press-scale)); }
.pf-chip.on { background: var(--text); color: var(--surface); }
@keyframes sh-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sh-swap { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sh-goal, .sh-swap { animation: none; } }

/* ===== المدرب (js/coach.js) من design-reference/second-half/coach.css */
.ch-mark { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; overflow: visible; }
.ch-mark svg { flex: none; }
.ch-ask:active { transform: scale(var(--press-scale)); }
.ch-sheet { display: flex; flex-direction: column; gap: var(--space-3); }
.ch-sheet .list-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ch-sheet small { font: var(--t-caption); color: var(--text-2); }
.ch-sheet .list-row-main small { display: block; white-space: normal; overflow: visible; }
.ch-sheet .list-head { display: flex; justify-content: space-between; }
.ch-head { display: flex; align-items: center; gap: var(--space-3); }
.ch-head > div { display: flex; flex-direction: column; gap: 2px; }
.ch-head b { font: var(--t-label); font-weight: 700; color: var(--text); }
.ch-when { flex: none; font: var(--t-micro); color: var(--text-3); }
.ch-said { padding: var(--space-3); border-radius: var(--radius-card); background: var(--surface-2); }
.ch-said small { display: block; margin-bottom: 4px; font: var(--t-micro); color: var(--text-3); }
.ch-said p { margin: 0; font: var(--t-label); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-write { position: relative; }
.ch-write textarea { display: block; width: 100%; min-height: 96px; padding: 0 0 var(--space-6); border: 0; background: none; font: var(--t-label); color: var(--text); resize: none; caret-color: var(--moon); }
.ch-write textarea::placeholder { color: var(--text-3); }
.ch-write textarea:focus-visible { outline: none; }
.ch-write:focus-within { outline: 1.5px solid var(--moon); outline-offset: -1.5px; }
.ch-write .ch-in-mic { position: absolute; inset-inline-end: var(--space-2); bottom: var(--space-2); }
.ch-ask { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border: 0; border-radius: var(--r-pill); background: var(--surface-2); font: inherit; text-align: start; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.ch-ask-in { flex: 1; font: var(--t-label); color: var(--text-3); }
.ch-mic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: var(--r-pill); background: var(--text); color: var(--surface); }
.ch-in-mic { width: 36px; height: 36px; cursor: pointer; transition: opacity var(--dur-1) var(--ease-out); }
.ch-in-mic.on { background: var(--moon); }
.ch-night .sh-mc { gap: var(--space-4); }
.ch-first .sh-mc .ch-write { width: 100%; max-width: 420px; text-align: start; }
.ch-end { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.ch-tick { position: relative; padding: var(--space-1) var(--space-3); border: 0; border-radius: var(--r-pill); background: var(--surface-2); font: var(--t-micro); color: var(--text-2); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.ch-tick::after { content: ''; position: absolute; inset: -12px -4px; } /* مساحة اللمس 44 بدون ما يكبر شكله */
.ch-tick:active { transform: scale(var(--press-scale)); }
/* حركات مرة وحدة: «خلصته» الصف يطلع، و«تمام» المواعيد ترتفع والنجمة تمسكها */
.ch-gone { animation: ch-gone var(--dur-2) var(--ease-out) both; }
.ch-handoff .list-panel .list-row { animation: ch-lift var(--dur-3) var(--ease-out) both; }
.ch-handoff .ch-head .ch-mark { animation: ch-take var(--dur-3) var(--ease-spring) both; }
@keyframes ch-gone { to { opacity: 0; transform: translateX(-16px); } }
@keyframes ch-lift { to { opacity: 0; transform: translateY(-12px); } }
@keyframes ch-take { 50% { transform: scale(1.3); } to { transform: none; } }
.ch-bigstar { display: grid; place-items: center; animation: sh-in var(--dur-3) var(--ease-spring) both; }
.ch-sub { margin: 0; font: var(--t-caption); color: var(--text-3); }
.ch-sub:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .ch-bigstar, .ch-gone, .ch-handoff .list-row, .ch-handoff .ch-mark { animation: none; } }
/* «ليش؟» تحت كلام المدرب، و«ما فهمت» (design-reference/second-half/coach-door.js) */
.ch-why { display: flex; align-items: center; gap: 6px; margin: var(--space-2) 0 0; font: var(--t-caption); color: var(--text-3); }
.ch-why span { flex: 1; }

/* المدرب يشتغل قدامك (js/coach-work.js؛ المالك 30 أكتوبر 13:10 «وريه زي كلاود»، واعتمده 13:29): سطر لكل أداة يلمع وهو يشتغل
   ثم يصير ماضي بنتيجته، وخط رفيع يربط الخطوات، وتنطوي في سطر واحد بعد الجواب. الحركة transform/opacity فقط */
.cw-steps { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.cw-s { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-3); }
.cw-s:last-child { padding-bottom: 0; }
.cw-s:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 12px; top: 28px; bottom: 4px; width: 1px; background: var(--line); }
.cw-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); }
.cw-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
.cw-tx b { font: var(--t-label); font-weight: 600; color: var(--text-2); overflow-wrap: anywhere; }
.cw-tx small { font: var(--t-caption); color: var(--text-3); overflow-wrap: anywhere; }
.cw-s.is-fail b { color: var(--text-3); }
.cw-s.is-run .cw-ic { background: none; }
.cw-s.is-run .cw-ic svg { animation: cw-pulse var(--dur-spin) var(--ease-io) infinite alternate; }
/* اللمعة: نسخة ثانية من النص بلون أقوى تمر شريطاً من اليمين لليسار؛ الإطار يتحرك والنص داخله يرجع بنفس المقدار فيثبت مكانه */
.cw-sh { position: relative; display: inline-block; max-width: 100%; overflow: hidden; vertical-align: top; }
.cw-sh > span:first-child { color: var(--text-3); }
.cw-band { position: absolute; inset: 0; color: var(--text); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, var(--text) 50%, transparent 70%); mask-image: linear-gradient(90deg, transparent 30%, var(--text) 50%, transparent 70%);
  animation: cw-sweep calc(var(--dur-4) * 3) linear infinite; }
.cw-band > span { display: block; white-space: nowrap; animation: cw-back calc(var(--dur-4) * 3) linear infinite; }
.cw-bar { display: block; width: 160px; max-width: 100%; height: 3px; margin-top: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.cw-bar i { display: block; height: 100%; background: var(--star); transform-origin: right; transform: scaleX(var(--p, 0)); transition: transform var(--dur-3) var(--ease-out); }
/* بعد الجواب: سطر واحد بأيقونات الأدوات متراكبة، ينفتح بضغطة */
.cw-sum { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; margin: 0 0 var(--space-3); padding: 0 var(--space-3) 0 var(--space-2);
  border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: var(--t-caption); cursor: pointer; }
.cw-stack { display: inline-flex; }
.cw-stack .cw-ic { width: 22px; height: 22px; border: 2px solid var(--surface-2); background: var(--surface-3); }
.cw-stack .cw-ic + .cw-ic { margin-inline-start: -8px; }
.cw-chev { display: grid; place-items: center; transform: rotate(90deg); transition: transform var(--dur-2) var(--ease-out); }
.cw-sum[aria-expanded="true"] .cw-chev { transform: rotate(-90deg); }
.cw-ok { margin-top: var(--space-4); }
/* رد المدرب بأسطر (خطة، خيارات): كل «• » سطر لحاله */
.cw-say { white-space: normal; }
.cw-say > p { margin: 0; }
.cw-say > * + * { margin-top: var(--space-2); }
.cw-say .cw-h { margin-top: var(--space-5); font: var(--t-body); font-weight: 700; color: var(--text); }
.cw-say > .cw-h:first-child { margin-top: 0; }
.cw-say .cw-list { margin: var(--space-1) 0 0; padding-inline-start: var(--space-5); }
.cw-say .cw-list li + li { margin-top: var(--space-2); }
/* رقم الخطوة عنصر حقيقي «1.» في أول السطر (أرقام القائمة في RTL تطلع «.1») */
.cw-say ol.cw-list { list-style: none; padding-inline-start: 0; }
.cw-say ol.cw-list li { display: flex; gap: var(--space-2); }
.cw-say .cw-n { flex: none; min-width: 1.4em; direction: ltr; unicode-bidi: isolate; text-align: end; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cw-say b { font-weight: 700; color: var(--text); }
.cw-ok .cmd-th-btns { margin-top: var(--space-3); }
/* تعديل في بطاقة التأكيد: قبل ← بعد في صف واحد */
/* الجديد هو اللي لازم يبان قبل الضغطة: الاسم الطويل ينزل سطر بدل ما ينقص */
.cmd .list-row-main .cw-diff { flex-wrap: wrap; white-space: normal; overflow: visible; }
.cw-diff s { color: var(--text-3); }
.cw-diff em { font-style: normal; font-weight: 600; color: var(--text); }
.cw-meta { flex: none; font: var(--t-label); color: var(--text-2); }
.cmd-okline svg { flex: none; margin-inline-end: 6px; }
.cmd-okline.is-dim { color: var(--text-3); }
/* أستاذ المادة في نفس المحادثة: سطر التحويل بخطين رفيعين */
.cmd-hand { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; font: var(--t-caption); color: var(--text-3); }
.cmd-hand::before, .cmd-hand::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.cmd-hand span { display: inline-flex; align-items: center; gap: 6px; }
/* الدخول والخروج: كل سطر جديد يطلع بهدوء، والمنطوي يختفي قبل ما يحل محله سطر الملخص */
.cw-s, .cw-new { animation: cw-in var(--dur-2) var(--ease-out) both; }
.cw-s.is-now small { animation: cw-in var(--dur-2) var(--ease-out) both; }
.cw-fold { animation: cw-out var(--dur-2) var(--ease-out) both; }
@keyframes cw-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes cw-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes cw-pulse { from { opacity: .55; transform: scale(.85); } to { opacity: 1; transform: scale(1.1); } }
@keyframes cw-sweep { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@keyframes cw-back { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* لوح المدرب (js/coach-chat.js): نجمة الشعار مكان الشهاب في الرأس والخانة، والمايك جنب المشبك (المعتمد 13:29) */
.cmd :is(.cmd-clip, .cmd-mic)[hidden] { display: none; }
.cmd.is-coach .cmd-th-h > .ch-mark { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .cw-s, .cw-new, .cw-fold, .cw-s.is-now small, .cw-s.is-run .cw-ic svg { animation: none; }
  .cw-band { display: none; }
  .cw-sh > span:first-child { color: var(--text-2); }
}

/* ===== ملفات مدربك (js/coach-files.js، النموذج المعتمد design-reference/coach-tools 31 أكتوبر 17:56):
   زر + بقائمة فوقه والمحادثة تخفت، والملف مربع فوق الخانة بـ ✕، ورسالتك ببطاقته، والخطوة الجاية باهتة، و«تقدر تطلع»، وأول الملخص */
.cf-anchor { position: relative; height: 0; margin: 0 16px; z-index: 2; }
.cf-menu { position: absolute; bottom: 8px; inset-inline-end: 0; width: min(300px, 100%); max-height: min(60vh, 420px); overflow-y: auto; margin: 0;
  background-color: var(--surface-sheet); box-shadow: var(--shadow-float); /* معتمة: «فجر» سطوحه شفافة */
  transform-origin: left bottom; animation: cf-pop var(--dur-2) var(--ease-sheet) both; }
.cf-menu .list-row { min-height: 60px; }
.cf-menu .cf-none { min-height: 48px; }
.cf-menu .cf-ask { margin: 8px 16px 2px; }
.cf-shade { position: absolute; inset: 0; z-index: 1; background: var(--scrim); opacity: .85; animation: cf-fade var(--dur-2) var(--ease-out) both; }
.cmd .cmd-clip.is-on { background: var(--surface-2); color: var(--text); }
.cmd .cmd-clip svg { transition: transform var(--dur-2) var(--ease-sheet); }
.cmd .cmd-clip.is-on svg { transform: rotate(45deg); }
@keyframes cf-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes cf-fade { from { opacity: 0; } }
.cf-tray { flex: none; margin: 0 16px 8px; animation: cf-up var(--dur-2) var(--ease-sheet) both; }
.cf-tray .cmd-chips { margin: 0 0 10px; }
.cf-file { display: flex; align-items: center; gap: var(--space-3); width: fit-content; max-width: 100%; min-height: 56px; padding: 8px 8px 8px 14px;
  border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); box-shadow: var(--rim); color: var(--text); font: inherit; text-align: start; }
button.cf-file { cursor: pointer; }
.cf-file .cf-doc { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-chip); background: var(--surface-2); color: var(--text-2); }
.cf-file .cf-doc small { font: var(--t-micro); font-weight: 700; color: var(--rose); }
.cf-file .list-row-main { min-width: 0; }
.cf-file .list-row-main b { display: block; font: var(--t-label); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.cf-file .list-row-main small { display: block; margin-top: 2px; font: var(--t-caption); color: var(--text-2); white-space: nowrap; }
.cf-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
@keyframes cf-up { from { opacity: 0; transform: translateY(10px); } }
/* ملف مرفق: اقتراحات البداية تختفي، فما يصير فيه صفين اقتراحات */
.cmd.cf-has-file .cmd-body .cmd-chips { display: none; }
.cf-me { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 18px; }
.cf-me .cf-file { margin-bottom: 6px; padding-inline-end: 14px; }
.cf-me .bub-me { margin: 0; }
.cw-s.is-next .cw-ic { background: none; border: 1px dashed var(--line); }
.cw-s.is-next b { color: var(--text-3); font-weight: 500; }
.cf-away { display: flex; align-items: center; gap: 6px; margin: var(--space-3) 0 0; font: var(--t-caption); color: var(--text-2); }
.cf-away .cmd-undo { margin-inline-start: auto; }
.cf-peek { margin-top: 12px; white-space: normal; }
.cf-peek b { display: block; margin-bottom: 4px; font: var(--t-label); font-weight: 700; }
.cf-peek ul { margin: 0; padding-inline-start: 18px; }
.cf-peek li { font: var(--t-body); color: var(--text); }
.cf-peek li + li { margin-top: 2px; }
@media (min-width: 768px) {
  .cmd.is-home.is-inl .cf-tray, .cmd.is-home.is-inl .cf-anchor { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-menu, .cf-shade, .cf-tray { animation: none; }
  .cmd .cmd-clip svg { transition: none; }
}
/* css/coach-home.css */
/* شهاب AI في محادثته (js/coach-chat.js داخل js/cmd-sheet.js): اسمه و«وش يعرف عنك ›» في الرأس، وأول كلامه، و«انحفظ في ذاكرتي»،
   و«وش أعرف عنك» (js/coach-memory.js). مربع الرئيسية القديم أُزيل (الباب الواحد صار الشهاب في قلب الشريط، js/meteor-sheet.js).
   متغيرات نظام التصميم فقط، والحركة transform/opacity. */
.cmd-th-h .cmd-who b { flex: none; }
.cmd-who { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.cmd-who:disabled { cursor: default; }
.cmd-who b { font: var(--t-cmd-h); color: var(--text); }
.cmd-who small { display: inline-flex; align-items: center; gap: 2px; font: var(--t-caption); color: var(--text-2); }
.cmd-who small .ic { color: inherit; }
.cmd-who small[hidden] { display: none; }
.cmd-th-h .cmd-new { margin-inline-start: auto; }
.cmd-day { display: none; }

.cmd-opener { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.cmd-opener .ch-mark { flex: none; margin-top: 1px; }
.cmd-opener p { margin: 0; font: var(--t-body); color: var(--text); text-wrap: pretty; overflow-wrap: anywhere; }

/* «انحفظ في ذاكرتي» تحت رده */
.chx-saved { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-top: 10px; padding-inline: 10px 12px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-2); font: var(--t-caption); cursor: pointer; }
.chx-saved .ic { color: var(--moon); }
.chx-saved b { margin-inline-start: 4px; font-weight: 500; color: var(--rose); }

/* ===== «وش أعرف عنك»: ذاكرة مدربه قدامه بمصدرها، وكل سطر ينمسح */
.cmd.is-mem :is(.cmd-th-h, .cmd-in, .cmd-snack) { display: none; }
.cmd.is-mem .cmd-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.chx-h { height: 56px; display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-2); }
.chx-prev { margin-inline-start: -10px; }
.chx-ttl { font: var(--t-head); color: var(--text); }
.chx-mintro { margin: 0 0 var(--space-2); font: var(--t-body); color: var(--text-2); }
.chx-mh { margin: var(--space-5) 0 var(--space-2); font: var(--t-label); color: var(--text-2); }
.chx-none { margin: 0; padding: 0 4px; font: var(--t-caption); color: var(--text-3); }
.cmd .chx-mrow { min-height: 60px; padding: 8px 6px 8px 16px; }
.cmd .chx-mrow.cmd-row { padding-inline-end: 12px; }
.chx-mrow .list-row-main { flex: 1; min-width: 0; }
.cmd .chx-mrow .list-row-main b { white-space: normal; }
.chx-wipe { width: 100%; height: 48px; margin-top: var(--space-6); color: var(--rose); }
/* css/app-menu.css */
/* «قائمة أبل» (js/app-menu.js، اعتمدها المالك 6 نوفمبر): زجاج .glass بلون القائمة، تكبر من الزر وتصغر له */
.amenu, .am-closing {
  position: fixed; z-index: 330; /* فوق اللوح (300) والنافذة (310): القائمة تنفتح من داخلهم */
  width: var(--menu-w); max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-1) 0; border-radius: var(--r-sheet);
  background: var(--menu-bg); border-color: var(--menu-rim); box-shadow: var(--menu-drop);
  color: var(--text);
  animation: am-in var(--dur-3) var(--ease-menu) both;
}
.am-closing { animation: am-out var(--dur-1) var(--ease-out) both; pointer-events: none; }
@keyframes am-in { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: scale(1); } }
@keyframes am-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.6); } }
:is(.amenu, .am-closing) .am-cap { display: block; padding: var(--space-2) var(--space-4) var(--space-1); font: var(--t-caption); color: var(--text-3); }
:is(.amenu, .am-closing) .am-sep { height: var(--space-2); background: var(--menu-sep); }
:is(.amenu, .am-closing) .am-row {
  position: relative; width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-4); border: 0; background: transparent; color: inherit;
  font: var(--t-body); text-align: start; cursor: pointer;
}
:is(.amenu, .am-closing) .am-row + .am-row::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px; background: var(--menu-line); transform: scaleY(0.5); }
:is(.amenu, .am-closing) .am-row:active, .amenu .am-row:focus-visible { background: var(--menu-hot); outline: none; }
:is(.amenu, .am-closing) .am-danger { color: var(--semantic-danger); }
:is(.amenu, .am-closing) .am-ck { width: 18px; flex: none; display: grid; place-items: center; }
:is(.amenu, .am-closing) .am-t { flex: 1; min-width: 0; padding-block: var(--space-2); overflow-wrap: anywhere; }
:is(.amenu, .am-closing) .am-t small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: var(--t-caption); color: var(--text-3); }
:is(.amenu, .am-closing) .am-ic { flex: none; display: grid; place-items: center; color: var(--text-2); }
:is(.amenu, .am-closing) .am-ic svg { width: 21px; height: 21px; }
:is(.amenu, .am-closing) .am-danger .am-ic { color: inherit; }
:is(.amenu, .am-closing) .am-dot { width: 12px; height: 12px; border-radius: var(--r-pill); }
@media (prefers-reduced-motion: reduce) { .amenu, .am-closing { animation: none; } }
:is(.amenu, .am-closing) .am-foot { padding-block: var(--space-2); border-block-start: var(--space-2) solid var(--menu-sep); }
:is(.amenu, .am-closing) .am-l { display: block; }
/* css/courses-calm.css */
/* منظّمي — «موادك» وصفحة المادة ولواحها (design-reference/identity screens-core.js وscreens.css §موادك/صفحة المادة، ui.css).
   كل شيء تحت .cz (والألواح تأخذ .cz أيضاً) فلا يمس المكوّنات المشتركة. متغيرات نظام التصميم فقط، والحركة transform/opacity. */
.cz { --paper: var(--paper-bg); --paper-line: var(--paper-ln); --qr-bg: var(--paper-bg); --qr-fg: var(--paper-ink);
  --cz-pt: calc(var(--main-top) + var(--sat, env(safe-area-inset-top, 0px))); --cz-px: 16px; position: relative; z-index: 0; }
@media (min-width: 768px) { .cz { --cz-pt: 40px; --cz-px: 24px; } }
@media (min-width: 1024px) { .cz { --cz-pt: 28px; } }
@media (min-width: 1280px) { .cz { --cz-pt: 40px; --cz-px: 32px; } }
:where(.cz) :where(button, a) { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: none; cursor: pointer; text-align: start; }
.cz .num { font-feature-settings: "tnum"; }
.cz :is(.grow, .rt) { flex: 1; min-width: 0; }
.cz .t2 { color: var(--text-2); } .cz .t3 { color: var(--text-3); } .cz .ember-t { color: var(--ember); } .cz .moon-t { color: var(--moon); } .cz .rose-t { color: var(--rose); }
.cz .ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz .thumb { display: inline-flex; flex-direction: column; gap: 4px; padding: 8px 6px; border-radius: var(--r-thumb); background: var(--paper); flex: none; outline: 1px solid var(--line); }
.cz .thumb i { display: block; height: 2px; border-radius: var(--r-pill); background: var(--paper-line); opacity: .55; }
.cz .thumb i:nth-child(1) { width: 70%; height: 3px; opacity: .8; } .cz .thumb i:nth-child(4) { width: 55%; }
.cz .pw { display: contents; }

/* العناوين والأزرار والشرائح (ui.css) */
.cz .ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.cz .ph h1 { margin: 0; font: var(--t-title); } .cz .ph .sub { font: var(--t-label); color: var(--text-2); margin-top: 2px; }
.cz .iconbtn { width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--text); flex: none; text-align: center; }
.cz .iconbtn.fill { background: var(--surface-2); } .cz .iconbtn.sm { width: 36px; height: 36px; }
.cz .btn { height: 48px; padding: 0 22px; } .cz .btn-secondary { height: 44px; border: 0; } .cz .btn-ghost { height: 44px; }
.cz .btn-sm { height: 40px; padding: 0 16px; } .cz .btn.full { width: 100%; }
.cz .chip { height: 32px; border-radius: var(--r-chip); background: var(--surface-2); padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text); white-space: nowrap; flex: none; }
.cz .chip.on { outline: 1px solid var(--text); outline-offset: -1px; background: var(--surface-3); }
.cz .chip.mini { height: 26px; padding: 0 10px; color: var(--text-2); }
.cz .pchip { height: 26px; border-radius: var(--r-chip); background: var(--surface-2); padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; font: var(--t-caption); color: var(--text-2); flex: none; }
.cz .tag { height: 22px; border-radius: var(--r-chip); background: var(--surface-2); padding: 0 8px; display: inline-flex; align-items: center; font: var(--t-caption); color: var(--text); flex: none; }
.cz .chips { display: flex; gap: 8px; overflow: hidden; }
.cz .card { background: var(--surface); border-radius: var(--r-panel); border: 1px solid var(--line); box-shadow: var(--rim); padding: 20px; transition: none; }

/* القوائم (ui.css .panel.list/.row): الصف 64، العمود الأمامي 40، والفاصل بعده؛ الصف بلا عمود فاصله بعرض اللوح */
.cz .list-panel { margin: 0 0 16px; }
.cz .list-row { width: 100%; gap: 12px; min-height: 64px; }
.cz .list-row.kv, .cz .list-row.nl, .cz .list-row:has(+ .list-row.nl, + .list-row.kv) { --row-lead: 0px; }
.cz .rt b { display: block; font: var(--t-body); font-weight: 500; line-height: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz .rt small { display: flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.cz .rt small.ember-t { color: var(--ember); }
.cz .rt .bar { margin-top: 8px; }
.cz .lead { width: 40px; display: grid; place-items: center; flex: none; }
.cz .rend { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font: var(--t-button); font-feature-settings: "tnum"; flex: none; }
.cz .rend.t3 { font: var(--t-label); color: var(--text-3); }
.cz .rmeta { font: var(--t-caption); color: var(--text-3); flex: none; }
.cz .chev { color: var(--text-3); }
.cz .hit { width: 44px; height: 44px; display: grid; place-items: center; flex: none; margin-inline-end: -10px; }
.cz .cz-head { min-height: 56px; padding: 16px 16px 8px; justify-content: space-between; align-items: baseline; }
.cz .cz-head h2 { margin: 0; font: var(--t-head); } .cz .cz-head a { font: var(--t-nav); }
.cz .cz-head:has(+ :not(.list-row))::after { display: none; }
.cz .list-row.kv { justify-content: space-between; min-height: 56px; }
.cz .list-row.kv small { font: var(--t-label); color: var(--text-2); flex: none; } .cz .list-row.kv b { font: var(--t-body); font-weight: 500; min-width: 0; text-align: end; }
.cz .list-empty { margin: 0; }
.cz .stack3 { display: inline-flex; } .cz .stack3 .pdot { margin-inline-start: -4px; filter: saturate(.35); outline: 2px solid var(--surface); }

/* شريط العنوان المختصر: يلتصق فوق ويظهر مع التمرير (screens.css .navbar) */
.cz-bar { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: 100px 1fr 100px; align-items: center; height: calc(var(--sat, env(safe-area-inset-top, 0px)) + 44px);
  padding: var(--sat, env(safe-area-inset-top, 0px)) 6px 0; margin: calc(-1 * var(--cz-pt)) -16px 0; }
.cz-bar::before { content: ''; position: absolute; inset: 0; background: var(--sky-0); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.cz-bar > * { position: relative; }
.cz-bar .nb-t { grid-column: 2; font: var(--t-head); font-size: var(--fs-sheet-title); line-height: 1.5rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.cz-bar .tb-l { grid-column: 3; display: flex; justify-content: flex-end; }
.cz-bar.root { margin-bottom: -32px; opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
.cz.collapsed .cz-bar::before, .cz.collapsed .cz-bar .nb-t, .cz.collapsed .cz-bar.root { opacity: 1; transform: none; }
.cz.collapsed .cz-bar.root { pointer-events: auto; }
.cz-ipadp .cz-bar { height: 60px; padding: 8px 10px 0; margin: -40px -24px 0; grid-template-columns: 120px 1fr 120px; }
.cz-ipadp .cz-bar.root { margin-bottom: -20px; }

.cz .empty-st { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding-top: 112px; }
.cz .empty-st p { font: var(--t-body); color: var(--text-2); margin: 12px 0 8px; max-width: 240px; }
.cz .empty-st .btn { min-width: 200px; }
.cz .tf-cap { font: var(--t-caption); color: var(--text-3); margin: 6px 18px 16px; }

/* ===== صفحة المادة: الغسلة بحبرها، الرأس، «كمّل»، الأرقام، والتبويبات اللاصقة */
.cz .wash { position: absolute; top: calc(-1 * var(--cz-pt)); inset-inline: calc(-1 * var(--cz-px)); height: 240px; background: linear-gradient(180deg, color-mix(in oklab, var(--wi) 10%, transparent), transparent); pointer-events: none; z-index: -1; }
.cz .ch-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 24px; }
.cz .ch-head.np { margin-top: 0; }
.cz .ch-t { margin: 0; font: var(--t-subtitle); } .cz .ch-m { font: var(--t-caption); color: var(--text-2); margin-top: 2px; }
.cz .ember-chip { color: var(--ember); background: var(--ember-wash); margin: -10px 0 16px; }
.cz .card.hero { padding: 16px; }
.cz .hero-in { display: flex; gap: 14px; align-items: center; }
.cz .hero-in h3 { font: var(--t-head); margin: 2px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz .hero-in small { font: var(--t-caption); display: block; }
.cz .hero-go { display: flex; align-items: center; gap: 14px; } .cz .hero-go small { margin-top: 6px; }
.cz .card.hero .btn { height: 44px; padding: 0 22px; }
.cz .tabwrap { position: sticky; top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 44px); z-index: 6; margin: 24px -16px 0; padding: 0 16px; }
.cz .tabwrap::before { content: ''; position: absolute; inset: -8px 0; background: color-mix(in srgb, var(--sky-0) 92%, transparent); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.cz.tabs-stuck .tabwrap::before { opacity: 1; }
.cz .tabwrap .tab-bar { margin: 0; overflow-x: auto; padding: 3px; -webkit-mask-image: linear-gradient(to left, var(--text) calc(100% - 32px), transparent); mask-image: linear-gradient(to left, var(--text) calc(100% - 32px), transparent); }
.cz .tabwrap .tab-btn { flex: none; padding: 0 12px; font: var(--t-label); color: var(--text-2); }
.cz .tabwrap .tab-btn.active { color: var(--text); font-weight: 700; }
.cz-ipadp .tabwrap { top: 60px; margin: 24px -24px 0; padding: 0 24px; }
.cz-ipadp .tabwrap .tab-bar, .cz-wide .tabwrap .tab-bar { width: fit-content; max-width: 100%; -webkit-mask-image: none; mask-image: none; }
.cz .tabpage { margin-top: 16px; min-height: 660px; }

.cz .tabwrap .tab-bar { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.cz .tabwrap .tab-btn { flex: 1 1 0; padding: 0 8px; }
.cz-ipadp .tabwrap .tab-bar, .cz-wide .tabwrap .tab-bar { width: 100%; max-width: 480px; }
.cz .cz-sub:not(:empty) { margin-top: 16px; }
/* الشاشات الواسعة: لوحان، و«أستاذ المادة» مفتوح دايم */
.cz .panes { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; position: relative; }
@media (max-width: 1279px) { .cz .panes { grid-template-columns: minmax(0, 1fr) 340px; } }
.cz .pm-head { display: flex; justify-content: space-between; align-items: flex-start; }
.cz .pm-head .tb-l { display: flex; gap: 4px; align-items: center; margin-top: -6px; }
.cz-wide .tabwrap { position: relative; top: auto; margin: 24px 0 0; padding: 0; }
.cz-wide .tabwrap .tab-btn { padding: 0 14px; }
.cz-wide .tabpage { min-height: 0; }
.cz .tutorpane { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cz .tp-h { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--line); }
.cz .tp-h div { flex: 1; } .cz .tp-h b { font: var(--t-label); font-size: var(--fs-button); line-height: 1.375rem; font-weight: 700; display: block; }
.cz .tp-h small { display: flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); }
.cz .tp-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 18px 16px; }
.cz .bub-me { background: var(--surface-2); border-radius: var(--r-field); padding: 10px 14px; max-width: 80%; width: fit-content; font: var(--t-body); margin: 0 auto 18px 0; }
.cz .ans { font: var(--t-read); } .cz .ans :is(p, ul, ol) { margin: 0 0 8px; } .cz .ans b, .cz .ans strong { font-weight: 700; }
.cz .srcchips { display: flex; gap: 8px; margin: 12px 0 8px; }
.cz .tp-acts, .cz .tp-starts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cz .tp-hello { font: var(--t-body); color: var(--text-2); margin: 0 0 12px; }
.cz .tp-in { margin: 12px; height: 52px; border-radius: var(--r-pill); background: var(--surface-2); display: flex; align-items: center; gap: 10px; padding: 0 16px 0 6px; flex: none; }
.cz .tp-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: var(--t-body); outline: none; }
.cz .tp-in input::placeholder { color: var(--text-3); }
.cz .tp-in:has(input:focus-visible) { box-shadow: var(--focus-ring); } /* LY-9: التركيز من الكيبورد يبان (input بلا outline) */
.cz .sendc { position: relative; isolation: isolate; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-3); display: grid; place-items: center; flex: none; }
/* الحبر يظهر بالشفافية (transform/opacity فقط) */
.cz .sendc::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ink); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.cz .sendc.on { color: var(--on-ink); } .cz .sendc.on::before { opacity: 1; }


.cz .cz-cards:not(.all) .cz-more { display: none; }
.cz .cz-file .rt small .pchip, .cz .rt small .tag { flex: none; }
.cz .card.ccst { padding: 14px 16px 16px; margin-bottom: 16px; } .cz .ccst svg { display: block; margin: 0 auto 6px; }
.cz .ccst-f { display: flex; align-items: center; justify-content: space-between; }
.cz .ccst-f b { display: block; font: var(--t-label); font-weight: 700; } .cz .ccst-f small { font: var(--t-caption); color: var(--text-2); }
.cz .need-r { margin: 0; font: var(--t-body); } .cz .need-r b { font-weight: 700; } .cz .need-n { margin: 8px 0 0; font: var(--t-caption); }
.cz .att-bar { position: relative; } .cz .att-lim { position: absolute; left: 0; top: -4px; width: 2px; height: 12px; border-radius: var(--r-pill); background: var(--ember); }
.cz .seg2 { display: flex; height: 36px; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--surface-2); flex: none; }
.cz .seg2 button { position: relative; isolation: isolate; display: grid; place-items: center; padding: 0 14px; border-radius: var(--r-pill); font: var(--t-label); color: var(--text-2); }
.cz .seg2 button::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface); box-shadow: var(--rim); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.cz .seg2 button.on { color: var(--text); font-weight: 700; } .cz .seg2 button.on::before { opacity: 1; }
.cz .att-h { display: flex; align-items: center; gap: 8px; font: var(--t-label); }
.cz .swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 4px; padding: 4px 16px 18px; }
.cz .sw { display: flex; flex-direction: column; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); text-align: center; }
.cz .sw i { width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--pi); transition: transform var(--dur-1) var(--ease-out); }
.cz .sw.on { color: var(--text); font-weight: 700; } .cz .sw.on i { outline: 2px solid var(--text); outline-offset: 3px; }
.cz .sw:active i { transform: scale(var(--press-scale)); }

/* الألواح: المشاركة (QR والرابط)، النماذج (بطاقة، حرف المادة، نص)، والقوائم */
.cz.cz-share, .cz.cz-form { display: flex; flex-direction: column; gap: 14px; }
.cz .sh-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.cz .sh-h h2 { margin: 0; font: var(--t-head); } .cz .sh-h small { display: flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); margin-top: 2px; }
.cz .qr-tile { width: 240px; height: 240px; margin: 0 auto; border-radius: var(--r-panel); background: var(--qr-bg); border: 1px solid var(--line); display: grid; place-items: center; font: var(--t-caption); }
.cz .qr { fill: var(--qr-fg); display: block; }
.cz .linkf { height: 44px; border-radius: var(--r-pill); background: var(--surface-2); display: flex; align-items: center; justify-content: center; gap: 10px; font: var(--t-label); color: var(--text-2); }
.cz.cz-share .list-panel { margin: 0; } .cz.cz-share .list-row { min-height: 52px; padding-block: 6px; }
.cz.cz-form .form-label { margin: 0; }
.cz .cz-gprev { display: grid; place-items: center; height: 96px; }
.cz.cz-sheet { margin: 0; }

/* «مادة جديدة» (#modal-course): كوكب مسطح بالحبر المختار وحرفه، والاسم تحته وأنت تكتب */
.ac-modal .modal-body { display: grid; gap: var(--space-3); padding-top: 0; }
.ac-modal .modal-body > *, .ac-grid > * { min-width: 0; }
.ac-prev { display: grid; justify-items: center; align-content: center; gap: var(--space-2); height: 124px; }
.ac-pn { max-width: 80%; overflow: hidden; font: var(--t-label); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ac-f { display: grid; gap: 6px; }
.ac-f > span, .ac-lbl { font: var(--t-caption); font-weight: 700; color: var(--text-3); }
.ac-name .form-control { height: 54px; font: var(--t-head); }
.ac-cols { display: flex; justify-content: space-between; gap: var(--space-1); margin: 0; }
.ac-c { width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-pill); cursor: pointer; background: var(--pi); }
.ac-c.selected { outline: 2px solid var(--text); outline-offset: 3px; }
.ac-more { border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); }
.ac-more summary { display: flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-4); list-style: none; cursor: pointer; }
.ac-more summary::-webkit-details-marker { display: none; }
.ac-more summary span { font: var(--t-label); font-weight: 700; }
.ac-more summary small { flex: 1; font: var(--t-caption); color: var(--text-3); }
.ac-more summary svg { color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
.ac-more[open] summary svg { transform: rotate(180deg); }
.ac-more[open] { display: grid; gap: var(--space-3); padding-bottom: var(--space-4); }
.ac-more[open] > :not(summary) { margin-inline: var(--space-4); }
.ac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ac-go { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cz-bar::before, .cz-bar .nb-t, .cz-bar.root, .cz .tabwrap::before, .cz .sendc::before, .cz .seg2 button::before, .cz .sw i, .ac-more summary svg { transition: none; }
}
.cz .ltrf { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-weight: 700; }

/* «إتقانك» (js/course-mastery.js، design-reference/mastery): الصفوف والبطاقة من صفحة المادة نفسها (.cz .list-row و.card.hero)، وهنا الفروق فقط */
.cz .mq-cap { font: var(--t-caption); color: var(--text-secondary); margin: 0 var(--space-1) var(--space-3); }
.cz .mq-hero { margin-bottom: 0; }
.cz .mq-hero .hero-go .bar { margin-top: var(--space-1); }
.cz .mq-p { font: var(--t-caption); color: var(--text-secondary); margin: 0 0 var(--space-3); }
.cz .mq-hint { text-align: center; }
.cz .mq-plan { margin-top: var(--space-2); }
.cz .mq-h { display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-8) var(--space-1) var(--space-3); }
.cz .mq-h h2 { font: var(--t-head); margin: 0; }
.cz .mq-row .rt { flex: 1; min-width: 0; }
.cz .mq-row .rt small .bar { margin-top: 0; flex: none; }
.cz .mq-row .rt small .ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cz .mq-ok { flex: none; display: grid; place-items: center; width: var(--space-10); }
/* LY-4: مع تكبير النص (200%) تبويبات المادة تنزل سطر ثاني بدل ما تطلع برا الشاشة؛ بالحجم العادي نفس الشكل */
.cz .tabwrap .tab-bar { flex-wrap: wrap; height: auto; min-height: 40px; }
.cz .tabwrap .tab-btn { flex: 1 0 0; min-width: max-content; height: 34px; }
/* css/course-study.css */
/* المواد وصفحة المادة، الجولة 3 (s2، s3، s3b). متغيرات التصميم فقط، والحركة transform/opacity. */

/* موادك وحبة المعدل */
.cz .cz-ph { align-items: center; margin-bottom: 24px; }
.cz .cz-ph .sub { margin: 0 0 2px; }
.cz .cz-gpa { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px 0 16px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--rim);
  font: var(--t-label); color: var(--text-2); white-space: nowrap; flex: none; transition: transform var(--dur-1) var(--ease-out); }
.cz .cz-gpa b { font: var(--t-head); color: var(--text); font-feature-settings: "tnum"; }
.cz .cz-gpa .chev { margin-inline-start: 2px; }
.cz .cz-gpa:active { transform: scale(var(--press-scale)); }
.cz .cz-crow { min-height: 64px; } /* s2: صف المادة 64 والأسفل 54 (.list-row و.short في النموذج) */
.cz .cz-crow .rend .num { font: var(--t-label); color: var(--text-2); } .cz .cz-crow .rend b { font: var(--t-button); color: var(--text); }
.cz .cz-foot .list-row { min-height: 54px; }
.cz .cz-foot .rmeta { color: var(--text-2); font: var(--t-label); }
.cz .cz-cols > .list-panel { margin-bottom: 16px; }

@media (min-width: 1024px) {
  .cz .cz-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 24px; align-items: start; }
}

/* رأس المادة */
.cz .cz-bar .iconbtn.fill { width: 44px; height: 44px; }
.cz .ch-t { display: flex; min-width: 0; }
.cz .ch-name { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; font: inherit; color: var(--text); border-radius: var(--r-s); }
.cz .ch-name .ic { flex: none; transition: transform var(--dur-1) var(--ease-out); }
.cz .ch-name:active .ic { transform: translateY(2px); }
.cz .cz-subh { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.cz .cz-subh h2 { margin: 0; font: var(--t-head); }
.cz .cz-back { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px 0 14px; border-radius: var(--r-pill); background: var(--surface-2); font: var(--t-label); color: var(--text-2); }
.cz .cz-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 28px 4px 12px; }
.cz .cz-cap h2 { margin: 0; font: var(--t-head); } .cz .cz-cap span { font: var(--t-caption); }

/* ذاكرها */
/* «كمّل» مثل s3-course (.cont): مصغّرة 44×56، العنوان سطر واحد بنقاط، والزر صغير */
.cz .card.hero.cs-cont { margin-bottom: 16px; padding: 12px 14px; }
.cz .cs-cont .hero-in { align-items: center; }
.cz .cs-cont .grow { min-width: 0; }
.cz .cs-cont h3 { margin: 0; font: 700 1rem/1.5rem var(--font); }
.cz .cs-cont .bar { margin-top: 8px; }
.cz .cs-cont .cs-pg { margin-top: 4px; font: var(--t-micro); color: var(--text-3); }
.cz .card.hero.cs-cont .cs-go { position: relative; height: 36px; min-height: 36px; padding: 0 14px; font: 700 .875rem/1.25rem var(--font); flex: none; }
.cz .card.hero.cs-cont .cs-go::after { content: ''; position: absolute; inset: -4px 0; } /* مكان اللمس 44 والشكل 36 كالنموذج (.btn.sm) */
.cz .cs-row { min-height: 54px; padding-block: 6px; --row-lead: 48px; } /* s3: صفوف «ذاكرها» 54 (.study .list-row) */
.cz .cs-row .rt small { margin-top: 0; }
.cz .cs-ic { width: 36px; height: 36px; border-radius: var(--r-field); background: var(--surface-2); display: grid; place-items: center; flex: none; color: var(--text); }
.cz .cs-plus { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; margin-inline-start: 8px; border-radius: var(--r-pill); border: 1px solid var(--rose); color: var(--rose); font: var(--t-caption); font-weight: 700; vertical-align: 2px; }
.cz .cs-badge { min-width: 26px; height: 26px; padding: 0 7px; border-radius: var(--r-pill); background: var(--rose); color: var(--on-rose); font: var(--t-caption); font-weight: 700; display: grid; place-items: center; flex: none; }
.cz .cs-mq { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 4px 4px; margin-top: 4px; }
.cz .cs-mq .bar { flex: 1; min-width: 48px; }
.cz .cs-mql { font: var(--t-label); color: var(--text-2); flex: none; }
.cz .cs-mqn { font: var(--t-caption); color: var(--text-2); flex: none; } .cz .cs-mqn b { font: var(--t-label); font-weight: 700; color: var(--text); }
.cz .cs-cards { justify-content: space-between; } .cz .cs-cards .cs-mqn { flex: 1; text-align: end; }

/* الملفات وصف التقييم */
.cz .cz-file, .cz .cz-as { padding-block: 0; }
.cz .cz-fopen { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 64px; padding-block: 10px; }
.cz .cz-fmore { margin-inline-end: -12px; color: var(--text-2); }

/* الدرجات */
.cz .cz-stand { padding: 16px 20px 0; margin-bottom: 16px; }
.cz .st-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; }
.cz .st-n { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.cz .st-n b { font: var(--t-num-s); font-feature-settings: "tnum"; } .cz .st-n span { font: var(--t-label); color: var(--text-2); }
.cz .st-l { font: var(--t-label); flex: none; }
.cz .st-approx { display: block; padding-bottom: 12px; font: var(--t-caption); } /* الأوزان أقل من 100 (CR-7) */
.cz .st-need { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; border-top: 1px solid var(--line); text-align: start; }
.cz .st-need .need-r { flex: 1; }
.cz .cz-as .rend .num { font: var(--t-label); color: var(--text-2); } .cz .cz-as .rend b { font: var(--t-button); color: var(--text); }
.cz .cz-whatif { height: 40px; padding: 0 16px; flex: none; background: transparent; box-shadow: var(--ring-line); }
.cz.cz-needs .chips.wrap { flex-wrap: wrap; margin: 12px 0 16px; overflow: visible; }
.cz.cz-needs .chip { height: 44px; min-width: 56px; justify-content: center; font-weight: 700; }
.cz.cz-needs .need-c { margin: 0; font: var(--t-caption); }

/* الغياب */
.cz .att { padding-block: 14px; align-items: center; }
.cz .att-n b { display: block; font: var(--t-head); } .cz .att-n small { margin: 2px 0 12px; }
.cz .att-dots { display: flex; gap: 6px; }
.cz .att-dots i { flex: 1; max-width: 40px; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); }
.cz .att-dots i.on { background: var(--ember); }
.cz .att-add { flex: none; height: 48px; padding: 0 20px; border-radius: var(--r-pill); }

/* شريط المادة: الدائرتان كاملتان */
.cz-course > .cz-bar { height: calc(var(--sat, env(safe-area-inset-top, 0px)) + 60px); padding-top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 8px); }
.cz-course .tabwrap { top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 60px); }

@media (prefers-reduced-motion: reduce) {
  .cz .cz-gpa, .cz .ch-name .ic { transition: none; }
}
/* LY-4: مع تكبير النص حبة المعدل تنزل تحت «موادك» بدل ما تركب على العنوان */
.cz .cz-ph { flex-wrap: wrap; } .cz .cz-ph .grow { min-width: max-content; }
/* css/time.css */
/* منظّمي — شاشات «الوقت» («سماء واحدة»، design-reference/identity/screens-time.css وui.css): مكوّنات النموذج داخل .tm فقط
   (لوحة، صف، شريحة، تبويب، زر) حتى لا تتأثر بقية الشاشات، ثم الجدول. القيم من متغيرات نظام التصميم، والحركة transform/opacity. */
:root { --tm-moon-ring: 0 0 0 3px color-mix(in srgb, var(--moon) 16%, transparent); --tm-lit-glow: 0 0 0 9px color-mix(in srgb, var(--moon) 20%, transparent), 0 0 0 4px color-mix(in srgb, var(--moon) 30%, transparent); --paper: var(--paper-bg); --paper-line: var(--paper-ln); }

/* ===== مكوّنات النموذج (ui.css) داخل .tm */
.tm { color: var(--text); font: var(--t-body); }
.tm :is(h1, h2, h3, p, ul) { margin: 0; }
.tm .num { font-feature-settings: "tnum"; }
.tm .grow { flex: 1; min-width: 0; }
.tm .t2 { color: var(--text-2); } .tm .t3 { color: var(--text-3); } .tm .rose-t { color: var(--rose); } .tm .ember-t { color: var(--ember); } .tm .moon-t { color: var(--moon); }
.tm .ph { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.tm .ph h1 { font: var(--t-title); } .tm .ph .sub { font: var(--t-label); color: var(--text-2); margin-top: 2px; }
.tm .iconbtn { width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; flex: none; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; text-decoration: none; }
.tm .iconbtn.fill { background: var(--surface-2); }
.tm .topbar { display: flex; align-items: center; justify-content: space-between; height: 44px; margin: -8px -6px 8px; }
.tm .sec-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 10px; }
.tm .sec-h h2 { font: var(--t-head); } .tm .sec-h a, .tm .sec-h .lnk { font: 500 15px/20px var(--font); color: var(--rose); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.tm .panel { background: var(--surface); border-radius: var(--r-panel); border: 1px solid var(--line); box-shadow: var(--rim); }
.tm .list { padding: 0 16px; }
.tm .row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; position: relative; width: 100%; border: 0; background: none; color: inherit; text-align: start; font: inherit; text-decoration: none; }
.tm .row + .row::before { content: ''; position: absolute; top: 0; left: 0; right: 52px; height: 1px; background: var(--line); }
.tm .row .rt { flex: 1; min-width: 0; } .tm .row .rt b { display: block; font: 500 16px/24px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm .row .rt small { display: flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.tm .row .lead { width: 40px; display: grid; place-items: center; flex: none; }
.tm .row .chev { color: var(--text-3); }
.tm .card { background: var(--surface); border-radius: var(--r-panel); border: 1px solid var(--line); box-shadow: var(--rim); padding: 20px; transition: none; }
.tm .numcard { background: var(--surface); border-radius: var(--r-panel); border: 1px solid var(--line); box-shadow: var(--rim); padding: 14px 14px 16px; }
.tm .numcard .n { font: var(--t-num-s); font-feature-settings: "tnum"; } .tm .numcard .l { font: var(--t-caption); color: var(--text-2); margin: 2px 0 10px; display: block; }
.tm .btn { height: 48px; border-radius: var(--r-pill); padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: var(--t-button); white-space: nowrap; border: 0; background: none; color: var(--text); cursor: pointer; text-decoration: none; }
.tm .btn.primary { background: var(--ink); color: var(--on-ink); }
.tm .btn.second { background: var(--surface-2); color: var(--text); height: 44px; }
.tm .btn.text { color: var(--rose); padding: 0 8px; font-weight: 500; height: 44px; }
.tm .btn.full { width: 100%; } .tm .btn.sm { height: 40px; padding: 0 16px; }
.tm .btn.primary .meteor { color: inherit; }
.tm .chip { height: 32px; border-radius: var(--r-chip); background: var(--surface-2); padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text); white-space: nowrap; flex: none; border: 0; cursor: pointer; }
.tm .chip.on { border: 1px solid var(--text); background: var(--surface-3); }
.tm .pchip { height: 26px; border-radius: var(--r-chip); background: var(--surface-2); padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; font: var(--t-caption); color: var(--text-2); }
.tm .tag { height: 22px; border-radius: var(--r-chip); background: var(--surface-2); padding: 0 8px; display: inline-flex; align-items: center; font: var(--t-caption); color: var(--text); flex: none; }
.tm .tag.ember { color: var(--ember); background: var(--ember-wash); }
.tm .chips { display: flex; gap: 8px; overflow: hidden; }
.tm-tabs { display: flex; height: 40px; background: var(--surface-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.tm-tabs > button { flex: 1; display: grid; place-items: center; border-radius: var(--r-pill); font: 500 14px/20px var(--font); color: var(--text-2); white-space: nowrap; padding: 0 12px; border: 0; background: none; cursor: pointer; position: relative; isolation: isolate; }
/* قطعة المفتوح طبقة تحت النص تظهر بالشفافية وحدها (الحركة transform/opacity فقط) */
.tm-tabs > button::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface); box-shadow: var(--rim); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.tm-tabs > .on { color: var(--text); font-weight: 700; }
.tm-tabs > .on::before { opacity: 1; }
.tm .hit { width: 44px; height: 44px; display: grid; place-items: center; flex: none; margin-inline-end: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
.tm .thumb { display: inline-flex; flex-direction: column; gap: 4px; padding: 8px 6px; border-radius: var(--r-thumb); background: var(--paper); flex: none; outline: 1px solid var(--line); }
.tm .thumb i { display: block; height: 2px; border-radius: var(--r-pill); background: var(--paper-line); opacity: .55; }
.tm .thumb i:nth-child(1) { width: 70%; height: 3px; opacity: .8; } .tm .thumb i:nth-child(4) { width: 55%; }
.tm .ses-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: inherit; text-decoration: none; }
.tm .ses-row b { display: block; font: 500 15px/22px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm .ses-row small { display: block; font: var(--t-caption); color: var(--text-2); margin: 2px 0 8px; }
.tm .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.tm .cols2 > div > .sec-h:first-child { margin-top: 0; }
.tm .empty-st { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding-top: 112px; }
.tm .empty-st p { font: var(--t-body); color: var(--text-2); margin: 12px 0 8px; max-width: 240px; }
.tm .empty-st .btn { min-width: 200px; }
.tm button:focus-visible, .tm a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tm .btn:active:not(:disabled), .tm .chip:active, .tm .iconbtn:active { transform: scale(var(--press-scale)); }
.tm .btn, .tm .chip, .tm .iconbtn { transition: transform var(--dur-1) var(--ease-out); }
.tm-snack { position: fixed; z-index: 95; inset-inline: 16px; bottom: calc(118px + env(safe-area-inset-bottom)); height: 48px; border-radius: var(--r-pill); background: var(--surface-2); display: flex; align-items: center; gap: 10px; padding: 0 20px; font: var(--t-label); color: var(--text);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.tm-snack.is-off { opacity: 0; transform: translateY(12px); pointer-events: none; }
.tm-snack small, .tm-snack button { margin-inline-start: auto; font: var(--t-caption); }
.tm-snack button { font: var(--t-label); font-weight: 600; color: var(--rose); border: 0; background: none; height: 44px; padding: 0 4px; cursor: pointer; }
@media (min-width: 768px) { .tm-snack { inset-inline: auto; left: 50%; width: 400px; margin-left: -200px; bottom: 40px; } }

/* ===== رأس الصفحة وشريط العنوان المختصر (يظهر مع التمرير) */
.tm-ph { margin-bottom: 16px; }
.tm-navbar { position: fixed; z-index: 80; top: 0; inset-inline: 0; height: calc(44px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0; display: grid; grid-template-columns: 100px 1fr 100px; align-items: center; pointer-events: none; }
.tm-navbar::before { content: ''; position: absolute; inset: 0; background: var(--sky-0); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.tm-navbar > * { position: relative; pointer-events: auto; }
.tm-navbar .nb-t { grid-column: 2; font: 700 17px/24px var(--font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.tm-navbar .nb-l { grid-column: 3; display: flex; justify-content: flex-end; }
.tm-navbar.root { opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.tm-navbar.root > * { pointer-events: none; }
.tm-scrolled .tm-navbar::before, .tm-scrolled .tm-navbar .nb-t, .tm-scrolled .tm-navbar.root { opacity: 1; transform: none; }
.tm-scrolled .tm-navbar.root > * { pointer-events: auto; }
.tm-push { height: 44px; margin: -8px -6px 0; }
@media (min-width: 768px) { .tm-navbar { display: none; } }
.tm-in { animation: tm-in var(--dur-2) var(--ease-out) both; }
@keyframes tm-in { from { opacity: 0; transform: translateY(6px); } }

/* ===== أدوات مشتركة (screens-time.css) */
.tm-mt { margin-top: 16px; } .tm-mt2 { margin-top: 28px; } .tm-gap { height: 16px; }
.tm .tm-sech { margin-top: 28px; }
.tm-note { font: var(--t-caption); color: var(--text-3); text-align: center; margin: 14px 12px 0; }
.tm-note .tm-notelink { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.tm-cap { display: block; font: var(--t-caption); color: var(--text-3); margin: 16px 2px 8px; }
.tm-ai { display: flex; align-items: center; gap: 8px; } .tm-ai small { font: var(--t-caption); color: var(--text-2); }
.tm-aiT { font: var(--t-head); margin: 6px 0 4px; }
.tm .panel.tm-flat { background: none; border: 0; box-shadow: none; padding: 0; }
.tm-btns { display: flex; gap: 10px; } .tm-btns .btn { flex: 1; height: 48px; } .tm-btns .btn.text { flex: .6; }
.tm-btns.end { justify-content: flex-start; } .tm-btns.end .btn { flex: 0 0 auto; padding-inline: 22px; }
.tm .tm-empty { padding-top: 72px; } .tm .tm-empty .btn { min-width: 180px; }
.tm-bare { overflow: visible; } .tm-bare path { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; } .tm-bare path.b { stroke-dasharray: none; stroke-opacity: .6; }
.tm-past { stroke: var(--text-2); stroke-opacity: .6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tm-fut { stroke: var(--text-3); stroke-width: 2; fill: none; stroke-dasharray: 2 6; stroke-linecap: round; }
.tm-guide { stroke: var(--line); stroke-width: 1; stroke-dasharray: 1 5; }
.tm-nlab { font: var(--t-caption); fill: var(--text-2); } .tm-nlab.late { fill: var(--ember); }
.tm-nlab.halo { paint-order: stroke; stroke: var(--halo, var(--sky-0)); stroke-width: 5px; stroke-linejoin: round; }
.tm-darc { display: block; overflow: visible; }
.tm-stub { overflow: visible; } .tm-stub path { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 3 4; stroke-linecap: round; fill: none; }
.tm-base { stroke: var(--line); stroke-opacity: .6; stroke-width: 1; }
.tm-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px 0 16px -16px; padding-left: 16px; -webkit-mask-image: linear-gradient(to left, var(--text) calc(100% - 40px), transparent); mask-image: linear-gradient(to left, var(--text) calc(100% - 40px), transparent); }
.tm-chips::-webkit-scrollbar { display: none; }
.tm-chips.w48 { -webkit-mask-image: linear-gradient(to left, var(--text) calc(100% - 56px), transparent); mask-image: linear-gradient(to left, var(--text) calc(100% - 56px), transparent); }
.tm-chips .chip { padding-inline-start: 8px; } .tm-chips .chip:not(:has(.planet)) { padding: 0 14px; }
.tm-sheet .tm-chips { margin: 0 -16px; padding: 0 16px; }
.tm-search { height: 44px; border-radius: var(--r-field); background: var(--surface-2); display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--text-3); font: var(--t-body); }
.tm-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: var(--t-body); outline: none; padding: 0; }
.tm-search input::placeholder { color: var(--text-3); }
.tm-search:focus-within { box-shadow: var(--focus-ring); }
.tm-chk { color: var(--text); }

/* ===== اللوح (js/sheet.js بأصناف .tm .tm-sheet) */
.sheet-panel.tm-sheet { padding: 10px 16px calc(34px + env(safe-area-inset-bottom)); }
.sheet-panel.tm-sheet .sheet-body { display: block; }
.tm-shT { font: var(--t-head); text-align: center; margin: 2px 0 16px; }
.tm-shh { display: flex; justify-content: space-between; align-items: center; margin: -6px -8px 8px; }
.tm-shh b { font: var(--t-head); } .tm-shh .btn:first-child { color: var(--text-2); } .tm-w44 { width: 56px; }
.tm-fl { display: flex; flex-direction: column; min-width: 0; position: relative; }
.tm-field { height: 52px; border-radius: var(--r-field); background: var(--surface-2); display: flex; align-items: center; gap: 10px; padding: 0 14px; font: var(--t-body); white-space: nowrap; overflow: hidden; position: relative; color: var(--text); }
.tm-field .tm-fv { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tm-dt { display: flex; } .tm-dt > :first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tm-field input, .tm-field select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: pointer; font: var(--t-body); }
.tm-field input.tm-in-text { position: static; opacity: 1; background: none; color: var(--text); font: var(--t-body); outline: none; padding: 0; cursor: text; }
.tm-field input.tm-in-text::placeholder { color: var(--text-3); }
.tm-field:focus-within { box-shadow: var(--focus-ring); }
.tm-2col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: end; }
.tm-2col.e { grid-template-columns: 1fr 1fr; }
.tm-2col .tm-field { font: var(--t-label); padding: 0 12px; }
.tm-2col .tm-field input.tm-in-text { font: var(--t-label); }

/* ===== الجدول: شريط الأيام */
.tm-days { display: flex; justify-content: space-between; margin: 16px 0 6px; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.tm-days.tm-under { opacity: 0; transform: translateY(-8px); pointer-events: none; }

/* ===== الجدول: التذاكر. المحاضرة المنتهية بألوان أخفت لا بشفافية النص: التباين ≥ 4.5 فوق السماء */

/* ===== الجدول: صفحة الأسبوع */

.tm-week { position: relative; }
.tm-wruler { height: 20px; margin-bottom: 6px; }
.tm-week.side .tm-wruler { margin-right: var(--lab); }
.tm-ruler { display: block; overflow: visible; }
.tm-ruler text { font: var(--t-caption); fill: var(--text-3); }
.tm-wrow { display: flex; flex-direction: column; position: relative; }
.tm-wlab { display: flex; gap: 6px; align-items: baseline; height: 18px; }
.tm-wlab b { font: 500 13px/18px var(--font); color: var(--text-2); }
.tm-wlab small { font: var(--t-caption); color: var(--text-3); font-feature-settings: "tnum"; }
.tm-wrow.today .tm-wlab b, .tm-wrow.today .tm-wlab small { color: var(--text); font-weight: 700; }
.tm-week.side .tm-wrow { flex-direction: row; align-items: stretch; }
.tm-week.side .tm-wlab { width: var(--lab); flex: none; flex-direction: column; justify-content: center; height: auto; gap: 0; }
.tm-week.side .tm-wlab b { font: var(--t-nav); color: var(--text-2); } .tm-week.side .tm-wrow.today .tm-wlab b { color: var(--text); font-weight: 700; }
.tm-week.side .tm-wrow + .tm-wrow { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.tm-warc { position: relative; flex: 1; min-width: 0; }
.tm-seg { position: absolute; z-index: 2; height: 44px; margin-top: -22px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--r-chip); }
.tm-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; font: var(--t-caption); color: var(--text-2); margin-top: 14px; }
.tm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-seg { width: 18px; height: 6px; border-radius: var(--r-pill); background: var(--c-teal); }
.lg-seg.hollow { background: none; outline: 1.5px solid var(--c-teal); outline-offset: -1.5px; }
.tm-legend .notch { width: 10px; height: 20px; }
.tm-legend .pt { box-shadow: var(--tm-moon-ring); }

/* ===== الجدول: التقويم */
.tm-calwrap { margin-top: 34px; }
.tm-sem { position: relative; }
.tm-sem svg { display: block; overflow: visible; margin: 0 auto; }
.tm-sem .arc-end { font: var(--t-caption); fill: var(--text-3); }
.tm-semtx { position: absolute; inset-inline: 0; top: 54px; text-align: center; }
.tm-semtx b { display: block; font: var(--t-head); } .tm-semtx small { font: var(--t-caption); color: var(--text-2); }
.tm .tm-calwrap + .sec-h { margin-top: 40px; }
.tm-cal .row .rt b .tag { vertical-align: 2px; margin-inline-start: 4px; }

/* ===== الجدول: الشاشات الواسعة واللوح */

.tm-paneh { display: flex; align-items: center; gap: 14px; }
.tm-paneh h3 { font: var(--t-head); } .tm-paneh small { font: var(--t-caption); display: block; }
.tm-paneh .iconbtn { margin: -6px -10px 0 -6px; align-self: flex-start; }
.tm-kv { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tm-kv span { display: flex; align-items: center; gap: 10px; font: var(--t-label); }
.tm-sh-ticket .ses-row { padding: 0; }
.tm-att { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.tm-att .btn { padding: 0 14px 0 16px; } .tm-att .btn[aria-pressed="true"] { outline: 1px solid var(--text); outline-offset: -1px; background: var(--surface-3); }
.tm-att span { margin-inline-start: auto; font: var(--t-caption); }
.tm-sh-ticket .tm-paneh .tm-x { display: none; }
.tm-sh-ticket .tm-paneh .tm-edit { margin: -6px -10px 0 -6px; align-self: flex-start; }

/* استيراد الجدول، قائمة «+»، إضافة محاضرة، الجامعة */
.tm-photo { display: block; border-radius: var(--r-field); background: var(--gloss-under); overflow: hidden; margin: 0 auto; flex: none; position: relative; }
.tm-photo svg { display: block; } .tm-photo line { stroke: var(--gloss-ink); stroke-opacity: .28; stroke-width: 1; } .tm-photo rect { fill: var(--gloss-ink); fill-opacity: .16; }
.tm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm-imph .tm-photo { border-radius: var(--r-thumb); }
.tm-reading { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tm-reading b { font: var(--t-label); }
.tm-reading .streak { position: absolute; right: 58%; bottom: -1px; width: 32px; height: 2px; border-radius: var(--r-pill); background: linear-gradient(to left, transparent, var(--text)); }
.tm-load i { display: block; height: 10px; border-radius: var(--r-pill); background: var(--surface-2); margin: 0 0 10px; }
.tm-load i:nth-child(1) { width: 92%; } .tm-load i:nth-child(2) { width: 76%; } .tm-load i:nth-child(3) { width: 48%; }
.tm-mid { display: block; margin: 6px auto 0; }
.tm-imph { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px; }
.tm-imph .tm-aiT { margin: 6px 0 2px; } .tm-imph > .grow > small { font: var(--t-label); }
.tm-imp { padding: 0 14px; margin-bottom: 16px; }
.tm-imp .row { min-height: 60px; padding: 8px 0; }
.sheet-panel.tm-dialog { max-width: 540px; padding: 24px; }
.tm-sh-plus .tm-flat .row, .tm-sh-uni .tm-flat .row, .tm-sh-subj .tm-flat .row { min-height: 60px; }
.tm .tm-dch { flex: 1; justify-content: center; }
.tm-sh-uni .tm-search { margin: 4px 0 6px; }
.tm-sh-uni .tm-flat { max-height: 362px; overflow-y: auto; }
.tm-sh-uni .tm-flat .row[hidden] { display: none; }
.tm-sh-uni .row[aria-checked="false"] .tm-chk { visibility: hidden; }
.tm-sh-uni .row .rt small { white-space: normal; }
.tm-sh-pc .tm-flat { max-height: min(462px, 60vh); }
.tm-mt2.btn { margin-top: 28px; }
.tm-sh-add .chips { flex-wrap: nowrap; }
.tm-warn { font: var(--t-caption); color: var(--ember); margin: 12px 2px 0; }
.tm-imp .row.off .rt b, .tm-imp .row.off .rt small { color: var(--text-3); text-decoration: line-through; }
.tm-imp .row .hit .ic { color: var(--text-2); }

/* ===== المواعيد (#/tasks) */
.tm-tasks .tm-tabs + .tm-body > .tm-chips:first-child, .tm-tasks .tm-body > .tm-tchips { margin: 14px 0 16px -16px; }
/* فاصل بين حال المواعيد (القادم، خلصت) وشرائح المواد */
.tm-csep { width: 1px; align-self: stretch; margin: 6px 2px; background: var(--line); flex: none; }
.tm-near { padding: 18px 20px 20px; }

.tm button.rt { display: block; padding: 0; border: 0; background: none; color: inherit; text-align: start; font: inherit; cursor: pointer; align-self: stretch; }
.tm button.rt > small { margin-top: 2px; }
.tm-trow { cursor: default; }
.tm-tl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tm .row .rt .tm-tl b { min-width: 0; flex: 0 1 auto; }
.tm-tl .tag, .tm-tl .ic { flex: none; } .tm-tl .tag { word-spacing: .18em; }
.tm-trow.late::after { content: ''; position: absolute; inset: 4px -12px; border-radius: var(--r-field); background: var(--ember-wash); }
.tm-trow.late > *, .tm-trow.sel > * { position: relative; z-index: 1; }
.tm-trow.late + .row::before, .tm-sw:has(.tm-trow.late) + .tm-sw > .row::before { display: none; }
.tm-trow.done .rt b { color: var(--text-3); } .tm-trow.done .pt.lit { outline: none; }
.tm-trow.sel::after { content: ''; position: absolute; inset: 0 -16px; background: var(--surface-3); }

.tm-trow.lighting .rt b { color: var(--text-2); }
.tm-trow .hit { position: relative; }
.tm-trow .hit::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: var(--r-pill); box-shadow: var(--tm-lit-glow); opacity: 0; transform: scale(.4); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.lighting .hit::after { opacity: 1; transform: none; }
.lighting .hit .pt.lit { outline: none; }
.tm-out { opacity: 0; transform: translateX(-24px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
/* السحب على الجوال (js/gestures.js، النوع row): الصف يتزحزح وتظهر خلفه ثلاثة خيارات */
.tm-sw { position: relative; margin: 0 -16px; padding: 0 16px; overflow: hidden; }
.tm-sw + .tm-sw > .row::before { content: ''; position: absolute; top: 0; left: 0; right: 52px; height: 1px; background: var(--line); }
.tm-sw > .row { will-change: auto; }
.tm-sw.is-sw > .row { background: var(--surface); margin: 0 -16px; padding-inline: 16px; width: calc(100% + 32px); }
.tm-acts { position: absolute; top: 0; bottom: 0; right: 0; width: 216px; display: flex; visibility: hidden; }
.tm-sw.is-sw .tm-acts { visibility: visible; }
.tm-acts button { width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: var(--t-caption); color: var(--text); border: 0; padding: 0; cursor: pointer; }
.tm-acts .a1, .tm-acts .a3 { background: var(--surface-3); } .tm-acts .a2 { background: var(--surface-2); }

/* الشاشات الواسعة: القائمة ولوح التفاصيل */

/* الآيباد العمودي: خانات الجدول الأربع تحت الرأس بعرض الصفحة (الأسبوع والمواعيد) */
.tm-mid > .tm-tabs { margin-bottom: 20px; }

.tm-dpane { padding: 20px 20px 16px; min-width: 0; }
.tm-dph { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.tm-dph b { font: var(--t-head); } .tm-dph span { font: var(--t-caption); }
.tm-dpane .tm-cap { margin-top: 14px; } .tm-dpane .tm-note { margin-top: 8px; }
.tm-dpane .tm-chips { margin: 0 0 0 -20px; padding-left: 20px; }

/* تفاصيل الموعد */
.tm-2col .tm-pseg { height: 52px; border-radius: var(--r-field); padding: 4px; } .tm-2col .tm-pseg button { border-radius: var(--r-chip); }
.tm-rem, .tm-alw { flex-wrap: wrap; } .tm-rem .chip, .tm-alw .chip { padding: 0 12px; }
.tm-alwhen { display: grid; gap: 8px; margin-bottom: 8px; } .tm-alwhen[hidden] { display: none; }
.tm-alrow { display: flex; align-items: center; gap: 10px; margin: 20px 0 6px; }
.tm-alrow b { display: block; font: 500 16px/22px var(--font); } .tm-alrow small { font: var(--t-caption); }
.tm-on { font: var(--t-caption); color: var(--text-2); }
.tm-alneed { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 6px; font: var(--t-caption); color: var(--text-2); }
.tm-alneed[hidden] { display: none; }
.tm-toggle { width: 51px; height: 31px; border-radius: var(--r-pill); background: var(--surface-3); position: relative; flex: none; border: 0; padding: 0; cursor: pointer; }
.tm-toggle i { position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: var(--r-pill); background: var(--text-2); display: grid; place-items: center; transition: transform var(--dur-2) var(--ease-out); }
.tm-toggle.on { background: var(--text); } .tm-toggle.on i { transform: translateX(-20px); background: var(--surface); color: var(--text); }
.tm-toggle.on i .ic { stroke-width: 2.6; }
.tm .panel.tm-tones { background: none; border: 0; box-shadow: none; padding: 0; }
.tm-tones .row { min-height: 46px; padding: 4px 0; cursor: pointer; }
.tm-tones .row .rt b { font-weight: 400; }
.tm-tones .row + .row::before { right: 44px; }
.tm-tones .row[aria-checked="false"] .tm-chk { visibility: hidden; }
.tm-play { width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--surface-2); display: grid; place-items: center; flex: none; color: var(--text); border: 0; padding: 0; cursor: pointer; }
.tm-play svg { width: 14px; height: 14px; }
.tm-more { margin-top: 14px; }
.tm-more summary { font: var(--t-label); color: var(--text-2); cursor: pointer; list-style: none; padding: 10px 2px; }
.tm-more summary::-webkit-details-marker { display: none; }
.tm-area { width: 100%; border-radius: var(--r-field); background: var(--surface-2); border: 0; color: var(--text); font: var(--t-body); padding: 12px 14px; resize: vertical; outline: none; }
.tm-area:focus { box-shadow: var(--focus-ring); }
.tm-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tm-foot .btn.primary { flex: 1; } .tm .btn.tm-del { margin-inline-start: auto; color: var(--text-2); }
.tm-sh-dl .tm-foot { margin-top: 20px; }
.tm .tm-save { color: var(--rose); }

/* ===== مؤقت المذاكرة (#/focus) */
.tm .tm-tbar { margin: -8px -6px 0; } .tm-tbr { display: flex; align-items: center; gap: 2px; }
.tm-tbr b { font: 700 17px/24px var(--font); }
.tm-timer { display: flex; flex-direction: column; align-items: center; }
.tm-tbody { display: flex; flex-direction: column; align-items: center; width: 100%; }
.tm .chip.tm-subj { margin-top: 4px; gap: 8px; padding: 0 10px 0 12px; max-width: 100%; }
.tm-ring { position: relative; margin-top: 12px; }
.tm-ring svg { display: block; overflow: visible; }
.tm-rc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.tm-rc b { font: var(--t-timer); font-feature-settings: "tnum"; }
.tm-rc span { font: var(--t-label); color: var(--text-2); text-align: center; max-width: 70%; }
.tm-presets { margin-top: 24px; justify-content: center; }
.tm .tm-presets .chip { min-width: 72px; justify-content: center; }
.tm .tm-presets .chip:disabled { cursor: default; }
.tm-tbtns { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.tm .tm-tbtns .btn.second { padding: 0 24px; } .tm-start { min-width: 168px; }
.tm-timer.wide { max-width: 560px; margin: 0 auto; min-height: calc(100dvh - 88px); }
.tm-timer.wide .tm-tbar { align-self: stretch; margin: 0 0 8px; }
.tm-timer.wide .tm-tbody { margin: auto 0; }
.tm-lens { flex-wrap: wrap; justify-content: center; padding: 8px 0 4px; }
.tm-sh-subj .tm-flat .row[aria-checked="false"] .tm-chk { visibility: hidden; }
/* الكبسولة فوق التنقل (<1024) وخياراتها، والمؤقت في الشريط الجانبي (النموذج .timerpill و.sd-timer) */
.focus-pill { position: fixed; z-index: 89; left: 16px; bottom: calc(116px + env(safe-area-inset-bottom)); display: flex; }
.timerpill { width: 148px; height: 44px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 8px; padding: 0 10px; font: 700 15px/20px var(--font); font-feature-settings: "tnum"; color: var(--text); text-decoration: none;
  animation: tm-in var(--dur-2) var(--ease-out) both; }
.timerpill .ft-ring { display: grid; flex: none; } .timerpill .ft-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.is-paused .ft-time { color: var(--text-2); }
.ft-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); border: 0; padding: 0; }
.ft-more:focus-visible { position: static; width: 44px; height: 44px; clip-path: none; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); margin-inline-start: 6px; display: grid; place-items: center; }

/* المؤقت العائم ينسحب (js/float-drag.js): الإزاحة بـ translate، ولما ينفلت يلصق بالحافة بحركة ناعمة */
.fd-on { translate: var(--fd-x, 0px) var(--fd-y, 0px); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .fd-on a { -webkit-user-drag: none; }
.fd-on.fd-snap { transition: translate var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-sheet), opacity var(--dur-1) var(--ease-out); }
.fd-on.fd-drag .timerpill, .fd-on.fd-drag.timerpill { box-shadow: var(--shadow-modal); }
@media (prefers-reduced-motion: reduce) { .fd-on.fd-snap { transition: none; } }
@keyframes tm-fade { from { opacity: 0; } }
@media (min-width: 768px) and (max-width: 1023.98px) { .focus-pill { left: calc(50% - 226px); bottom: calc(108px + env(safe-area-inset-bottom)); } }
.side-timer { display: none; }
@media (min-width: 1024px) {
  .focus-pill { display: none; }
  .side-timer:not([hidden]) { display: block; }
  .sd-timer { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-dock); background: color-mix(in srgb, var(--surface-2) 70%, transparent); font: var(--t-label); color: var(--text); text-decoration: none; }
  .sd-timer .ft-ring { display: grid; flex: none; }
  .sd-timer b { font: 700 16px/1 var(--font); font-feature-settings: "tnum"; } .sd-timer .ft-l { flex: 1; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sd-timer .pdot { flex: none; }
}

@media (min-width: 768px) {
  main.tm-full { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-in { animation: none; }
  .tm-navbar::before, .tm-navbar .nb-t, .tm-navbar.root, .tm-days, .tm-tabs > button::before, .tm-snack, .tm-out, .tm-toggle i, .tm-trow .hit::after { transition: none; }
  .timerpill { animation: none; }
}
/* css/study-dnd.css */
/* «عدم الإزعاج» و«قفل التطبيقات» وقت المذاكرة (design-reference/focus-dnd، اعتمده المالك 23 أكتوبر). متغيرات النظام فقط. */
.dnd-slot { display: flex; justify-content: center; width: 100%; }
.dnd-slot:empty { display: none; }
.dnd-opts { margin-top: 22px; width: 100%; max-width: 358px; padding: 0 16px; text-align: start; }
.dnd-opts .row { min-height: 60px; }
.dnd-opts .lead { width: 28px; }
.dnd-opts .row + .row::before { right: 40px; }
.dnd-lead { color: var(--text-2); }
.dnd-on { margin-top: 18px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 8px; font: var(--t-caption); color: var(--text-2); background: var(--surface-2); cursor: pointer;
  animation: dnd-in var(--dur-2) var(--ease-out) both; }
.dnd-on .ic { color: var(--moon); }
.dnd-on i { width: 3px; height: 3px; border-radius: var(--r-pill); background: var(--text-3); }
.dnd-on small { font: inherit; color: var(--text); }
.dnd-on:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dnd-sheet .row .rt b { white-space: normal; }
.timerpill .dnd-pm, .sd-timer .dnd-pm { display: grid; place-items: center; color: var(--moon); margin-inline-start: auto; }
@keyframes dnd-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .dnd-on { animation: none; } }
/* أندرويد أول مرة: لوح «نحتاج إذنك مرة وحدة» (native/android-focus.js) */
.dnd-setup { padding-top: 10px; text-align: center; }
.dnd-hero { width: 56px; height: 56px; margin: 6px auto 12px; border-radius: var(--r-pill); background: var(--surface-2); display: grid; place-items: center; color: var(--moon); }
.dnd-h { font: var(--t-title); margin: 0; }
.dnd-p { font: var(--t-body); color: var(--text-2); margin: 8px 8px 12px; }
.dnd-steps { text-align: start; }
.dnd-steps .row { min-height: 56px; }
.dnd-n { width: 28px; height: 28px; border-radius: var(--r-pill); border: 1px solid var(--line); display: grid; place-items: center; font: 700 14px/1 var(--font); font-style: normal; color: var(--text); }
.dnd-btns { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 16px; }
/* css/focus-sky.css */
/* «قمر الجلسة» و«سما الفصل» (js/focus-sky.js، النموذج design-reference/study-calm/lunar.css). كله من رموز الهوية ومتغيراتها */
.fs-face { display: flex; flex-direction: column; align-items: center; margin-top: 12px; }
.fs-top { display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; text-decoration: none; border-radius: var(--r-panel); }
.fs-cap { font: var(--t-caption); color: var(--text-2); }
.fs-cons { display: block; overflow: visible; }
.fs-l { stroke: var(--star); stroke-opacity: var(--fs-line, .2); stroke-width: 1; }
.fs-l.on { --fs-line: .5; }
.fs-cons.faded .fs-l { stroke-dasharray: 2 4; }
/* النجوم نجمة الشعار الناعمة (SYM.soft/softDot في js/symbols.js): تعبئتها من تدرجات #sym-defs، فلا fill هنا */
.fs-dot.dim { opacity: .5; } .fs-dot.faint { opacity: .35; }
.fs-nr { fill: none; stroke: var(--moon); stroke-width: 1.2; stroke-dasharray: 2 3; }
.fs-np { animation: fs-pulse var(--dur-pulse) var(--ease-io) infinite; transform-box: fill-box; transform-origin: center; }
.fs-s { animation: fs-tw var(--dur-twinkle) var(--ease-io) infinite; animation-delay: var(--d); }
.fs-ring { margin-top: 6px; }
.fs-mw { position: relative; display: inline-grid; place-items: center; }
.fs-maria { position: absolute; width: var(--fs); height: var(--fs); inset: 0; margin: auto; transform: rotate(38deg); pointer-events: none; fill: var(--moon-dark); opacity: .09; }
.fs-rc { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; }
.fs-rc b { font: var(--t-timer); font-feature-settings: "tnum"; }
.fs-rc span { font: var(--t-label); color: var(--text-2); text-align: center; }
/* نجمة الجلسة تطير من القمر لمكانها في الكوكبة */
.fs-fly { position: fixed; z-index: 95; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: var(--r-pill); pointer-events: none; opacity: 0;
  background: radial-gradient(circle, var(--star) 0 1.5px, color-mix(in srgb, var(--star) 60%, transparent) 3.5px, color-mix(in srgb, var(--moon) 30%, transparent) 6px, transparent 13px); } /* حافة تذوب مثل نجمة الشعار */
.fs-fly.go { opacity: 1; transition: transform var(--dur-fly) var(--ease-io), opacity var(--dur-1); }
.fs-fly.land { opacity: 0; transition: opacity var(--dur-2); }
/* سما الفصل (#/sky) */
.fs-page { display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.fs-sub, .fs-empty { margin: 6px 0 0; font: var(--t-caption); color: var(--text-2); text-align: center; }
.fs-empty { margin: 48px 0; }
.fs-field { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin: 28px 0 40px; }
.fs-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.fs-cell:nth-child(4n+2), .fs-cell:nth-child(4n+3) { transform: translateY(var(--pg-shift)); } /* سما مو جدول: عمودان متزحزحان (الترتيب بالـ grid يتبع اتجاه الصفحة) */
.fs-cell .fs-cons { opacity: var(--fo); max-width: 100%; height: auto; }
.fs-cn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: var(--t-label); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-cn small { font: var(--t-micro); color: var(--text-3); }
.fs-panel { margin-top: auto; }
.fs-week { justify-content: space-between; }
.fs-week > span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fs-week small { font: var(--t-micro); color: var(--text-2); }
.fs-hint { width: 100%; text-align: start; gap: 12px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.fs-hint .rt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fs-hint small { font: var(--t-caption); color: var(--text-2); }
@keyframes fs-pulse { 0%, 100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes fs-tw { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .fs-np, .fs-s { animation: none; } .fs-fly { transition: none; } }
/* css/focus-calm.css */
/* «جوّ المذاكرة» (js/focus-calm.js، النموذج design-reference/study-calm/lunar-batch.css): متغيرات النظام وحدها */
.fc-promise { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; }
.fc-promise .fs-cons { flex: none; }
.fc-promise p { margin: 0; font: var(--t-caption); color: var(--text-2); }
.fc-rows .row { min-height: 60px; width: 100%; text-align: start; }
.fc-rows .rt, .fc-brk .rt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fc-ic { color: var(--text-2); }
.fc-lbl { display: block; margin: 14px 4px 8px; font: var(--t-label); color: var(--text-2); }
.fc-q { color: var(--text); }
.fc-sounds { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px; }
.fc-sc { flex: none; gap: 8px; }
.fc-sc .ic { color: var(--text-2); } .fc-sc.on .ic { color: var(--moon); }
.fc-small { margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-field); background: var(--surface-2); }
.fc-small p { margin: 0; font: var(--t-caption); color: var(--text-2); } .fc-small b { color: var(--text); }
.fc-moons { display: flex; gap: 3px; flex: none; }
.fc-moons i { display: grid; opacity: .45; } .fc-moons i.on { opacity: 1; }
.fc-go { margin-top: 16px; }
.fc-tip { display: flex; align-items: flex-start; gap: 8px; margin: 12px 8px 0; font: var(--t-caption); color: var(--text-2); }
.fc-tip .ic { flex: none; margin-top: 1px; color: var(--text-3); }
.fc-alt { display: flex; justify-content: center; margin-top: 4px; }
.fc-intent { margin: 12px 24px 0; font: var(--t-caption); color: var(--text-2); text-align: center; padding: 6px 14px; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-rim); }
/* بعد الجلسة */
.fc-done { display: flex; align-items: center; gap: 14px; padding: 6px 4px 4px; }
.fc-done b { display: block; font: var(--t-subtitle); } .fc-done small { font: var(--t-caption); color: var(--text-2); }
.fc-mo { display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--r-pill); background: var(--sky-0); flex: none; }
.fc-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-field); background: var(--surface-2); }
.fc-seg button { height: 40px; border: 0; border-radius: var(--r-chip); background: none; font: var(--t-label); color: var(--text-2); cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1); }
.fc-seg button[aria-checked="true"] { background: var(--surface-3); color: var(--text); box-shadow: var(--ring-on); }
.fc-after .fc-rows { margin-top: 14px; }
/* الاستراحة */
.fc-ring { margin-top: 24px; }
.fc-rc { gap: 8px; }
.fc-rc span { font: var(--t-caption); }
.fc-brk { align-self: stretch; width: 100%; max-width: 420px; margin: 28px auto 0; }
/* «فرقك» */
.fc-page { display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.fc-skies { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.fc-skies > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: var(--r-panel); background: var(--glass-bg); border: 1px solid var(--glass-rim); min-width: 0; }
.fc-skies small { font: var(--t-caption); color: var(--text-2); }
.fc-skies b { font: var(--t-label); font-weight: 700; color: var(--text-2); }
.fc-skies .on b { color: var(--moon); }
.fc-sky { position: relative; width: 100%; height: 150px; overflow: hidden; }
.fc-sky > span { position: absolute; left: var(--x); top: var(--y); }
.fc-sky.dim { opacity: .55; }
.fc-fq { margin-top: 18px; } .fc-fq .list-row { min-height: 64px; }
.fc-fq .rt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fc-fq small { font: var(--t-caption); color: var(--text-2); }
.fc-v { font: var(--t-head); color: var(--moon); }
.fc-note { margin: 10px 4px 0; font: var(--t-caption); color: var(--text-3); text-align: center; }
:root[data-theme="dawn"] .fc-skies .on b, :root[data-theme="dawn"] .fc-v { color: var(--text); }
.fc-sheet .fc-lbl { margin: 16px 4px 8px; }
/* فجر: القمر أبيض، فخلفيته من ظل القمر نفسه عشان يبان على اللوح الفاتح */
:root[data-theme="dawn"] .fc-mo, :root[data-theme="dawn"] .fc-moons { background: var(--moon-dark); }
:root[data-theme="dawn"] .fc-moons { padding: 4px 6px; border-radius: var(--r-pill); }
/* css/notes-time.css */
/* منظّمي — «الملاحظات» بشكل «سماء واحدة» (design-reference/identity/screens-time.css: الملاحظات): القائمة والمحرر وشريط أدواته.
   js/notes-hub.js وrenderNoteEditor في js/views-notes.js. القيم من متغيرات نظام التصميم، والحركة transform/opacity. */

/* ===== القائمة */
.tm-notesp .tm-ph .btn.sm { margin-top: 2px; }
.tm-notesp > .tm-search { margin-bottom: 0; }
.tm-notesp .tm-fchips { margin: 14px 0 16px -16px; }
.tm-notesp > .tm-search + .tm-notes { margin-top: 16px; }
.tm .tm-notes { padding: 0 16px; overflow: hidden; }
.tm-nrow { position: relative; display: block; width: 100%; padding: 12px 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.tm-nrow + .tm-nrow::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--line); }
.tm-ntl { display: flex; align-items: center; gap: 8px; }
.tm-ntl b { flex: 1; min-width: 0; font: 500 16px/24px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-pin { flex: none; }
.tm-nf { display: block; font: var(--t-label); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0 6px; }
.tm-nrow small { display: flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-3); white-space: nowrap; overflow: hidden; }
.tm-nrow.sel::after { content: ''; position: absolute; inset: 0 -16px; background: var(--surface-3); }
.tm-nrow.sel > * { position: relative; z-index: 1; }
.tm-nrow.sel + .tm-nrow::before { display: none; }
.tm-nrow:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-field); }
.tm-nnone { font: var(--t-label); color: var(--text-3); text-align: center; padding: 20px 0; }

/* ===== الواسعة: رأس، ثم (المواد) والقائمة والمحرر */
.tm-nwhead .ph { margin-bottom: 20px; }
.tm-n3 { display: grid; grid-template-columns: 200px 320px minmax(0, 1fr); gap: 20px; height: calc(100dvh - 150px); }
.tm-n3.two { grid-template-columns: 320px minmax(0, 1fr); }
.tm-n3.noed { grid-template-columns: 200px 320px; } .tm-n3.two.noed { grid-template-columns: 320px; }
.tm-notesp.ipad .tm-n3 { height: calc(100dvh - 138px); }
.tm-n3 > * { min-height: 0; overflow: hidden; }
.tm-nfilter { padding: 8px; display: flex; flex-direction: column; gap: 2px; align-self: start; max-height: 100%; overflow-y: auto; }
.tm-nfilter button { height: 44px; border-radius: var(--r-field); display: flex; align-items: center; gap: 10px; padding: 0 10px; font: 500 15px/20px var(--font); color: var(--text-2); flex: none; border: 0; background: none; cursor: pointer; text-align: start; }
.tm-nfilter button span:not(.planet):not(.tm-all) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-nfilter button small { margin-inline-start: auto; font: var(--t-caption); color: var(--text-3); }
.tm-nfilter button.on { background: var(--surface-3); color: var(--text); font-weight: 700; }
.tm-all { width: 20px; display: grid; place-items: center; flex: none; }
.tm-nlist { display: flex; flex-direction: column; }
.tm-nlist .tm-search { margin-bottom: 12px; flex: none; }
.tm-nlist .tm-fchips { margin: 0 0 12px; padding: 0; flex: none; }
.tm-nlist .tm-notes { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.tm-nlist .tm-notes::-webkit-scrollbar { display: none; }
.tm-nlist .tm-empty { padding: 48px 0; }

/* ===== المحرر */
.tm-ebar { margin: -8px -6px 14px; }
.tm-ebar .tm-ecc { cursor: default; }
.tm-ndoc { display: block; }
.tm-ntitle { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: none; resize: none; overflow: hidden; font: var(--t-subtitle); color: var(--text); }
.tm-ntitle:focus { outline: none; }
.tm-ntitle::placeholder { color: var(--text-3); }
.tm-nmeta { font: var(--t-caption); color: var(--text-3); margin: 4px 0 18px; }
.tm .ne-body.tm-read { font: var(--t-read); font-size: calc(1.0625rem * var(--note-scale, 1)); line-height: var(--note-lh, 1.875rem); color: var(--text); max-width: 70ch; min-height: 240px; }
/* :not(.sb *): قطع الملخص بشكلها */
.tm .tm-read p:not(.sb *) { margin: 0 0 14px; }
.tm .tm-read :is(h1, h2, h3):not(.sb *) { font: var(--t-head); margin: 22px 0 6px; }
.tm .tm-read h4 { font: var(--t-head); color: var(--text-2); margin: 18px 0 4px; }
.tm .tm-read > :first-child { margin-top: 0; }
.tm .tm-read :is(ul, ol):not(.sb *) { padding-right: 22px; margin: 0 0 12px; }
.tm .tm-read li { margin: 0; }
.tm .tm-read li::marker { color: var(--text-3); font-weight: 400; }
.tm .tm-read :is(mark, font[face^="nvhl-"]:not([face="nvhl-none"])) { border-radius: var(--r-thumb); padding: 0 3px; }
.tm .tm-read blockquote:not(.sb *) { border-inline-start: 3px solid var(--line); background: none; padding: 0 12px; color: var(--text-2); }
.tm .tm-read .pchip { vertical-align: 2px; margin-inline-start: 2px; cursor: pointer; user-select: none; }
.tm .tm-read .pchip .ic { width: 12px; height: 12px; }
/* المهام نقاط: مفرّغة، ومضيئة بلون القمر إذا خلصت (النموذج .tm-todo) */
.tm .tm-read ul:has(> li.md-task) { padding-inline-start: 0; }
.tm .tm-read li.md-task { list-style: none; position: relative; min-height: 44px; padding: 7px 30px 7px 0; }
.tm .tm-read li.md-task::before { content: ''; position: absolute; inset-inline-start: 0; top: 13px; width: 18px; height: 18px; box-sizing: border-box; border-radius: var(--r-pill); border: 1.5px solid var(--text-3); background: none; cursor: pointer; }
.tm .tm-read li.md-task::after { content: none; }
.tm .tm-read li.md-task.is-done { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }
.tm .tm-read li.md-task.is-done::before { border-color: var(--moon); background: var(--moon); box-shadow: var(--tm-moon-ring); }
.tm-notep { padding-bottom: calc(46px + 32px + env(safe-area-inset-bottom)); }

/* شريط الأدوات (النموذج .tm-tools): على الجوال ثابت تحت ويرتفع فوق لوحة المفاتيح (--kb)، وعلى الواسعة أعلى لوح المحرر */
.tm-kbar { position: fixed; z-index: 40; inset-inline: 0; bottom: 0; background: var(--surface-2); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); transform: translateY(calc(-1 * var(--kb, 0px))); }
.tm-kbar[hidden], .tm-tools[hidden] { display: none; }
.tm-tools, .tm-kbar { display: flex; align-items: center; gap: 6px; }
.tm-kbar { height: calc(46px + env(safe-area-inset-bottom)); padding-inline: 6px; }
.tm-tscroll { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tm-tscroll::-webkit-scrollbar { display: none; }
.tm-tai { flex: none; height: 34px; border-radius: var(--r-pill); background: var(--surface-3); display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; font: var(--t-label); color: var(--text); box-shadow: var(--rim); border: 0; cursor: pointer; }
.tm-tb { height: 36px; min-width: 30px; border-radius: var(--r-chip); display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--text); font: var(--t-label); flex: none; padding: 0 4px; white-space: nowrap; border: 0; background: none; cursor: pointer; }
.tm-tb.gh { font: 700 19px/1 var(--font); }
.tm-tb.on { background: var(--surface-3); }
.tm-tb.lk { font: var(--t-caption); background: var(--surface-3); height: 28px; padding: 0 8px; margin-inline-start: 4px; }
/* «اربط بصفحة»: قاعدة عامة لاحقة كانت ترصّ الأيقونة فوق النص فينقص الزر (فحص 31 أكتوبر): صف واحد دائماً */
.tm-tscroll .tm-tb.lk { display: inline-flex; flex-direction: row; }
.tm-tb.lk svg { flex: none; }
.tm-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; flex: none; }
.tm .tm-hsw, .tm-kbar .tm-hsw { width: 22px; height: 22px; border-radius: var(--r-pill); flex: none; margin: 0 2px; padding: 0; border: 1.5px solid var(--text-3); cursor: pointer; position: relative; }
.tm-hsw::after { content: ''; position: absolute; inset: -10px -2px; }
.tm-hsw.hl-y { background: var(--hl-y); } .tm-hsw.hl-g { background: var(--hl-g); } .tm-hsw.hl-p { background: var(--hl-p); }
.tm-editor { display: flex; flex-direction: column; }
.tm-editor .tm-tools { background: var(--surface-2); border-bottom: 1px solid var(--line); height: 52px; padding: 0 12px; flex: none; }
.tm-edin { padding: 20px 28px 28px; max-width: 720px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.tm-edh { display: flex; align-items: center; gap: 8px; margin: -4px -8px 14px 0; }
.tm-edai { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.tm-edh .tm-tai { background: var(--surface-2); box-shadow: none; }
.tm-editor .tm-read { max-width: none; }

/* الملخص (summaryView): «الملخص / تحرير» وأزراره تحت كما كانت */
.tm .ne-sum .tab-bar { margin-bottom: 14px; }
.ne-sum.is-reading :is(.tm-ntitle, .tm-nmeta) { display: none; }

/* ===== الألواح: المزيد، اربط بصفحة، المساعد وبطاقاته */
.tm-sh-nmore .tm-flat .row, .tm-sh-nnew .tm-flat .row, .tm-sh-nai .tm-flat .row, .tm-sh-pg .tm-flat .row { min-height: 56px; }
.tm-sh-nmore .tm-del { color: var(--ember); }
.tm-aa { font: 700 17px/1 var(--font); }
.tm-sel { width: 100%; appearance: none; color: var(--text); font: var(--t-body); border: 0; }
.tm-sh-pg .tm-flat .row[aria-checked="false"] .tm-chk { visibility: hidden; }
.tm-sh-pg .tm-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: var(--t-body); outline: none; }
.tm-nview { margin-top: 8px; }
.tm-nfocus { margin-top: 12px; }
.tm-aistars { display: flex; justify-content: center; margin: 14px 0 6px; }
.tm-aistars svg { overflow: visible; }
.tm-sh-ai .tm-flat .row .lead { width: 28px; }
.tm-sh-ai .tm-flat .row .rt b, .tm-sh-ai .tm-flat .row .rt small { white-space: normal; }
.tm-sh-ai .tm-btns { margin-top: 16px; }

@media (min-width: 768px) {
  .tm-notep { max-width: 720px; margin: 0 auto; }
}
/* css/stu.css */
/* منظّمي — «المذاكرة» (design-reference/identity/screens-study.css §8.8): مشترك شاشات القراءة والمذاكرة والجذر #/study.
   متغيرات نظام التصميم فقط؛ الحركة transform/opacity وحدها. صنف .stu على كل شاشة يحصر القواعد العامة فيها. */
:root {
  --pg-bg: var(--paper-bg); --pg-ink-2: color-mix(in srgb, var(--on-planet) 62%, var(--text));
  --pen-1: #1A1C26; --pen-2: #B13E06; --pen-3: #296A3B; --pen-4: var(--hl-y);
  --t-inline: 700 17px/24px var(--font);
  --r-mark: 3px;
}

/* ===== مشترك: أقسام، صفوف، شرائح، أزرار أيقونة */
.stu .sec { margin-top: 32px; }
.stu .sec-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 10px; }
.stu .sec-h h2 { font: var(--t-head); margin: 0; } .stu .sec-h a { font: 500 15px/20px var(--font); color: var(--rose); text-decoration: none; }
.stu .list-panel { margin-bottom: 0; }
.stu .list-row { color: var(--text); text-decoration: none; text-align: start; width: 100%; background: none; border: 0; font: inherit; }
.stu .list-row > .lead { width: 40px; display: grid; place-items: center; flex: none; }
.stu .list-row-main > b { display: block; font: 500 16px/24px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stu .list-row-main > small { display: flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.stu .list-row-main .bar { flex: none; }
.stu .list-row .rend { font: 700 15px/20px var(--font); font-feature-settings: "tnum"; flex: none; }
.stu .list-row > .btn-ghost { margin-inline-end: -8px; }
.stu .chev { color: var(--text-3); }
.stu .t2 { color: var(--text-2); } .stu .t3 { color: var(--text-3); } .stu .moon-t { color: var(--moon); } .stu .rose-t { color: var(--rose); } .stu .ember-t { color: var(--ember); }
.stu .full { width: 100%; }
.iconbtn { width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--text); flex: none; background: none; border: 0; padding: 0; cursor: pointer; }
.iconbtn.sm { width: 40px; height: 40px; } .iconbtn.on { background: var(--surface-2); }
.pchip { height: 26px; border-radius: var(--r-chip); background: var(--surface-2); padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; font: var(--t-caption); color: var(--text-2); border: 0; flex: none; white-space: nowrap; }
button.pchip { cursor: pointer; }
.pchip.on { --pc-ring: inset 0 0 0 1px var(--text); background: var(--surface-3); color: var(--text); box-shadow: var(--pc-ring); }
.srcchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.offline { height: 28px; border-radius: var(--r-pill); background: var(--surface-2); display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font: var(--t-caption); color: var(--text-2); }
.stu .chip { height: 32px; border-radius: var(--r-chip); background: var(--surface-2); padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text); white-space: nowrap; flex: none; border: 1px solid transparent; cursor: pointer; }
.stu .chip.on { border-color: var(--text); background: var(--surface-3); }
.stu .chips { display: flex; gap: 8px; overflow: hidden; }
.ex-h { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: -4px -6px 10px 0; }
.ex-h b { flex: 1; font: var(--t-head); } .ex-h .t3 { font: var(--t-caption); color: var(--text-3); }
.mini { display: block; flex: none; overflow: hidden; border-radius: var(--r-thumb); --mini-ring: 0 0 0 1px var(--line); background: var(--pg-bg); box-shadow: var(--mini-ring); }
.mini canvas { display: block; width: 100%; height: auto; }

/* ===== النجوم والكوكبة (خافتة = تنتظرك، ساطعة = راجعتها) */
.cst { overflow: visible; flex: none; }
.cst line { stroke: var(--star); stroke-opacity: .3; stroke-width: 1; }
.cst line.on { stroke-opacity: .55; }
/* النجمة نجمة الشعار الناعمة (SYM.soft في js/symbols.js): أجزاؤها .fl الأشعة و.gl الهالة و.sl اللب، وتعبئتها من تدرجات #sym-defs فلا fill هنا */
.cst .sd { opacity: .55; }
.cst .cur { fill: none; stroke: var(--text); stroke-width: 1.5; }

/* ===== أسبوعك بالأقواس */
.weekarcs { display: flex; justify-content: space-between; gap: 11px; margin-bottom: 16px; }
.weekarcs .wd { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.weekarcs .wd span { font: var(--t-caption); color: var(--text-2); }
.weekarcs .wd.today span { color: var(--text); font-weight: 700; }
.weekarcs svg { overflow: visible; }
.wa-f { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.wa-p { fill: none; stroke: var(--text-2); stroke-opacity: .6; stroke-width: 2; stroke-linecap: round; }

/* ===== الجذر #/study */
.sh-wk { margin-top: 12px; }
.sh-wk .list-row-main > small { white-space: normal; flex-wrap: wrap; }
.sh-wk .num { font-feature-settings: "tnum"; }
.sh-wk-ring { display: grid; place-items: center; }
.sh-wk-bars { display: flex; align-items: flex-end; gap: 4px; flex: none; height: 44px; }
.sh-wk-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; width: 10px; font: var(--t-micro); color: var(--text-3); }
.sh-wk-col .is-today { color: var(--text); }
.sh-wk-bar { display: block; width: 6px; height: 24px; border-radius: var(--r-pill); background: var(--text-2); transform: scaleY(var(--bar)); transform-origin: bottom; }
.sh-wk-bar.is-today { background: var(--moon); }
.sh-wk-bar.is-empty { background: var(--line); }
/* العنوان المطوي (الجوال): يظهر بعد 56px من التمرير */
.cbar { position: fixed; top: 0; inset-inline: 0; height: calc(52px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); z-index: 26; display: grid; place-items: center; background: var(--sky-0); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.cbar.on { opacity: 1; transform: none; } .cbar b { font: var(--t-inline); }
/* الظهور بالنزول أول دخول (homeCalm.reveal) */
.sp .rv { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-3) var(--ease-out) var(--rv-d, 0ms), transform var(--dur-3) var(--ease-out) var(--rv-d, 0ms); }
.sp .rv.in { opacity: 1; transform: none; }

/* لوح الأداة: المادة ثم الملف */
.tl-cap { font: var(--t-caption); color: var(--text-3); margin: 4px 4px 10px; }
.tl-pl { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0 2px 18px; overflow-x: auto; scrollbar-width: none; }
.tl-p { margin-top: 14px; padding: 0; background: none; border: 0; cursor: pointer; border-radius: var(--r-pill); flex: none; }
.tl-sel { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; } .tl-sel b { font: 700 14px/20px var(--font); }
.tl-files { margin-bottom: 18px; } .tl-files .list-row > .ic { color: var(--text); }
.tl-files .mini { width: 36px; height: 46px; }
.tl-none { font: var(--t-body); color: var(--text-2); margin: 0 4px 18px; }
.tl-next { width: 100%; }
.tl-up { align-self: center; }
.tl { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .tl-ov { align-items: flex-start; justify-content: flex-start; padding: 0; }
  .tl-ov .sheet-panel { position: fixed; top: var(--tl-y, 224px); right: var(--tl-x, 32px); width: var(--tl-w, 480px); max-width: none; margin: 0; padding: 14px 20px 20px; border-radius: var(--r-panel); box-shadow: var(--shadow-float), var(--rim); }
  .tl-ov .tl-pl { margin-inline: 0; } .tl-ov .tl-files { background: var(--surface-2); border-color: transparent; }
}

@media (min-width: 768px) and (max-width: 1023.98px) { .cbar { height: 64px; padding-top: 0; } }
@media (min-width: 1024px) { .cbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .sp .rv { opacity: 1; transform: none; transition: none; } .cbar { transition: none; } }

/* ===== مجرّتك #/galaxy: الحقل فوق السماء بلا تعتيم، ودرب التبانة أوضح */
.rd-scr.gx-scr { padding: 0; overflow: hidden; }
html:has(.gx-scr) .sky-band { opacity: calc(var(--band-a) * 1.45); }
html:has(.gx-scr) .sky-stars { opacity: 0; }
.gx-stage { position: absolute; inset: 0; pointer-events: none; }
.gx-field { position: absolute; inset: 0; overflow: visible; }
.gx-field g { transition: opacity var(--dur-2) var(--ease-out); } .gx-field .lo { opacity: .22; }
.gx-top { position: relative; z-index: 2; display: grid; grid-template-columns: 44px 1fr 44px; padding: calc(env(safe-area-inset-top) + 4px) 10px 0; }
.gx-top > .iconbtn { grid-row: 1; } .gx-sh1 { grid-column: 3; grid-row: 1; } .gx-top .grow, .gx-sh2 { display: none; }
.gx-h { grid-column: 1 / -1; margin: 9px 6px 0; }
.gx-k { font: var(--t-head); color: var(--text-2); }
.gx-n { display: flex; align-items: baseline; gap: 8px; color: var(--moon); margin-top: 2px; }
.gx-n b { font: var(--t-num-l); } .gx-n span { font: var(--t-subtitle); }
.gx-c { display: block; font: var(--t-label); color: var(--text-2); margin-top: 2px; }
.gx-bot { position: fixed; bottom: max(34px, env(safe-area-inset-bottom)); inset-inline: 16px; z-index: 22; }
.stu .gx-chips { overflow-x: auto; margin: 0 -16px 26px; padding: 0 16px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to left, black 88%, transparent); mask-image: linear-gradient(to left, black 88%, transparent); }
.gx-chips::-webkit-scrollbar { display: none; }
.stu .gx-chips .chip { background: color-mix(in srgb, var(--surface-2) 85%, transparent); }
.stu .gx-chips .chip.on { background: var(--surface-3); }
.ms-cap { font: var(--t-caption); color: var(--text-3); margin-bottom: 12px; }
.ms-track { position: relative; margin: 0 6px; }
.ms-track > .ms-p { position: absolute; top: 50%; transform: translate(50%, -50%); display: grid; }
.ms-track .pt { background: var(--sky-0); } .ms-track .pt.lit { background: var(--moon); }
.ms-labs { display: flex; justify-content: space-between; margin-top: 14px; }
.ms-labs span { display: flex; flex-direction: column; font: var(--t-caption); max-width: 34%; }
.ms-labs span:nth-child(2) { align-items: center; text-align: center; } .ms-labs span:nth-child(3) { align-items: flex-end; text-align: left; }
.ms-labs b { font: 500 13px/18px var(--font); } .ms-labs small { font: var(--t-caption); color: var(--text-2); }
.gx-moment { position: fixed; bottom: max(34px, env(safe-area-inset-bottom)); inset-inline: 16px; z-index: 22; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.gx-moment.out { opacity: 0; transform: translateY(12px); }
.gx-moment > .t3 { font: var(--t-caption); color: var(--text-3); margin-top: 6px; }
.gx-moment h2 { font: var(--t-subtitle); margin: 0; } .gx-moment p { font: var(--t-body); color: var(--text-2); margin: 0; }
.gxm-act { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 12px; }
.gxm-act .btn-primary { min-width: 120px; } .gxm-act .btn-ghost { gap: 8px; padding: 0 8px; font-weight: 500; }
@media (min-width: 1024px) {
  .gx-top { position: absolute; top: 28px; inset-inline: 32px; padding: 0; display: flex; align-items: flex-start; gap: 12px; }
  .gx-h { margin: 4px 0 0; } .gx-top .grow { display: block; flex: 1; } .gx-sh1 { display: none; }
  .gx-sh2 { display: inline-flex; height: 40px; padding: 0 16px; gap: 8px; }
  .gx-bot { inset-inline: 32px auto; bottom: 32px; width: 560px; }
  .gx-moment { inset-inline: 32px auto; bottom: 32px; width: 440px; padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .gx-field g, .gx-moment { transition: none; } }
/* مجرّتك تتشكّل (design-reference/galaxy-mastery): غبار الأذرع وتوهج القلب، ونقاط المواضيع بحلقة ليلة الإتقان، والقمر الثابت، والفصول السابقة */
.gm-field .gm-dust { fill: var(--star); opacity: .38; } .gm-field .gm-core { opacity: .5; } .gm-st4 .gm-core { opacity: .8; }
.gm-field .gs, .gm-rot { transform-box: view-box; }
.mm-ring { fill: none; stroke: var(--moon); stroke-width: 1; stroke-opacity: .7; }
.gm-lab { font: var(--t-caption); fill: var(--text); paint-order: stroke; stroke: var(--sky-0); stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.gm-tp.on .gm-lab { opacity: 1; }
.gm-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); font: var(--t-caption); color: var(--text-2); }
.gm-key > span, .gm-keyb { display: inline-flex; align-items: center; gap: var(--space-1); }
.gm-keyb { padding: var(--space-2) 0; margin: calc(var(--space-2) * -1) 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; pointer-events: auto; } .gm-key .rstar { margin: -2px; } .gm-key b { color: var(--moon); font-weight: 700; }
.gm-moon { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + 64px); inset-inline-end: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: 2px; color: inherit; text-decoration: none; }
.gm-moon small, .gm-far small { font: var(--t-micro); color: var(--text-2); white-space: nowrap; }
.gm-far { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: var(--space-1); background: none; border: 0; opacity: .8; }
.gm-far small { color: var(--text-3); } .gm-far svg, .gm-mini { flex: none; overflow: visible; } .gm-far:active { opacity: .6; }
.gm-was { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--t-label); color: var(--text-2); } .gm-was .pt { flex: none; }
@media (min-width: 1024px) { .gm-moon { top: 104px; inset-inline-end: 32px; } .gm-key { margin-top: var(--space-3); } }

/* ===== كلماتي #/words */
.wdw { max-width: 820px; }
.wd-top { display: flex; height: 44px; margin: -8px -6px 8px; }
.wd-ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.wd-ph h1 { font: var(--t-title); margin: 0; } .wd-ph .sub { font: var(--t-label); color: var(--text-2); margin-top: 2px; }
.wd-ph .btn { flex: none; height: 40px; padding: 0 16px; }
.stu .wd-chips { margin-bottom: 16px; }
.wd-list .list-row > .lead { width: 32px; }
.wd-main { flex: 1; min-width: 0; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.wd-en { text-align: right; }
.wd-empty p { margin: 0; padding: 16px; font: var(--t-body); color: var(--text-2); }
.wd-sheet > b.wd-en { display: block; font: var(--t-head); } .wd-sheet > p { margin: 4px 0 16px; font: var(--t-body); color: var(--text-2); }
@media (min-width: 1024px) { .wd-top { display: none; } }

/* عنوان «أسبوعك» يأخذ التركيز من الرابط القديم #/week لقارئ الشاشة، بلا إطار ظاهر */
#sh-week h2:focus { outline: none; }

/* «إتقانك» في المذاكرة (js/hub-mastery.js، الاتجاه A المعتمد design-reference/hub-mastery): بعد الأدوات مباشرة. الحركة transform/opacity، كل خطوة ≤ --dur-4 */
.sp .hm-hide { display: none; }
.sp .sh-wk.hm-open .hm-hide { display: flex; } .sp .sh-wk.hm-open .hm-more { display: none; }
.hm .hm-more .list-row-main b { font-weight: 500; }
.hm-roll { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.hm-roll > span { grid-area: 1 / 1; }
.hm-roll > .out { animation: hm-out var(--dur-2) var(--ease-out) var(--dur-2) both; }
.hm-roll > .in { animation: hm-in var(--dur-2) var(--ease-out) var(--dur-2) both; }
@keyframes hm-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes hm-in { from { opacity: 0; transform: translateY(8px); } }
.hm-swap { display: grid; }
.hm-swap > * { grid-area: 1 / 1; }
.hm-moment { display: flex; align-items: center; gap: var(--space-2); font: var(--t-label); color: var(--text); opacity: 0; transform: translateY(6px); }
.hm-moment .pt { --pt: 10px; }
.hm-play .hm-swap > :not(.hm-moment) { animation: hm-fade var(--dur-2) var(--ease-out) var(--dur-4) both; }
.hm-play .hm-moment { animation: hm-up var(--dur-2) var(--ease-out) calc(var(--dur-4) + var(--dur-1)) both; }
@keyframes hm-fade { to { opacity: 0; } }
@keyframes hm-up { to { opacity: 1; transform: none; } }
.hm-play .hm-bar .bar i { transition: transform var(--dur-4) var(--ease-out) var(--dur-2); }
/* النقطة (موضوع): مفرّغة = ما أتقنته بعد، منيرة بضوء القمر = أتقنته. الإنارة: النواة .4→1، والهالة تتفتح وتخفت */
.hm-pt { position: relative; width: 10px; height: 10px; border-radius: var(--r-pill); border: 1.5px solid var(--text-3); flex: none; }
.hm-pt > i { position: absolute; inset: -1.5px; border-radius: inherit; background: var(--moon); opacity: 0; transform: scale(.4); }
.hm-pt.on { border-color: var(--moon); }
.hm-pt.on > i { opacity: 1; transform: none; }
.hm-pt::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: var(--r-pill); background: var(--glow-moon); opacity: 0; transform: scale(.6); pointer-events: none; }
.lighting > i { animation: hm-core var(--dur-3) var(--ease-out) both; }
.lighting::after { animation: hm-halo var(--dur-4) var(--ease-out) both; }
@keyframes hm-core { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes hm-halo { 0% { opacity: 0; transform: scale(.6); } 45% { opacity: .9; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1.8); } }
.hm-a-in { display: flex; flex-direction: column; gap: var(--space-3); }
.hm-num { padding: var(--space-4) var(--space-5) var(--space-4); }
.hm-num > small { font: var(--t-caption); display: block; }
.hm-big { display: flex; align-items: baseline; gap: var(--space-1); margin-top: var(--space-1); }
.hm-big > b { font: var(--t-num-l); font-feature-settings: "tnum"; }
.hm-big > b small { font: var(--t-label); }
.hm-delta { margin-inline-start: auto; font: var(--t-label); }
.hm-bar { display: block; margin: var(--space-2) 0 var(--space-3); }
.hm-next { font: var(--t-caption); color: var(--text-2); margin: 0; }
.hm-next.ember-t { color: var(--ember); }
.hm-a-list .list-panel { margin: 0; }
.hm-crow .list-row-main small { display: flex; align-items: center; gap: var(--space-1); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-crow .list-row-main small.ember-t { color: var(--ember); }
.hm-pts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 112px; flex: none; }
.hm-weak .btn { flex: none; }
.hm-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; padding: var(--space-6); }
.hm-empty p { font: var(--t-body); color: var(--text-2); margin: 0; max-width: 280px; text-wrap: balance; }
.hm-pts-out { display: flex; gap: var(--space-3); height: 28px; align-items: center; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hm-a-in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
}
/* سطر قمرك في بطاقة «إتقانك» (design-reference/me-mastery): يفتح «أنا»، ويختفي في الحاسب (الشريط الجانبي فيه الليلة) */
.mm-moonrow { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)); padding: var(--space-3) var(--space-2) var(--space-2); border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.mm-mt { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--space-1); font: var(--t-caption); color: var(--text-2); white-space: nowrap; }
.mm-mt > .num, .mm-swap .b { color: var(--moon); } .mm-chev { color: var(--text-3); flex: none; }
.mm-swap, .mm-x { display: inline-grid; } .mm-swap > *, .mm-x > span { grid-area: 1 / 1; } .mm-x > span { display: grid; place-items: center; } .mm-swap .b { opacity: 0; }
.mm-fly { position: fixed; z-index: 90; width: 14px; height: 14px; pointer-events: none; }
.mm-fly > i { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--moon); opacity: 0; }
.mm-fly > i::after { content: ''; position: absolute; inset: -14px; border-radius: inherit; background: var(--glow-moon); }
@media (min-width: 1024px) { .mm-moonrow { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hm-roll > span, .hm-play .hm-swap > *, .lighting > i, .lighting::after { animation-duration: var(--dur-1); animation-delay: 0ms; }
}
/* ST-8: أسماء المواد تحت الكوكبة كل وحدة بمسافتها، والاسم الطويل أو الإنجليزي ينقص بـ… بدل ما يلصق باللي جنبه */
.sh-cst { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; column-gap: var(--space-3); }
.sh-cst .cst-lab { display: inline-flex; gap: 4px; max-width: 46%; white-space: nowrap; }
.sh-cst .cst-lab bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* css/tools.css */
/* منظّمي — «الأدوات» (js/tools-hub.js) وألواحها (js/tools-kit.js وtools-docs.js وtools-cite.js).
   الشكل المعتمد: design-reference/student-tools/prototype.css. كل القيم من متغيرات النظام. */
.tk { padding-bottom: 120px; }
.tk .mz-psub { margin-bottom: 18px; }
/* البحث: كبسولة مثل «اسأل أستاذ المادة» */
.tk-search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; margin-bottom: 24px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--rim); color: var(--text-3); }
.tk-search svg { flex: none; }
.tk-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: var(--t-body); color: var(--text); }
.tk-search input::placeholder { color: var(--text-3); }
.tk-search input::-webkit-search-cancel-button { display: none; }
.tk-link { padding: 0; border: 0; background: none; font: var(--t-label); color: var(--rose); cursor: pointer; }
/* المثبّتة وأدوات المذاكرة: أربع خانات في إطار واحد مثل «أدوات المذاكرة» */
.tk-pin { padding: 6px 8px; margin-bottom: 28px; background: var(--surface); border-radius: var(--r-panel); border: 1px solid var(--line); box-shadow: var(--rim); display: grid; grid-template-columns: repeat(4, 1fr); }
.tk-tile { height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 0; border-radius: var(--r-field); background: none; font: var(--t-caption); color: var(--text); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.tk-tile svg { color: var(--text-2); }
.tk-tile:active { transform: scale(var(--press-scale)); }
.tk .sec-h { margin-top: 4px; }
.tk .sec-h h2 { font: var(--t-head); }
.tk .list-panel { margin-bottom: 28px; }
.tk .list-row { min-height: 60px; text-decoration: none; color: var(--text); }
.tk .lead, .tkx .lead { width: 40px; display: grid; place-items: center; flex: none; color: var(--text-2); }
.tk .list-row-main, .tkx .list-row-main { flex: 1; min-width: 0; }
.tk .list-row-main b, .tkx .list-row-main b { display: block; font: var(--t-label); font-weight: 600; color: var(--text); }
.tk .list-row-main small, .tkx .list-row-main small { display: block; font: var(--t-caption); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk .chev, .tk .tk-ext { color: var(--text-3); flex: none; }
.tk [hidden] { display: none; }

/* ألواح الأدوات */
.tkx { display: flex; flex-direction: column; gap: 14px; }
.tkx .ex-h { display: flex; align-items: center; gap: 10px; margin: 0; }
.tkx .ex-h b { flex: 1; font: var(--t-head); }
.tkx .ex-h .lead { width: auto; display: inline-flex; }
.tkx .ex-h .t3 { font: var(--t-caption); color: var(--text-3); }
.tkx-x { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.tkx-cap { font: var(--t-caption); color: var(--text-2); margin: 4px 4px -6px; }
.tkx-capr { display: flex; justify-content: space-between; align-items: baseline; }
.tkx-in { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: var(--r-field); background: var(--surface-2); border: 1px solid var(--line); font: var(--t-body); color: var(--text); }
.tkx-in input, .tkx-in select { flex: 1; min-width: 0; height: 50px; border: 0; background: none; outline: none; font: inherit; color: inherit; }
.tkx-in.ltr { direction: ltr; }
.tkx-in .unit { margin-inline-start: auto; flex: none; padding: 0; border: 0; background: none; color: var(--text-2); font: var(--t-label); display: inline-flex; }
.tkx-in button.unit { color: var(--rose); cursor: pointer; }
.tkx-in .clear { margin-inline-start: auto; flex: none; padding: 0; border: 0; background: none; color: var(--text-3); display: inline-flex; cursor: pointer; }
.tkx-hin { display: grid; grid-template-columns: 1fr 2fr 1.3fr; gap: 8px; }
.tkx-hin .tkx-in { min-width: 0; padding: 0 12px; outline: none; }
.tkx .tab-bar { margin: 0; }
/* المرجع الجاهز: باتجاه الإنجليزي ومسافة معلّقة مثل APA */
.tkx-ref { padding: 16px 18px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--rim); }
.tkx-ref p { margin: 0; font: var(--t-body); line-height: 1.75; color: var(--text); direction: ltr; text-align: left; padding-left: 28px; text-indent: -28px; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.tkx-ref small { display: flex; align-items: center; gap: 6px; margin-top: 10px; font: var(--t-caption); color: var(--text-2); }
.tkx-ref small svg { color: var(--semantic-success); flex: none; }
.tkx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tkx-row2 .btn { height: 48px; }
.tkx-note { font: var(--t-caption); color: var(--text-2); text-align: center; margin: 0; }
.tkx-hint { font: var(--t-caption); color: var(--text-2); margin: -6px 4px 0; }
.tkx-hint .tk-link { font: var(--t-caption); }
/* الرسالة: الفراغات المعبّأة من بيانات الطالب مميّزة، والنص كله يتعدّل */
.tkx-mail { padding: 16px 18px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--rim); font: var(--t-body); line-height: 1.9; color: var(--text); }
.tkx-mail .sub { display: block; font: var(--t-caption); color: var(--text-2); margin-bottom: 8px; }
.tkx-mail .sub b { color: var(--text); font-weight: 600; }
.tkx-mail [contenteditable] { outline: none; user-select: text; -webkit-user-select: text; }
.tkx-mail p { margin: 0 0 6px; }
.tkx-mail mark { background: var(--surface-3); color: var(--text); border-radius: var(--r-mark); padding: 0 2px; }
.tkx-mail mark.ph { color: var(--text-2); }
/* صف اختيار (مادة) بقائمة الجهاز فوقه، وحقول الكتابة داخل الصفوف */
.tkx-fields .sheet-row { min-height: 48px; }
.tkx-fields .sheet-row .v { color: var(--text-2); font: var(--t-label); }
.tkx-fields .v.ltr { direction: ltr; }
.tkx-sel { position: relative; }
.tkx-sel .sheet-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkx-sel select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.tkx-fields label.sheet-row .sheet-row-label { flex: none; min-width: 84px; color: var(--text-2); font: var(--t-label); }
.tkx-fields label.tkx-sel .sheet-row-label { flex: 1; color: var(--text); }
.tkx-fields input.v, .tkx-fields textarea.v { flex: 1; min-width: 0; border: 0; background: none; outline: none; text-align: end; color: var(--text); font: var(--t-label); }
.tkx-fields textarea.v { padding: 12px 0; resize: none; line-height: 1.6; text-align: start; }
.tkx-area { align-items: flex-start; }
.tkx-area .sheet-row-label { padding-top: 14px; }
/* كم أحتاج والغياب والتقويم: الرقم في طرف الصف */
.tkx .need { text-align: end; flex: none; max-width: 46%; }
.tkx .need b { display: block; font: var(--t-head); color: var(--moon); white-space: nowrap; }
.tkx .need small { display: block; font: var(--t-caption); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkx .need.ok b, .tkx .need.ok small:only-child { color: var(--semantic-success); }
.tkx .need.off b { color: var(--text-3); }
.tkx .need.warn b { color: var(--ember); }
.tkx .need.add small { color: var(--rose); font: var(--t-label); }
.tkx .list-panel { margin: 0; }
.tkx .list-row { width: 100%; text-align: start; color: var(--text); }
/* المحوّلات: النتيجة رقم كبير */
.tkx-out { padding: 18px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--rim); display: grid; gap: 4px; }
.tkx-out:empty { display: none; }
.tkx-out .l { font: var(--t-caption); color: var(--text-2); }
.tkx-out .n { font: var(--t-num-l); color: var(--text); }
.tkx-out .n small { font: var(--t-label); color: var(--text-2); }
.tkx-out .s { font: var(--t-label); color: var(--text-2); }
.tkx-out .tkx-rate, .tkx-out .tkx-day { font: var(--t-head); color: var(--text); }
.tkx-out hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
/* العدّاد */
.tkx-text { min-height: 170px; padding: 14px 16px; border-radius: var(--r-field); background: var(--surface-2); border: 1px solid var(--line); font: var(--t-body); line-height: 1.85; color: var(--text); resize: vertical; outline: none; }
.tkx-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 0; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--rim); }
.tkx-stats span { display: grid; justify-items: center; gap: 2px; padding: 10px 0; }
.tkx-stats span + span { border-inline-start: 1px solid var(--line); }
.tkx-stats b { font: var(--t-num-s); color: var(--text); }
.tkx-stats small { font: var(--t-caption); color: var(--text-2); }
.tkx-lim { display: flex; justify-content: space-between; align-items: center; font: var(--t-caption); color: var(--text-2); margin: 0 4px; }
.tkx-goal { width: 64px; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--r-mark); background: var(--surface-2); color: var(--text); font: var(--t-caption); text-align: center; outline: none; }
.tkx-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.tkx-bar i { display: block; height: 100%; border-radius: inherit; background: var(--moon); transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--dur-2) var(--ease-out); }
/* الغلاف: معاينة صفحة A4 بورق التطبيق، ونفسها بحجم الصفحة خارج الشاشة للـ PDF */
#tk-cv { display: flex; justify-content: center; }
.tkx-cover {
  --cv-u: 9px; --cv-t: 13px; --cv-c: 9px; --cv-n: 8px; --cv-d: 8px;
  width: 58%; aspect-ratio: 210 / 297; max-width: 100%; border-radius: var(--r-thumb); background: var(--paper-bg); color: var(--paper-ink); box-shadow: var(--shadow-soft); padding: 9% 8%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; overflow: hidden; }
.tkx-cover .u { font-size: var(--cv-u); line-height: 1.5; font-weight: 600; }
.tkx-cover .logo { width: 30px; height: 30px; border-radius: var(--r-pill); border: 1.5px solid var(--paper-ln); margin: 6px 0; display: grid; place-items: center; color: var(--paper-ln); }
.tkx-cover .t { margin-top: auto; font-size: var(--cv-t); line-height: 1.5; font-weight: 700; overflow-wrap: anywhere; }
.tkx-cover .c { font-size: var(--cv-c); line-height: 1.5; }
.tkx-cover .names { margin-top: auto; font-size: var(--cv-n); line-height: 1.7; width: 100%; border-top: 1px solid var(--paper-ln); padding-top: 6px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 10px; }
.tkx-cover .d { margin-top: 6px; font-size: var(--cv-d); }
.tkc-host { position: fixed; top: 0; left: -12000px; width: 794px; direction: rtl; pointer-events: none; }
.tkc-a4 {
  --cv-u: 22px; --cv-t: 40px; --cv-c: 22px; --cv-n: 19px; --cv-d: 18px;
  width: 794px; height: 1123px; aspect-ratio: auto; border-radius: initial; box-shadow: none; font-family: var(--font); gap: 14px; }
.tkc-a4 .logo { width: 96px; height: 96px; border-width: 3px; margin: 24px 0; }
.tkc-a4 .logo svg { width: 48px; height: 48px; }
.tkc-a4 .names { padding-top: 22px; border-top-width: 2px; column-gap: 28px; }
.tkc-a4 .d { margin-top: 18px; }
/* الآيباد والحاسب: الأدراج عمودين */
@media (min-width: 700px) {
  .tk-cols { columns: 2; column-gap: 24px; }
  .tk-cols .sec { break-inside: avoid; display: block; margin: 0; padding: 0; }
  .tk-cols .sec .sec-h { margin-top: 0; }
}

/* ===== الدفعتان 2 و3 (26 أكتوبر): الملفات، الحساب، المشاريع، القروب، المصادر. الشكل المعتمد prototype-23.css ===== */
/* أزرار بلا شكل زر داخل الصفوف */
.tkx .tkf-x, .tkx .tks-del, .tkg-chk, .tkx .tkg-open, .tkx .tks-ref, .tkm-scr .hs button, .tkp-step button, .tkp-ctl button { -webkit-appearance: none; appearance: none; border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.tkx .tkg-open, .tkx .tks-ref { text-align: start; }
.tkx .tkf-back { align-self: stretch; height: 46px; }
/* محتوى اللوح المتغيّر بنفس مسافات اللوح (النموذج: كل العناصر أبناء .tkx مباشرة) */
.tkx #tkx-b { display: flex; flex-direction: column; gap: 14px; }
.tkx #tkx-b:empty { display: none; }
.tkx .tkx-row2.one { grid-template-columns: 1fr; }
/* حقل تاريخ أو قائمة مخفية فوق الصف كله */
.tkx label.sheet-row, .tkp-tl .list-row { position: relative; }
.tkx .sheet-row > .tkx-sel, .tkp-tl .list-row > .tkx-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* الملفات: صورة مصغّرة بورق التطبيق، ومقبض السحب */
.tkf-thumb { width: 34px; height: 44px; flex: none; border-radius: var(--r-mark); background: var(--paper-bg); box-shadow: var(--rim); display: flex; flex-direction: column; gap: 3px; padding: 7px 6px; }
.tkf-thumb i { display: block; height: 2px; border-radius: var(--r-pill); background: var(--paper-ln); opacity: .6; }
.tkf-thumb i:nth-child(2) { width: 70%; }
.tkf-thumb i:nth-child(4) { width: 55%; }
.tkx .tkf-x { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--text-3); }
.tkf-grip { color: var(--text-3); flex: none; display: inline-flex; touch-action: none; cursor: grab; }
.tkf-item { touch-action: pan-y; }
.tkx .tkf-drag { position: relative; z-index: 2; background: var(--surface-2); box-shadow: var(--shadow-soft); cursor: grabbing; }
.tkx .tkf-add .lead, .tkx .tkf-add .list-row-main b { color: var(--rose); }
.tkf-sum { display: flex; justify-content: space-between; font: var(--t-caption); color: var(--text-2); margin: 0 4px; }
/* صور ← PDF: شبكة صور بترتيبها */
.tkf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tkf-ph { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-field); background: var(--paper-bg); box-shadow: var(--rim); overflow: hidden; touch-action: none; }
.tkf-ph img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; }
.tkf-ph b { position: absolute; top: 6px; inset-inline-start: 6px; width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--moon); color: var(--moon-dark); font: var(--t-caption); font-weight: 700; display: grid; place-items: center; }
.tkf-del { position: absolute; top: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border: 0; padding: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.tkf-ph.add { -webkit-appearance: none; appearance: none; background: var(--surface-2); box-shadow: none; border: 1px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-2); font: var(--t-caption); cursor: pointer; touch-action: auto; }
/* الضغط: قبل وبعد */
.tkf-size { display: flex; align-items: baseline; justify-content: center; gap: 12px; direction: ltr; }
.tkf-size s { font: var(--t-num-s); color: var(--text-3); text-decoration: none; }
.tkf-size b { font: var(--t-num-l); color: var(--moon); }
.tkf-size svg { color: var(--text-3); align-self: center; }

/* الحاسبة: الشاشة والأزرار */
.tkm-scr { padding: 18px 20px 14px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--rim); direction: ltr; text-align: right; }
.tkm-scr .ex { min-height: 1.6em; font: var(--t-body); color: var(--text-2); overflow-wrap: anywhere; }
.tkm-scr .rs { font: var(--t-num-l); color: var(--text); margin-top: 4px; overflow-wrap: anywhere; }
.tkm-scr .hs { display: flex; gap: 8px; justify-content: space-between; margin-top: 10px; font: var(--t-caption); color: var(--text-3); }
.tkm-scr .hs button { font: var(--t-caption); color: var(--text-3); min-height: 28px; }
.tkm-scr .hs #tkm-deg { color: var(--rose); }
.tkm-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; direction: ltr; }
.tkm-keys button { height: 48px; border: 0; padding: 0; border-radius: var(--r-field); background: var(--surface-2); display: grid; place-items: center; font: var(--t-label); color: var(--text); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.tkm-keys button:active { transform: scale(var(--press-scale)); }
.tkm-keys button.f { background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font: var(--t-caption); }
.tkm-keys button.op { background: var(--surface-3); }
.tkm-keys button.eq { background: var(--ink); color: var(--on-ink); font-weight: 700; }
/* رسم الدوال */
.tkm-fx { display: flex; flex-direction: column; gap: 8px; }
.tkm-fx .tkx-in { direction: ltr; gap: 12px; }
.tkm-fx .dot { width: 12px; height: 12px; border-radius: var(--r-pill); flex: none; }
.tkm-fx .dot.c1 { background: var(--moon); }
.tkm-fx .dot.c2 { background: var(--rose); }
.tkm-fx .dot.c3 { background: var(--aura-sky); }
.tkm-plot { direction: ltr; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--rim); overflow: hidden; aspect-ratio: 4 / 3; touch-action: pan-y; }
.tkm-plot svg { display: block; width: 100%; height: 100%; }
.tkm-plot .g { stroke: var(--line); stroke-width: 1; }
.tkm-plot .ax { stroke: var(--text-3); stroke-width: 1.4; }
.tkm-plot .t { fill: var(--text-3); font: var(--t-caption); }
.tkm-plot .lb { fill: var(--text-2); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.tkm-plot .c1 { stroke: var(--moon); }
.tkm-plot .c2 { stroke: var(--rose); }
.tkm-plot .c3 { stroke: var(--aura-sky); }
.tkm-plot .pt { fill: var(--text); }
.tkm-zoom { display: flex; justify-content: center; gap: 10px; }
.tkm-zoom .btn { width: 56px; height: 44px; padding: 0; display: grid; place-items: center; }
/* الإحصاء */
.tkm-st { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--rim); }
.tkm-st span { display: grid; justify-items: center; gap: 2px; padding: 14px 4px; min-width: 0; }
.tkm-st span:nth-child(n+4) { border-top: 1px solid var(--line); }
.tkm-st span:not(:nth-child(3n+1)) { border-inline-start: 1px solid var(--line); }
.tkm-st b { font: var(--t-num-s); color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tkm-st small { font: var(--t-caption); color: var(--text-2); }
.tkm-hist { display: flex; align-items: flex-end; gap: 6px; height: 92px; padding: 14px 16px 0; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--rim); direction: ltr; }
.tkm-hist i { flex: 1; border-radius: var(--r-mark) var(--r-mark) 0 0; background: var(--moon); opacity: .8; }
.tkm-hx { display: flex; justify-content: space-between; direction: ltr; font: var(--t-caption); color: var(--text-3); margin: -8px 4px 0; }
.tkx .tkm-mono { direction: ltr; text-align: left; min-height: 0; }
/* الوحدات */
.tkm-uv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tkm-uv .tkx-in b { flex: 1; min-width: 0; font: var(--t-num-s); color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.tkm-u { position: relative; flex: none; color: var(--text-2); font: var(--t-label); display: inline-flex; align-items: center; gap: 4px; }
.tkm-u select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.tkm-swap { justify-self: center; width: 40px; height: 40px; margin: -24px 0; z-index: 1; padding: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); display: grid; place-items: center; border: 4px solid var(--surface); cursor: pointer; }

/* خطة المشروع: مراحل بخط زمني */
.tkp-tl .list-row { min-height: 58px; }
.tkp-tl .lead b { width: 14px; height: 14px; border-radius: var(--r-pill); border: 2px solid var(--moon); background: var(--surface); }
.tkp-tl .list-row:last-child .lead b { background: var(--moon); }
.tkp-tl .when { flex: none; text-align: end; font: var(--t-caption); color: var(--text-2); }
.tkp-tl .when b { display: block; font: var(--t-label); color: var(--text); font-weight: 600; }
/* قسّم القروبات والقرعة */
.tkp-step { display: flex; align-items: center; gap: 14px; }
.tkp-step button { width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--surface-3); display: grid; place-items: center; color: var(--text); }
.tkp-step button:disabled { opacity: .4; cursor: default; }
.tkp-step b { font: var(--t-num-s); color: var(--text); min-width: 20px; text-align: center; }
.tkp-grp .list-row { min-height: 48px; padding-block: 8px; }
.tkp-grp .lead b { width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); display: grid; place-items: center; font: var(--t-caption); font-weight: 700; }
.tkx .tkp-grp .list-row-main b { white-space: normal; font-weight: 500; }
.tkp-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--surface-3); }
.tkp-sw::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--text-2); transition: transform var(--dur-1) var(--ease-out); }
.tkp-sw.on { background: var(--moon); }
.tkp-sw.on::after { background: var(--moon-dark); transform: translateX(-18px); }
[dir="ltr"] .tkp-sw.on::after { transform: translateX(18px); }
.tkp-pick { min-height: 120px; padding: 18px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--rim); display: grid; place-content: center; text-align: center; gap: 6px; }
.tkp-pick b { font: var(--t-num-l); color: var(--moon); overflow-wrap: anywhere; }
.tkp-pick small { font: var(--t-caption); color: var(--text-2); }
/* مؤقت العرض */
.tkp-ring { align-self: center; position: relative; width: 220px; height: 220px; }
.tkp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tkp-ring .bg { stroke: var(--surface-3); }
.tkp-ring .fg { stroke: var(--moon); }
.tkp-ring .fg.late { stroke: var(--ember); }
.tkp-ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; }
.tkp-ring b { font: var(--t-num-l); color: var(--text); }
.tkp-ring small { font: var(--t-caption); color: var(--text-2); }
.tkp-slides { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tkp-slides i { width: 22px; height: 6px; border-radius: var(--r-pill); background: var(--surface-3); }
.tkp-slides i.done { background: var(--moon); }
.tkp-slides i.now { background: var(--rose); }
.tkp-ctl { display: flex; justify-content: center; align-items: center; gap: 18px; }
.tkp-ctl button { width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--surface-2); display: grid; place-items: center; color: var(--text); transition: transform var(--dur-1) var(--ease-out); }
.tkp-ctl button:active { transform: scale(var(--press-scale)); }
.tkp-ctl button:disabled { opacity: .4; cursor: default; }
.tkp-ctl button.main { width: 72px; height: 72px; background: var(--ink); color: var(--on-ink); }

/* مهام القروب */
.tkg-mem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; color: var(--text-3); }
.tkg-av { display: flex; direction: ltr; }
.tkg-av span { width: 32px; height: 32px; border-radius: var(--r-pill); display: grid; place-items: center; font: var(--t-caption); font-weight: 700; color: var(--moon-dark); border: 2px solid var(--surface); margin-left: -8px; }
.tkg-av span:first-child { margin-left: 0; }
.tkg-mem small { flex: 1; font: var(--t-caption); color: var(--text-2); }
.tkg-av .c0, .tkg-who.c0 { background: var(--moon); }
.tkg-av .c1, .tkg-who.c1 { background: var(--rose); }
.tkg-av .c2, .tkg-who.c2 { background: var(--aura-sky); }
.tkg-av .c3, .tkg-who.c3 { background: var(--ember); }
.tkg-who { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: var(--r-pill); font: var(--t-caption); color: var(--moon-dark); }
.tkg-who.none { background: var(--surface-3); color: var(--text-2); }
.tkg-chk { width: 24px; height: 24px; flex: none; border-radius: var(--r-pill); border: 2px solid var(--text-3); display: grid; place-items: center; transition: transform var(--dur-1) var(--ease-out); }
.tkg-chk:active { transform: scale(var(--press-scale)); }
.tkg-chk.on { background: var(--moon); border-color: var(--moon); color: var(--moon-dark); }
.tkx .tkg-done .list-row-main b { color: var(--text-3); text-decoration: line-through; }
.tkx .tkg-add .lead, .tkx .tkg-add .list-row-main b { color: var(--rose); }
.tkx .tkg-leave { align-self: center; color: var(--text-3); font: var(--t-caption); }
.tkx .tkg-del { color: var(--semantic-danger); }
.tkg-page .tkx { max-width: 520px; }

/* دوّر مصادر */
.tks-src .list-row { align-items: flex-start; padding-block: 14px; }
.tkx .tks-src .list-row-main b { white-space: normal; direction: ltr; text-align: left; line-height: 1.45; }
.tkx .tks-src .list-row-main small { direction: ltr; text-align: left; white-space: normal; margin-top: 4px; }
.tks-chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: flex-end; }
.tks-chips > * { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font: var(--t-caption); color: var(--text); direction: rtl; text-decoration: none; cursor: pointer; }
.tks-chips .free { color: var(--moon); border-color: var(--moon-rim); }
.tks-chips .on { background: var(--surface-3); cursor: default; }
.tks-chips select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
/* مراجع مادتي */
.tks-refs .list-row { align-items: flex-start; padding-block: 12px; }
.tks-refs .list-row-main p { margin: 0; direction: ltr; text-align: left; font: var(--t-label); line-height: 1.6; color: var(--text); padding-left: 22px; text-indent: -22px; overflow-wrap: anywhere; }
.tkx .tks-del { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: var(--text-3); border-radius: var(--r-pill); }
.tks-row3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.tks-row3 .btn { height: 46px; }
#tk-keep .tkx-note { display: flex; align-items: center; justify-content: center; gap: 6px; }
#tk-keep .tkx-note svg { color: var(--semantic-success); }
/* css/lms.css */
/* منظّمي — «اربط البلاك بورد» (js/lms-link.js، معتمد 25 أكتوبر من design-reference/lms-link): المدخل في «المواعيد»، لوح الربط،
   «لأي مادة؟»، شارة المصدر، والإدارة. كل القيم من متغيرات النظام. */
/* المدخل: صف واحد بدل سطر «تضيفها من اكتب أي شي» */
.lk-entry { margin-top: 4px; }
.lk-entry .list-row { min-height: 64px; gap: 12px; }
.lk .lead, .lk-entry .lead { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: var(--r-field); background: var(--surface-2); color: var(--moon); }
.lk-entry .list-row-main, .lk .list-row-main { flex: 1; min-width: 0; }
.lk-entry .list-row-main b, .lk .list-row-main b { display: block; font: var(--t-label); font-weight: 600; color: var(--text); }
.lk-entry .list-row-main small, .lk .list-row-main small { display: block; font: var(--t-caption); color: var(--text-2); }
.lk-entry .chev, .lk .chev { color: var(--text-3); flex: none; }
.lk-alt { font: var(--t-caption); color: var(--text-3); text-align: center; margin: 12px 0 0; }
.lk-status { appearance: none; border: 0; background: none; padding: 4px 8px; display: inline-flex; align-items: center; gap: 6px; font: inherit; color: var(--text-2); cursor: pointer; }
/* الصف زر داخل .list-panel: بلا خلفية المتصفح الرمادية (v198 طلع رمادي)، فيبان سطح اللوح نفسه */
.lk-entry .list-row { appearance: none; width: 100%; text-align: start; border: 0; background: none; font: inherit; color: inherit; }
.lk-alt .tm-notelink { appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* اللوح */
.lk { display: flex; flex-direction: column; gap: 16px; }
.lk-x { appearance: none; border: 0; cursor: pointer; z-index: 1; position: absolute; inset-inline-end: 16px; top: 14px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); }
/* الرسمة: منظّمي والبلاك بورد بينهم نفس قوس «أقرب موعد» المنقّط */
.lk-art { position: relative; height: 112px; margin: 4px 0 0; }
.lk-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lk-arc { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; }
.lk-dot { fill: var(--moon); }
.lk-glow { fill: var(--moon); opacity: 0.18; }
.lk-node { position: absolute; top: 46px; width: 60px; height: 60px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--rim); color: var(--text); }
.lk-node.me { inset-inline-start: calc(50% - 128px); color: var(--moon); }
.lk-node.bb { inset-inline-end: calc(50% - 128px); }
.lk-node small { position: absolute; top: 66px; white-space: nowrap; font: var(--t-caption); color: var(--text-2); }
.lk h2 { margin: 18px 0 0; font: var(--t-display); text-align: center; color: var(--text); }
.lk .sub { margin: -8px 0 0; font: var(--t-body); color: var(--text-2); text-align: center; }
/* الخطوات: تسلسل حقيقي فالأرقام معلومة */
.lk-steps .list-row { min-height: 60px; gap: 12px; align-items: center; }
.lk-n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: var(--t-caption); font-weight: 700; }
.lk-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; font: var(--t-caption); color: var(--text-2); }
.lk-path i { font-style: normal; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.lk-path .sep { color: var(--text-3); }
.lk-safe { display: flex; gap: 10px; align-items: flex-start; padding: 0 4px; font: var(--t-caption); color: var(--text-2); }
.lk-safe svg { flex: none; color: var(--semantic-success); margin-top: 1px; }
.lk-btns { display: flex; flex-direction: column; gap: 10px; }
.lk-btns .btn { height: 48px; }
.lk-link { align-self: center; font: var(--t-label); color: var(--rose); text-decoration: none; }
.lk-field { min-height: 52px; padding: 0 16px; border-radius: var(--r-field); background: var(--surface-2); border: 1px solid var(--line); font: var(--t-body); color: var(--text); text-align: left; }
/* حقل الرابط بعد اللصق */
.lk-in { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border-radius: var(--r-field); background: var(--surface-2); border: 1px solid var(--line); }
.lk-in .u { flex: 1; min-width: 0; direction: ltr; text-align: left; font: var(--t-label); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-in .u span { color: var(--text-3); }
.lk-clear { appearance: none; border: 0; background: none; padding: 6px; display: inline-flex; color: var(--text-3); cursor: pointer; }
.lk-err { padding: 0 4px; font: var(--t-label); color: var(--semantic-danger); }
.lk-ok { display: flex; align-items: center; gap: 8px; font: var(--t-label); color: var(--semantic-success); padding: 0 4px; }
/* «لأي مادة؟»: صف لكل موعد والمادة في طرفه (مثل صفوف الإعدادات)، والمقترح بإطار منقّط */
.lk-as .list-row { min-height: 64px; gap: 10px; }
.lk-as b.en { direction: ltr; unicode-bidi: plaintext; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-pick { position: relative; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 10px 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font: var(--t-caption); color: var(--text); white-space: nowrap; }
.lk-pick svg { color: var(--text-3); }
.lk-pick.sug { border-style: dashed; border-color: var(--text-3); padding-inline-end: 10px; }
.lk-pick.sug em { font-style: normal; color: var(--text-3); }
.lk-pick.no { color: var(--rose); background: transparent; }
.lk-pick.no svg { color: var(--rose); }
.lk-pick .nm { max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; }
/* القائمة الأصلية فوق الكبسولة شفافة: نفس الشكل، ولوحة الاختيار من النظام (تصل لها لوحة المفاتيح وقارئ الشاشة) */
.lk-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.lk-pick:focus-within { box-shadow: var(--focus-ring); }
.lk-past { display: flex; align-items: center; gap: 10px; padding: 0 4px; font: var(--t-caption); color: var(--text-2); }
.lk-past svg { flex: none; color: var(--text-3); }
.lk-count { text-align: center; font: var(--t-caption); color: var(--text-2); margin: -6px 0 0; }
/* بعد الربط: مصدر الموعد في سطره الصغير، و«جديد» و«تغيّر» */
.lk-src { display: inline-flex; vertical-align: middle; margin-inline-start: 6px; color: var(--text-3); }
.lk-src svg { flex: none; }
.tag.lk-tag { margin-inline-start: 6px; flex: none; }
.tag.lk-new { color: var(--moon); }
.cz-due .tag.lk-chg { color: var(--ember); }
/* الإدارة */
.lk-head { display: flex; align-items: center; gap: 14px; padding: 6px 4px 0; }
.lk-head .lead { width: 52px; height: 52px; border-radius: var(--r-pill); }
.lk-head b { display: block; font: var(--t-head); color: var(--text); }
.lk-head small { display: flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--semantic-success); }
.lk-head small.bad { color: var(--semantic-danger); }
.lk-head small i { width: 8px; height: 8px; border-radius: var(--r-pill); background: currentColor; }
.lk .sheet-row .v { margin-inline-start: auto; font: var(--t-label); color: var(--text-2); }
.lk .sheet-row { width: 100%; }
.lk-sel { margin-inline-start: auto; appearance: none; border: 0; background: none; font: var(--t-label); color: var(--text-2); text-align: end; cursor: pointer; }
.lk-danger { appearance: none; border: 0; background: none; cursor: pointer; align-self: center; font: var(--t-label); color: var(--semantic-danger); padding: 6px 12px; }
/* css/week-plan.css */
/* «خطة أسبوعك» v2 (design-reference/study-plan-v2): القوس، «أيامك»، وضع التركيز، ومدخل «المذاكرة». */
.pv .lead { width: 40px; display: grid; place-items: center; flex: none; }
.pv .chev { color: var(--text-3); flex: none; }
.pv-hero { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 0 var(--space-8); }
.pv-sky { position: relative; flex: none; }
.pv-arc { position: absolute; inset: 0; overflow: visible; }
.pv-past { fill: none; stroke: var(--text-2); stroke-opacity: .6; stroke-width: 2; stroke-linecap: round; }
.pv-fut { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.pv-lbl { position: absolute; left: 0; top: 0; translate: -50% -50%; font: var(--t-caption); color: var(--text-3); white-space: nowrap; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out); }
.pv-lbl.past { opacity: .55; }
.pv-lbl.now, .pv-lbl.on { color: var(--text); font-weight: 700; }
.pv-sky.dragging .pv-lbl:not(.on) { opacity: .45; }
.pv-xl { position: absolute; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
.pv-xl b { display: flex; align-items: center; gap: 6px; font: var(--t-label); font-weight: 700; color: var(--text); }
.pv-xl small { font: var(--t-caption); color: var(--text-2); }
.pv-p { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; padding: 0; border: 0; background: none; touch-action: none; cursor: grab; transition: transform var(--dur-1) var(--ease-out); }
.pv-p .pt { background: var(--sky-0); transition: transform var(--dur-1) var(--ease-out); }
.pv-p.locked { cursor: pointer; }
.pv-p.sel .pt { transform: scale(1.3); }
.pv-p.drag { cursor: grabbing; z-index: 2; }
.pv-p.drag .pt { transform: scale(1.45); }
.pv-sky.dragging .pv-p:not(.drag) { opacity: .5; }
.pv-p:focus-visible { outline: none; }
.pv-p:focus-visible .pt { box-shadow: var(--focus-ring); }
.pv-fl { position: absolute; left: 0; top: 0; translate: -50% -50%; height: 28px; padding: 0 var(--space-3); display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: var(--ring-line); font: var(--t-caption); color: var(--text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.pv-sky.dragging .pv-fl { opacity: 1; }
.pv-chk { position: relative; }
.lighting .pt { animation: pv-light var(--dur-3) var(--ease-out); }
.lighting::after { content: ''; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: var(--r-pill); background: var(--glow-moon); opacity: 0; pointer-events: none; animation: pv-halo var(--dur-4) var(--ease-out); }
@keyframes pv-light { from { transform: scale(.4); } to { transform: scale(1); } }
@keyframes pv-halo { 0% { opacity: 0; transform: scale(.6); } 45% { opacity: .9; } 100% { opacity: 0; transform: scale(2); } }
.pv-mid { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); max-width: 270px; margin-top: calc(-1 * var(--pull, 0px)); text-align: center; transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.pv-mid.leave, .pv-mid.enter { opacity: 0; transform: translateY(6px); }
.pv-cap { font: var(--t-caption); color: var(--text-2); }
.pv-t { font: var(--t-subtitle); margin: 0; text-wrap: balance; }
.pv-meta { display: flex; align-items: center; gap: 6px; font: var(--t-label); color: var(--text-2); }
.pv-mq { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font: var(--t-caption); color: var(--text-2); }
.pv .bar i { transition: transform var(--dur-4) var(--ease-out); }
.pv-mid .btn { min-width: 168px; margin-top: var(--space-4); }
.pv-sec { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin: 0 var(--space-1) var(--space-3); }
.pv-sec h2 { font: var(--t-head); margin: 0; }
.pv-hint { font: var(--t-caption); color: var(--text-3); }
.pv-dh { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-4) 0; font: var(--t-caption); color: var(--text-2); }
.pv-dh:not(:first-child) { border-top: 1px solid var(--line); }
.pv-dh span:first-child { color: var(--text); font-weight: 700; }
.pv-row { position: relative; overflow: hidden; }
.pv-act { position: absolute; inset-block: 0; right: 0; width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--surface-3); font: var(--t-caption); color: var(--text); opacity: var(--sw, 0); }
.pv-in { background: var(--surface); touch-action: pan-y; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.pv-in.swiping { transition: none; }
.pv-row.gone .pv-in { opacity: 0; }
.pv-in.list-row::after { display: none; }
.pv-row.done b { color: var(--text-3); }
.pv-rm { margin-top: var(--space-1) !important; color: var(--text-3) !important; }
.pv-chk { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; background: none; margin-inline-end: calc(-1 * var(--space-2)); }
.pv-chk .pt, .pv-opt .pt { background: var(--surface); }
.pv-p .pt.lit, .pv-chk .pt.lit, .pv-qd .pt.lit, .pv-opt.ok .pt { background: var(--moon); }
.pv-xr { border-top: 1px solid var(--line); }
.pv-tag { flex: none; height: 22px; padding: 0 var(--space-2); display: grid; place-items: center; border-radius: var(--r-chip); background: var(--surface-2); font: var(--t-caption); color: var(--text); }
.pv-set .list-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.pv-set .meteor { color: var(--text); }
.pv-snack { position: fixed; z-index: 60; inset-inline: var(--space-4); max-width: 480px; margin-inline: auto; bottom: calc(var(--float-nav-h) + var(--space-6) + env(safe-area-inset-bottom)); min-height: 48px; padding: var(--space-2) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-radius: var(--r-panel); background: var(--surface-2); box-shadow: var(--ring-line); font: var(--t-label); color: var(--text); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.pv-snack.on { opacity: 1; transform: none; pointer-events: auto; }
.pv-snack b { display: block; font: var(--t-label); }
.pv-snack small { display: block; font: var(--t-caption); color: var(--text-2); }
.pv-snack small:empty { display: none; }
.pv-snack button { flex: none; min-height: 44px; border: 0; background: none; font: var(--t-button); font-weight: 500; color: var(--rose); cursor: pointer; }
@media (min-width: 1024px) { .pv-snack { bottom: var(--space-6); } }
.pv-focus { position: fixed; inset: 0; z-index: 280; background: var(--sky-0); opacity: 0; transition: opacity var(--dur-3) var(--ease-sheet); }
.pv-focus.on { opacity: 1; }
.pv-f-in { height: 100%; max-width: 560px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + var(--space-3)) var(--space-4) var(--space-8); display: flex; flex-direction: column; overflow-y: auto; transform: scale(.94); transition: transform var(--dur-3) var(--ease-sheet); }
.pv-focus.on .pv-f-in { transform: none; }
.pv-f-h { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 48px; }
.pv-f-h b { font: var(--t-head); text-align: center; }
.pv-f-x { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.pv-f-subj { align-self: center; display: flex; align-items: center; gap: var(--space-2); max-width: 100%; height: 40px; margin-top: var(--space-2); padding: 0 var(--space-4); border-radius: var(--r-field); background: var(--surface-2); font: var(--t-label); color: var(--text); white-space: nowrap; overflow: hidden; }
.pv-f-subj span { overflow: hidden; text-overflow: ellipsis; }
.pv-f-b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); margin-top: var(--space-6); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.pv-f-b.enter { opacity: 0; transform: translateY(8px); }
.pv-ring { position: relative; }
.pv-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); }
.pv-time { font: var(--t-timer); color: var(--text); }
.pv-ring-c small { font: var(--t-label); color: var(--text-2); max-width: 70%; text-align: center; }
.pv-f-src { display: flex; align-items: center; gap: var(--space-2); font: var(--t-caption); color: var(--text-2); }
.pv-f-btns { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: auto; }
.pv-f-btns .btn-ghost { color: var(--rose); }
.pv-q { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.pv-qd { display: flex; gap: var(--space-2); }
.pv-qc { font: var(--t-caption); color: var(--text-2); }
.pv-qt { font: var(--t-subtitle); margin: 0 0 var(--space-2); text-align: center; text-wrap: balance; }
.pv-opts { width: 100%; }
.pv-opt { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: opacity var(--dur-2) var(--ease-out); }
.pv-opt:not(:last-child)::after { inset-inline-start: var(--space-4); }
.pv-opt .list-row-main b { white-space: normal; }
.pv-opt.ok { background: var(--moon-wash); }
.pv-opt.ok b { color: var(--moon); }
.pv-opt.no { background: var(--ember-wash); }
.pv-opt.dim { opacity: .55; }
.pv-opt .pt { position: relative; }
.pv-q .btn, .pv-res .btn { width: 100%; max-width: 360px; margin-top: var(--space-2); }
.pv-res { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.pv-res-n { font: var(--t-num-l); color: var(--moon); }
.pv-res > small { font: var(--t-label); color: var(--text-2); }
.pv-res-m { width: 100%; margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--rim); text-align: start; }
.pv-res-l { display: flex; justify-content: space-between; font: var(--t-label); color: var(--text); margin-bottom: var(--space-3); }
.pv-res-m p { margin: var(--space-3) 0 0; font: var(--t-caption); color: var(--text-2); }
.pv-res-m .bar i { transition: transform var(--dur-4) var(--ease-out) var(--dur-2); }
.pv-res-p { margin: var(--space-2) 0 0; font: var(--t-label); color: var(--text-2); }
.pv-entry { padding: var(--space-2) 0 0 !important; min-height: 60px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.pv-entry::after { display: none; }
.stu .pv-entry.list-row > .lead { width: 64px; }
.pv-entry .list-row-main small { display: block; text-overflow: ellipsis; }
.pv-entry .pv-past { stroke-width: 1.4; } .pv-entry .pv-fut { stroke-width: 1.4; stroke-dasharray: 1.5 4; }
@media (min-width: 768px) { .pv-list { max-width: 640px; margin-inline: auto; } .pv-mid { max-width: 340px; } }
@media (min-width: 1024px) {
  .pv-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .pv-hero { position: sticky; top: var(--space-6); }
  .pv-list { max-width: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-p, .pv-p .pt, .pv-mid, .pv-in, .pv-f-in, .pv-f-b, .pv .bar i, .pv-res-m .bar i { transition: opacity var(--dur-1) linear; }
  .pv-mid.leave, .pv-mid.enter, .pv-f-b.enter, .pv-f-in { transform: none; }
  .lighting .pt, .lighting::after { animation: none; }
}
/* css/stu-cards.css */
/* منظّمي — أسطح المذاكرة بشاشة كاملة (design-reference/identity/screens-study.css): المراجعة واختبرني، والإطار المشترك
   لأسطح القراءة (.rd-scr و.rd-h). فوق السماء المعتّمة بلا شريط تنقل. متغيرات نظام التصميم فقط، والحركة transform/opacity. */

/* touch-action: سحب الرجوع (js/gestures.js) يشتغل فوق حاوية التمرير الثابتة (CH-4) */
.rd-scr { position: fixed; inset: 0; z-index: 150; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; padding: calc(env(safe-area-inset-top) + 12px) 16px calc(122px + env(safe-area-inset-bottom)); }
.rd-scr::-webkit-scrollbar { display: none; }
/* مع الصفحة الظاهرة (js/page-motion.js): تختفي مع دخول شاشة القراءة لا قبله، وتبقى مخفية حتى تطلع */
html:has(#app-root:not(.pg-hold) .rd-scr, .pg-ghost .rd-scr) :is(.mobile-nav, .side-nav, .focus-pill) { opacity: 0; visibility: hidden; transition: opacity var(--dur-1) var(--ease-out), visibility 0s linear var(--dur-1); }
@media (prefers-reduced-motion: reduce) { html:has(#app-root:not(.pg-hold) .rd-scr, .pg-ghost .rd-scr) :is(.mobile-nav, .side-nav, .focus-pill) { transition: none; } }
.rd-h { position: relative; display: flex; align-items: center; gap: 6px; height: 52px; margin: -12px -6px 8px; }
.rd-ttl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.rd-ttl b { font: var(--t-inline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-ttl.c { justify-content: center; } .rd-ttl.col { flex-direction: column; align-items: flex-start; gap: 0; }
.rd-ttl small { font: var(--t-caption); color: var(--text-2); }
.apn-keys { margin-top: 10px; font: var(--t-caption); color: var(--text-3); }
.apn-keys b { color: var(--text-2); font-weight: 700; unicode-bidi: isolate; }
.rd-fade { position: fixed; inset-inline: 0; bottom: 0; height: 160px; z-index: 15; pointer-events: none; background: linear-gradient(180deg, transparent, var(--sky-0) 55%); }

/* ===== المراجعة */
.rv-rail { display: none; }
.rv-strip { display: flex; justify-content: center; height: 64px; margin-bottom: 12px; }
.rv-card { height: 460px; display: flex; flex-direction: column; padding: 16px 20px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); cursor: pointer;
  transition: transform calc(var(--dur-3) / 2) var(--ease-out); }
.rv-card.turn { transform: perspective(1200px) rotateY(90deg); }
.rv-top { display: flex; align-items: center; justify-content: space-between; font: var(--t-caption); color: var(--text-2); min-height: 26px; }
.rv-top > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.rv-mid { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.rv-mid p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-q { font: 500 16px/24px var(--font); color: var(--text-2); max-width: 280px; }
.rv-div { width: 40px; height: 1px; background: var(--line); flex: none; }
.rv-a { font: var(--t-subtitle); max-width: 290px; }
.flash-back { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rv-f { padding: 8px 18px; border-radius: var(--r-field); background: var(--surface-2); font: 500 17px/24px var(--font); }
.rv-foot { text-align: center; font: var(--t-caption); color: var(--text-3); }
.rv-bot { position: fixed; bottom: max(34px, env(safe-area-inset-bottom)); inset-inline: 16px; z-index: 22; }
.rv-show { width: 100%; }
.rv-hint { text-align: center; font: var(--t-caption); color: var(--text-3); margin: 0 0 12px; }
.rv-rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rv-rate .btn { height: 56px; padding: 0; flex-direction: column; gap: 0; }
.rv-rate .btn b { font: var(--t-button); } .rv-rate .btn small { font: var(--t-caption); color: var(--text-2); }
.rv-end { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 112px; }
.rv-end h2 { font: var(--t-subtitle); margin: 22px 0 0; }
.rv-end > p { font: var(--t-label); color: var(--text-2); margin: 4px 0 0; }
.rv-npts { display: flex; width: 100%; margin-top: 32px; padding: 18px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); }
.rv-npts > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rv-npts b { font: 500 14px/20px var(--font); } .rv-npts small { font: var(--t-caption); color: var(--text-2); }
.rv-done { position: fixed; bottom: max(34px, env(safe-area-inset-bottom)); inset-inline: 16px; z-index: 22; }
@media (min-width: 1024px) {
  .rv-scr { padding: 0; }
  .rvw { position: absolute; inset: 0; display: grid; grid-template-columns: 300px 1fr; }
  .rv-rail { align-self: stretch; margin: 24px 24px 24px 0; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); }
  .rv-rail .apn-keys { line-height: 24px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
  .rv-cnt { font: var(--t-num-s); }
  .rv-cs { display: flex; flex-direction: column; gap: 8px; } .rv-cs span { display: flex; align-items: center; gap: 8px; font: var(--t-label); }
  .rv-cs small { margin-inline-start: auto; font: var(--t-caption); color: var(--text-2); }
  .rv-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0 24px; }
  .rvw .rd-h { position: absolute; top: 16px; inset-inline: 24px; margin: 0; } .rvw .rd-ttl b { visibility: hidden; }
  .rv-strip { display: none; }
  .rv-col .rv-card { width: 560px; height: 430px; flex: none; }
  .rv-col .rv-bot { position: static; width: 560px; } .rv-col .rv-hint { margin: 20px 0 10px; } .rv-col .rv-show { margin-top: 20px; }
  .rvw.end { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .rvw.end .rv-end { padding-top: 0; width: 540px; } .rvw.end > .btn { position: static; width: 240px; margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .rv-card { transition: none; } }

/* ===== اختبرني */
.qz-pts { flex: 1; display: flex; justify-content: center; gap: 10px; } .qz-pts.many { gap: 4px; }
.qz-pts .pt.lit { outline: 0; }
.qz-n { font: var(--t-label); font-weight: 700; color: var(--text-2); padding-inline-end: 10px; white-space: nowrap; }
.qz-cap { display: flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); margin: 18px 0 8px; }
.qz-q { font: var(--t-head); margin: 0 0 20px; overflow-wrap: anywhere; }
.qz-opts { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); }
.qo { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 16px; background: none; border: 0; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.qo + .qo::before { content: ''; position: absolute; top: 0; inset-inline: 58px 16px; height: 1px; background: var(--line); }
.qo b { flex: 1; min-width: 0; font: 500 17px/24px var(--font); text-align: start; overflow-wrap: anywhere; }
.qo-l { width: 30px; height: 30px; border-radius: var(--r-pill); border: 1.5px solid var(--text-3); display: grid; place-items: center; font: 500 14px/1 var(--font); color: var(--text-2); flex: none; }
.qo-t { font: var(--t-caption); font-weight: 700; }
.qo.ok { background: var(--moon-wash); } .qo.ok .qo-l { border-color: var(--moon); color: var(--moon); }
.qo.bad { background: var(--ember-wash); } .qo.bad .qo-l { border-color: var(--ember); color: var(--ember); }
.qo.ok + .qo::before, .qo.bad + .qo::before { display: none; }
.qo.is-selected .qo-l { border-color: var(--moon); background: var(--moon); color: var(--on-planet); }
.qo:disabled { cursor: default; opacity: 1; color: var(--text); }
.qz-ex { margin-top: 20px; }
.qz-ex b { font: 700 16px/24px var(--font); } .qz-ex p { font: var(--t-body); color: var(--text-2); margin: 4px 0 10px; white-space: pre-wrap; }
.qzw-ex .sp-pg { display: none; }
.qz-next { position: fixed; bottom: max(34px, env(safe-area-inset-bottom)); inset-inline: 16px; z-index: 22; }
.qz-next:disabled { background: var(--surface-3); color: var(--text-3); opacity: 1; }
.qo-timer { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); }
.qo-timer.is-low { color: var(--ember); }
.qo-banner { font: var(--t-caption); color: var(--ember); margin: 0 0 12px; }
.qz-res { margin: 4px 0 16px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); }
.qz-res .n { font: var(--t-num-l); color: var(--moon); display: block; }
.qz-res .l { font: var(--t-caption); color: var(--text-2); display: block; margin: 4px 0 14px; }
.qz-snack { position: fixed; bottom: calc(max(34px, env(safe-area-inset-bottom)) + 60px); inset-inline: 16px; z-index: 23; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 20px 0 12px; border-radius: var(--r-pill); background: var(--surface-2); font: var(--t-label); }
.qz-snack span { flex: 1; } .qz-snack button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.qz-bot { position: fixed; bottom: max(34px, env(safe-area-inset-bottom)); inset-inline: 16px; z-index: 22; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qz-bot .btn, .qz-next { height: 48px; }
.qo-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font: var(--t-caption); color: var(--text-2); margin: 4px 0 16px; }
.qz-rq { margin-top: 28px; }
.qz-rq-h { display: flex; align-items: center; gap: 8px; font: var(--t-caption); color: var(--text-2); margin-bottom: 8px; }
.qz-rq-h .pchip { margin-inline-start: auto; }
.qz-rq .qz-q { font: 500 16px/24px var(--font); margin-bottom: 12px; }
.qz-why { font: var(--t-body); color: var(--text-2); margin: 10px 0 0; white-space: pre-wrap; } .qz-none { font: var(--t-caption); margin: 8px 0 0; }
/* أنواع الأسئلة و«حسب الفصل» و«على نمط اختبار سابق» (design-reference/quiz-study) */
.qz-kind { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: var(--t-caption); margin-inline-start: auto; }
.qz-kind + .qo-timer { margin-inline-start: 6px; }
/* عنوان قسم ورقة الاختبار (نمط اختبارات المادة): سطر هادئ فوق السؤال بخط فاصل، والدرجة بلون القمر */
.qz-paper { display: flex; align-items: baseline; gap: 12px; margin: 2px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.qz-paper-t { flex: 1; min-width: 0; font: var(--t-label); color: var(--text-2); overflow-wrap: anywhere; }
.qz-paper-m { flex: none; font: var(--t-caption); color: var(--moon); }
.qz-rev .qz-paper { margin-top: 28px; }
.qz-rev .qz-paper + .qz-rq { margin-top: 0; }
.qz-steps { margin: 6px 0 10px; padding: 0; list-style: none; counter-reset: s; }
.qz-steps li { position: relative; padding-inline-start: 30px; margin: 8px 0; font: var(--t-body); color: var(--text-2); counter-increment: s; overflow-wrap: anywhere; }
.qz-steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 0; width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); display: grid; place-items: center; font: var(--t-caption); font-weight: 700; }
.qz-short:placeholder-shown { direction: rtl; } /* ST-9 */
.qz-short { display: block; width: 100%; min-height: 120px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); color: var(--text); font: var(--t-body); resize: none; }
.qz-model { margin-top: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); }
.qz-model b { font: 700 16px/24px var(--font); display: block; margin-bottom: 4px; }
.qz-model p { font: var(--t-body); color: var(--text-2); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.qz-model-pg { margin-top: 8px; }
.qz-self { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .qz-self .btn { height: 48px; }
.qz-sec { font: var(--t-caption); color: var(--text-2); margin: 20px 4px 8px; }
.qz-ch .qz-ch-n { font: var(--t-label); font-weight: 700; white-space: nowrap; }
.qz-past-note { font: var(--t-caption); color: var(--text-2); margin: 10px 4px 0; }
.sheet-body.qz-swap > * { opacity: 0; }
.sheet-body.qz-sw > * { transition: opacity var(--dur-1) var(--ease-out); }
.qo-past-slot.qz-swap > * { opacity: 0; }
.qo-past-slot.qz-sw > * { transition: opacity var(--dur-1) var(--ease-out); }
/* «على نمط دكتورك» (js/exam-style.js، الشكل المعتمد design-reference/exam-style-pick) */
.esp-step { gap: 12px; }
.esp-k { flex: none; color: var(--text-2); font: var(--t-body); }
.esp-v { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; text-align: end; }
.esp-v b { font: 600 1rem/1.5rem var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esp-v small { font: var(--t-caption); color: var(--text-2); }
.esp-need .esp-v b { color: var(--accent-primary); }
.esp-ready .esp-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--accent-primary); flex: none; }
.esp-bar { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 -6px 4px; }
.esp-bar b { font: 700 1.125rem/1.75rem var(--font); }
.esp-back { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--text); border-radius: var(--r-pill); cursor: pointer; }
.esp-back:active { background: var(--surface-2); }
.esp-search { margin: 4px 0 0; }
.esp-top { margin-top: 16px; }
.esp-soon { flex: none; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: var(--t-caption); }
.esp-alt { display: block; width: 100%; min-height: 44px; margin-top: 4px; border: 0; background: none; color: var(--accent-primary); font: 600 var(--fs-small)/1.5 var(--font); cursor: pointer; }
.esp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 12px 20px; }
.esp-empty-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); margin-bottom: 4px; }
.esp-empty b { font: 700 1.125rem/1.75rem var(--font); }
.esp-empty p { margin: 0; font: var(--t-body); color: var(--text-2); max-width: 30ch; }
.sheet-primary[disabled] { opacity: .45; }
.qz-sec.esp-sec { margin: 4px 4px -6px; }
.esp-list .qz-sec.esp-sec { margin: 16px 4px 8px; }
.esp-list .sheet-group + .qz-sec.esp-sec { margin-top: 20px; }
.esp-ready { gap: 12px; }
.esp-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-2); color: var(--accent-primary); }
.esp-stats { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; }
.esp-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); text-align: center; }
.esp-stat b { font: 700 1.625rem/2rem var(--font); color: var(--text); }
.esp-stat span { font: var(--t-caption); color: var(--text-2); }
@media (min-width: 1024px) {
  .qz-scr { padding: 0; }
  .qzw { position: absolute; inset: 0; padding: 16px 32px 40px; display: flex; flex-direction: column; }
  .qzw > .rd-h { margin: 0 0 24px; }
  .qzw-cols { flex: 1; display: grid; grid-template-columns: 560px; gap: 48px; justify-content: center; align-content: center; align-items: start; }
  .qzw-cols.two { grid-template-columns: 560px 520px; }
  .qz-next { position: static; width: 100%; margin-top: 20px; }
  .qzw-ex { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); }
  .qzw-ex .qz-ex { margin-top: 0; }
  .qzw-ex .sp-pg { display: flex; justify-content: center; height: 420px; overflow: hidden; margin: 12px -24px -20px; padding-top: 16px; border-top: 1px solid var(--line); border-radius: initial; border-end-start-radius: var(--r-panel); border-end-end-radius: var(--r-panel); }
  .qz-pg { width: 297px; height: max-content; border-radius: initial; }
  .qz-end .qzw, .qz-rev .qzw { overflow-y: auto; }
  .qz-end .qz-main, .qz-rev .qz-main { width: 560px; margin-inline: auto; padding-bottom: 140px; }
  .qz-snack, .qz-bot { inset-inline: calc(50% - 280px); bottom: 40px; } .qz-snack { bottom: 100px; }
}

/* «وش يجي في اختبارك» (js/exam-card.js، اعتمده المالك 1 نوفمبر، design-reference/exam-map-card) */
.emc { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.emc-h { display: flex; flex-direction: column; gap: 2px; }
.emc-h h3 { margin: 0; font: var(--t-head); color: var(--text); }
.emc-h small { font: var(--t-caption); color: var(--text-2); }
.emc-h small.emc-cap { color: var(--rose); }
.emc-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.emc-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.emc-row .grow { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.emc-row b { font: var(--t-label); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emc-row small { font: var(--t-micro); color: var(--text-3); }
.emc-row .emc-weak { color: var(--ember); }
.emc-n { font: var(--t-num-s); color: var(--text); white-space: nowrap; }
.emc-row.is-weak .emc-n { color: var(--ember); }
.emc-n small { font: var(--t-micro); color: var(--text-3); }
.emc-trap { font: var(--t-caption); color: var(--text-2); }
.emc-trap b { color: var(--text); }
.emc-acts { display: flex; gap: 10px; }
.emc-acts .btn { flex: 1; }
.emc-foot { font: var(--t-micro); color: var(--text-3); text-align: center; }
.emc-sheet .emc { padding: 0; background: none; border: 0; box-shadow: none; }
.cz .emc { margin-bottom: 14px; }
/* css/dose.css */
/* منظّمي — «جرعة» (#/dose، js/dose.js، النموذج design-reference/focus-ideas): نفس بطاقة المراجعة (stu-cards.css) بشريط تقدّم
   وبطاقة تطل من تحت. متغيرات نظام التصميم فقط، والحركة transform/opacity. */
.ds-col { max-width: 560px; margin: 0 auto; }
.ds-prog { flex: 1; display: flex; justify-content: center; padding: 0 8px; }
.ds-track { width: 100%; max-width: 220px; height: 3px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.ds-track i { display: block; height: 100%; background: var(--moon); transform-origin: right; transition: transform var(--dur-2) var(--ease-out); }
.ds-stage { position: relative; }
.ds-card { position: relative; z-index: 2; height: min(520px, calc(100dvh - 300px)); min-height: 360px;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.ds-card.in { opacity: 0; transform: translateY(24px); transition: none; }
.ds-card.out { opacity: 0; transform: translateY(-48px); }
.ds-card.turn { transform: perspective(1200px) rotateY(90deg); transition: transform calc(var(--dur-3) / 2) var(--ease-out); }
.ds-kind { display: inline-flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); }
.ds-peek { position: relative; height: 20px; }
.ds-peek i { position: absolute; inset-inline: 14px; top: -14px; height: 26px; border-end-start-radius: var(--r-panel); border-end-end-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line); border-top: 0; opacity: .7; }
.ds-peek i + i { inset-inline: 28px; top: -2px; opacity: .4; }
.ds-qm { gap: 22px; }
.ds-qq { font: var(--t-subtitle); max-width: 300px; }
.ds-opts { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; }
.ds-o { min-height: 52px; padding: 8px 14px; border: 0; border-radius: var(--r-field); background: var(--surface-2); color: var(--text); display: flex; align-items: center; justify-content: center; gap: 8px; font: var(--t-button); font-weight: 500; cursor: pointer; transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.ds-o:active { transform: scale(.98); }
.ds-o:disabled { cursor: default; }
.ds-o.ok { outline: 1.5px solid var(--moon); outline-offset: -1.5px; }
.ds-o.no { opacity: .55; }
.ds-im { gap: 16px; }
.ds-it { margin: 0; font: var(--t-subtitle); }
.ds-ip { font: var(--t-read); color: var(--text-2); max-width: 300px; }
.ds-bot { position: fixed; bottom: max(34px, env(safe-area-inset-bottom)); inset-inline: 16px; z-index: 22; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; }
.ds-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ds-swipe { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: var(--t-caption); color: var(--text-3); }
.ds-next { min-height: 44px; padding: 0 var(--space-3); border: 0; background: none; cursor: pointer; }
.ds-end { padding-top: 76px; }
.ds-end h2 { margin-top: 18px; }
.ds-sum { width: 100%; margin-top: 28px; text-align: start; }
.ds-sum .list-row-main { display: flex; flex-direction: column; gap: 2px; }
.ds-bot2 { position: fixed; bottom: max(30px, env(safe-area-inset-bottom)); inset-inline: 16px; z-index: 22; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 560px; margin: 0 auto; }
.ds-bot2 .btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .ds-card, .ds-track i, .ds-o { transition: none; } }
/* css/stu-summary.css */
/* منظّمي — قراءة الملخص (js/study-summary.js، الشكل المعتمد design-reference/identity screens-study.css §8.6).
   مستند واحد بخيط القمر (نموذج summary-flow المعتمد f051010)؛ متغيرات نظام التصميم فقط، والحركة transform/opacity. */

/* ===== الجوال: شريط ثابت فوق وتبويبات الفصول */
.rd-scr.sum-scr { padding-top: calc(env(safe-area-inset-top) + 116px); padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.sum-bar { position: fixed; top: 0; inset-inline: 0; z-index: 22; padding: env(safe-area-inset-top) 16px 8px; background: var(--sky-0); }
.sum-bar .rd-h { margin: 0 -6px 4px; }
.sum-bar .tab-bar { margin: 0; }
.sum-tt { display: flex; flex-direction: column; min-width: 0; }
.pl-s, .pl-l { display: flex; flex: none; }
.sum-tt small, .pl-l, .sum-xp, .sum-ol, .sum-rail, .sumw .sp { display: none; }
.sum-t { font: var(--t-subtitle); margin: 0; }
.sum-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: var(--t-caption); color: var(--text-2); margin: 4px 0 18px; }
.from-ai { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.from-ai .meteor { color: var(--text-2); }
.sum-end { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 22px; }
.sum-end .sum-cards { width: 100%; }
/* «فادك الملخص؟» آخر الفصل بعد «الفصل التالي» (js/measure.js، النموذج المعتمد 17 أكتوبر) */
.fb-end { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; padding: var(--space-2) var(--space-4); border-radius: var(--r-dock); background: var(--surface); color: var(--text-2); }
/* سطر الملخص عريض: «شكراً لك» في مكانها قبل الإبهامين كما في النموذج */
.fb-end .fb-thanks { position: static; width: auto; padding-inline: 6px; }
.sum-none { font: var(--t-body); color: var(--text-2); }
.quizfab { position: fixed; bottom: calc(max(34px, env(safe-area-inset-bottom)) + 16px); left: 50%; transform: translateX(-50%); z-index: 22; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.quizfab.hide { opacity: 0; transform: translate(-50%, 24px); pointer-events: none; }
.quizfab.btn:active:not(:disabled) { transform: translateX(-50%) scale(var(--press-scale)); } /* ضغطة .btn كانت تمسح توسيطه فيهرب من تحت الإصبع وما تنحسب الضغطة */
.sum-fade { z-index: 21; }
/* التنبيه («نجهّز ملف PDF…») فوق زر «اختبرني» لا تحته، في الجوال والآيباد حيث الزر ثابت أسفل الشاشة */
@media (max-width: 1023px) { body:has(#sum-quiz:not(.hide)) .toast-container { inset-block: auto calc(max(34px, env(safe-area-inset-bottom)) + 16px + 48px + var(--space-3)); } }

/* ===== مستند واحد بلا بطاقات، وخيط القمر يتعبّى مع النزول (design-reference/summary-flow، sumThread) */
.sum-blks { position: relative; padding-inline-start: 28px; }
.sf-thread { position: absolute; inset-inline-start: 5px; width: 2px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; pointer-events: none; }
.sf-thread > i { position: absolute; inset: 0; background: var(--moon); transform: scaleY(0); transform-origin: top; }
.sblk { position: relative; margin: 0 0 40px; scroll-margin-top: calc(env(safe-area-inset-top) + 132px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.sblk.sf-wait { opacity: 0; transform: translateY(12px); }
.sblk::before, .sblk::after { content: ''; position: absolute; z-index: 1; inset-inline-start: -28px; top: 8px; width: 12px; height: 12px; box-sizing: border-box; border-radius: var(--r-pill); }
.sblk::before { background: var(--sky-0); border: 1.5px solid var(--text-3); }
.sblk::after, .sf-h > span::after { opacity: 0; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.sblk::after { background: var(--moon); transform: scale(0.4); }
.sblk:is(.is-on, .is-read)::after { opacity: 1; transform: none; }
.sb-l { display: block; font: var(--t-caption); color: var(--text-3); margin-bottom: 6px; }
.sblk > .sf-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font: var(--t-head); color: var(--text); }
.sf-h > span { position: relative; } .sf-h .sf-tx { flex: 1; min-width: 0; }
.sf-h .sf-n, .sf-map .sf-n { flex: none; min-width: 1ch; color: var(--text-3); font-feature-settings: "tnum"; }
.sf-h > span::after { content: attr(data-t); position: absolute; inset: 0; color: var(--moon); }
.sblk:is(.is-on, .is-read) > .sf-h > span::after { opacity: 1; }
.sblk.sf-lede { margin-bottom: 28px; }
.sblk.sf-lede::before, .sblk.sf-lede::after { top: 3px; }
.sf-map { margin: 0 0 40px; }
.sf-map .sf-cap { display: block; font: var(--t-caption); color: var(--text-3); margin-bottom: 10px; }
.sf-map ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sf-map li, .sf-map .chip { min-width: 0; max-width: 100%; }
.sf-map .chip { flex: 0 1 auto; transition: transform var(--dur-1) var(--ease-out); }
.sf-map .chip:active { transform: scale(var(--press-scale)); }
.sf-map .sf-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-part { display: flex; align-items: center; gap: 12px; margin: 4px 0 28px; font: var(--t-label); color: var(--text-2); }
.sf-part::after { content: ''; flex: 1; height: 1px; background: var(--line); }
@media (prefers-reduced-motion: reduce) { .sblk, .sblk::after, .sf-h > span::after { transition: none; } .sblk.sf-wait { opacity: 1; transform: none; } }
.sblk .srcchips { margin: 14px 0 0; }
.sblk .sb, .sblk .sm-sec { --tone: var(--text-2); --tone-bg: var(--surface-2); display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.sblk .sb-box, .sblk .sb-terms { border: 0; background: none; box-shadow: none; }
.sblk .sb-box:not(.sb-f) { padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-field); }
/* الفكرة باختصار */
.sf-lede .sb-co, .sf-lede .sb-co.is-big { display: block; padding: 0; background: none; border: 0; font: var(--t-read); font-weight: 500; color: var(--text); }
.sf-lede .sb-co > svg { display: none; }
.sblk:not(.sf-lede) .sb-co { padding: 14px 16px; border-radius: var(--r-field); font: var(--t-body); }
/* مصطلحات */
.sblk .sb-terms > div { display: block; padding: 10px 0; font: var(--t-body); }
.sblk .sb-terms > div + div { border-top: 1px solid var(--line); }
.sblk .sb-terms b { display: block; font: 700 16px/24px var(--font); }
.sblk .sb-terms span { display: block; color: var(--text-2); }
/* القانون */
.sblk .sb-f { display: block; padding: 0; border-radius: initial; }
.sblk .sb-eq { margin: 6px 0; padding: 12px 16px; border-radius: var(--r-field); background: var(--surface-2); font: 500 17px/24px var(--font); font-feature-settings: "tnum"; text-align: center; }
.sblk .sb-eq span { padding: 0; border: 0; }
.sblk .sb-f > p { font: var(--t-body); color: var(--text-2); margin-top: 10px; }
.sblk .sb-legend { border-color: var(--line); color: var(--text-2); }
/* السلسلة */
.sblk .sb-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 2px; padding-top: 4px; }
.sblk .sb-st { padding: 8px 12px; border: 0; border-radius: var(--r-field); background: var(--surface-2); font: var(--t-label); }
.sblk .sb-st small { font-weight: 400; color: var(--text-2); }
.sblk .sb-arr { display: grid; color: var(--text-3); }
.sblk .sb-chain.is-long { flex-direction: column; align-items: stretch; gap: 2px; }
.sblk .sb-chain.is-long .sb-arr { align-self: center; transform: rotate(-90deg); }
/* عناصر المجموعة قد تطول سطرين وأكثر: مستطيل بحواف الحقول لا كبسولة تصير فقاعة */
.sblk .sb-cls span { border-radius: var(--r-field); }
/* الخطوات */
.sblk .sb-steps li { align-items: flex-start; gap: 12px; padding-bottom: 14px; font: var(--t-body); }
.sblk .sb-steps li:last-child { padding-bottom: 0; }
.sblk .sb-n { position: relative; z-index: 1; width: 28px; height: 28px; border: 1.5px solid var(--text-2); background: var(--sky-0); color: var(--text); font: 700 13px/1 var(--font); }
.sblk .sb-steps li:not(:last-child)::after { inset-inline-start: 13.25px; top: 28px; bottom: 0; width: 1.5px; background: color-mix(in srgb, var(--text-3) 55%, transparent); }
.sblk .sb-steps b { margin-top: 0; padding-top: 1px; }
.sblk .sb-steps b:only-child { font-weight: 400; }
/* خط زمني قصير: أفقي (السنة، النقطة، الاسم، الوصف) */
.sblk .sb-tl { --tone: var(--text-2); }
.sblk .sb-tl:not(:has(> div:nth-child(5))) { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 4px 0 0; }
.sblk .sb-tl:not(:has(> div:nth-child(5)))::before { inset-inline: 16%; inset-inline-start: 16%; top: 33px; bottom: auto; width: auto; height: 1.5px; background: color-mix(in srgb, var(--text-3) 55%, transparent); }
.sblk .sb-tl:not(:has(> div:nth-child(5))) > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; text-align: center; }
.sblk .sb-tl:not(:has(> div:nth-child(5))) > div::before { position: relative; order: 1; inset: auto; z-index: 1; width: 12px; height: 12px; border: 1.5px solid var(--text-2); background: var(--sky-0); }
.sblk .sb-tl:not(:has(> div:nth-child(5))) em { font: 700 15px/20px var(--font); color: var(--text); }
.sblk .sb-tl:not(:has(> div:nth-child(5))) p { order: 2; color: var(--text); font: 500 14px/20px var(--font); }
.sblk .sb-tl p > span { display: block; } .sblk .sb-tl p > small { display: block; margin-top: 4px; font: var(--t-caption); color: var(--text-2); }
.sblk .sb-tl:has(> div:nth-child(5)) em { color: var(--text); }
/* مقارنة */
.sblk .sb-pc { gap: 8px; }
.sblk .sb-pc > div, .sblk .sb-pc .is-x, .sblk .sb-pc .is-y { padding: 12px 14px; border-radius: var(--r-field); background: var(--surface-2); }
.sblk .sb-pc b, .sblk .sb-pc .is-x b, .sblk .sb-pc .is-y b { display: block; margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); font: 700 15px/22px var(--font); color: var(--text); }
.sblk .sb-pc b svg { display: none; }
.sblk .sb-pc ul { list-style: none; padding: 0; margin: 0; }
.sblk .sb-pc li { font: var(--t-label); color: var(--text-2); margin-top: 8px; }

.sblk .sb--prose .sb-box { padding: 0; background: none; font: var(--t-read); }
.sblk .sb-scale li::before { background: var(--sky-0); }
.sblk .sb-terms b small { display: inline; margin: 0 8px; font: var(--t-caption); color: var(--text-3); }

/* ===== الآيباد بالطول: نفس الجوال بعمود 720 وزر «المحتوى» */
@media (min-width: 700px) and (max-width: 1023px) {
  .sum-bar { padding: calc(env(safe-area-inset-top) + 12px) calc(50% - 366px) 8px; }
  .rd-scr.sum-scr { padding-top: calc(env(safe-area-inset-top) + 124px); }
  .sum-scr .sum-colw { max-width: 720px; margin-inline: auto; }
  .sum-ol { display: grid; }
}
.sum-olsheet .sum-rail { display: block; }

/* ===== الواسعة: الفهرس يمين، والعمود بالوسط، ومعاينة الصفحة يسار (1280 فأكثر) */
@media (min-width: 1024px) {
  .rd-scr.sum-scr { padding: 0; overflow: hidden; }
  .sumw { position: absolute; inset: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 76px minmax(0, 1fr); gap: 0 28px; padding: 0 24px 24px; }
  .sum-bar { position: static; grid-column: 1 / -1; padding: 0; background: none; }
  .sum-bar .rd-h { height: 76px; margin: 0; gap: 10px; }
  .sum-bar .tab-bar, .pl-s { display: none; }
  .pl-l, .sum-xp { display: flex; }
  .sum-tt small { display: block; }
  .sum-rail { display: block; align-self: start; max-height: 100%; overflow-y: auto; scrollbar-width: none; padding: 14px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); }
  .sum-colw { position: relative; min-height: 0; width: 100%; max-width: 720px; justify-self: center; }
  .sum-col { height: 100%; overflow-y: auto; scrollbar-width: none; padding-bottom: 80px; }
  .sum-col::-webkit-scrollbar { display: none; }
  .sum-col .sum-t { font: var(--t-title); }
  .sum-colw .rd-fade { position: absolute; height: 140px; background: linear-gradient(180deg, transparent, var(--sky-0) 60%); }
  .sum-colw .quizfab { position: absolute; bottom: 8px; }
  .sf-map { display: none; }
  .sum-blks { padding-inline-start: 36px; }
  .sblk { scroll-margin-top: 16px; }
  .sblk::before, .sblk::after { inset-inline-start: -36px; }
}
@media (min-width: 1280px) {
  .sumw { grid-template-columns: 240px minmax(0, 1fr); }
  .sumw.has-sp { grid-template-columns: 240px minmax(0, 1fr) 400px; }
  .sumw.has-sp .sp:not([hidden]) { display: flex; }
}
.so-ch { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-radius: var(--r-field); background: none; color: var(--text); text-align: start; cursor: pointer; }
.so-ch > span:last-child { min-width: 0; }
.so-ch b { display: block; font: 700 15px/20px var(--font); }
.so-ch small { display: block; font: var(--t-caption); line-height: 23px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-ch.on { background: var(--surface-2); }
.so-sub { display: flex; flex-direction: column; padding: 6px 0 8px; margin-inline-start: 13px; border-inline-start: 1.5px solid var(--line); }
.so-sub button { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; border: 0; background: none; font: var(--t-label); color: var(--text-2); text-align: start; cursor: pointer; }
.so-sub button.on { color: var(--text); font-weight: 700; }
.so-cap { font: var(--t-caption); color: var(--text-3); padding: 12px 8px 4px; border-top: 1px solid var(--line); margin-top: 8px; }

/* معاينة الصفحة */
:is(.sumw, .tuw) .sp { flex-direction: column; min-height: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); }
:is(.sumw, .tuw) .sp-h { display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 8px; border-bottom: 1px solid var(--line); }
:is(.sumw, .tuw) .sp-h b { font: var(--t-head); } :is(.sumw, .tuw) .sp-h .t2 { flex: 1; min-width: 0; font: var(--t-caption); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.sumw, .tuw) .sp-pg { flex: 1; min-height: 0; overflow: hidden; display: flex; justify-content: center; padding: 16px 0 0; }
:is(.sumw, .tuw) .sp-pg .mini { width: calc(100% - 48px); align-self: stretch; border-end-start-radius: 0; border-end-end-radius: 0; } /* الصفحة تكمل لتحت وتنقص مثل النموذج */
:is(.sumw, .tuw) .sp-f { border-top: 1px solid var(--line); padding: 4px 8px; display: flex; justify-content: flex-start; }

/* ===== صدّر الملخص PDF: معاينة الأوراق فوق السماء (الأوراق نفسها في css/pdf-export.css) */
.rd-scr.exw { z-index: 160; padding: 0 32px 32px; outline: none; }
.sum-scr.is-under { visibility: hidden; }
.exw-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; height: 76px; margin: 0 -6px; }
.exw-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; padding-top: 4px; }
@media (max-width: 699px) { .rd-scr.exw { padding: 0 16px 32px; } .exw-h { height: 64px; margin: 0 -16px; padding: 0 10px; background: var(--sky-0); } .exw-pages { gap: 16px; } }
/* «اسأل» آخر صف الصفحات تحت الكتلة (design-reference/ask-teacher-topic، اعتمده المالك 22 أكتوبر) */
.pchip.ask-t { color: var(--text); background: var(--surface-3); }
/* css/stu-mindmap.css */
/* منظّمي — الخريطة الذهنية (js/study-mindmap.js، الشكل المعتمد design-reference/identity screens-study.css «الخريطة الذهنية»).
   عقد محايدة وروابط مستقيمة بزوايا، والجذر بحد بحبر المادة (--ci). متغيرات نظام التصميم فقط، والحركة transform/opacity. */

.rd-scr.mm-scr { overflow: hidden; }
.mm-scr .rd-h { margin-bottom: 0; }
.mm-ai { display: none; }
.mm { position: relative; margin: 18px -16px 0; overflow: hidden; touch-action: none; }
.mm-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.mm-world.is-smooth { transition: transform var(--dur-2) var(--ease-out); }
.mm-l { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.mm-l path { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linejoin: round; }
.mm-n { position: absolute; display: grid; place-items: center; padding: 0 8px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-field); font: 500 13px/18px var(--font); color: var(--text); }
.mm-n > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
button.mm-n { cursor: pointer; }
button.mm-n:active { transform: scale(0.97); }
.mm-n.br { font-weight: 700; background: var(--surface-2); }
.mm-n.root { border: 1.5px solid color-mix(in srgb, var(--ci) 80%, transparent); font: 700 17px/24px var(--font); }
.mm-n.sel { --mm-ring: 0 0 0 1px var(--text); border-color: var(--text); box-shadow: var(--mm-ring); background: var(--surface-3); font-weight: 700; }
.mm-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font: var(--t-caption); color: var(--text-2); }
.mm-cap .t3 { flex: none; }

/* الفكرة المختارة: لوح من تحت يطلع ويرجع بحركة */
.mm-peek { position: fixed; inset-inline: 0; bottom: 0; z-index: 22; padding: 10px 20px max(34px, env(safe-area-inset-bottom)); background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-top: 1px solid var(--line); box-shadow: var(--shadow-float), var(--rim);
  transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.mm-peek.on { transform: none; opacity: 1; pointer-events: auto; }
.mm-peek .grab { position: relative; display: block; width: 72px; height: 20px; margin: -6px auto 0; padding: 0; border: 0; background: none; }
.mm-peek .grab::before { content: ''; position: absolute; top: 6px; left: 18px; right: 18px; height: 4px; border-radius: var(--r-pill); background: var(--line); }
.mp-h { display: flex; flex-direction: column; } .mp-h .t3 { font: var(--t-caption); } .mp-h b { font: var(--t-head); }
.mp-p { font: var(--t-body); color: var(--text-2); margin: 6px 0 10px; }
.mm-peek .sb-f { margin: 6px 0; padding: 12px 16px; border-radius: var(--r-field); background: var(--surface-2); font: 500 15px/24px var(--font); font-feature-settings: "tnum"; text-align: center; }
.mm-peek .srcchips { margin: 12px 0 0; }
.mp-act { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.mp-act .btn-sm { height: 40px; gap: 8px; padding: 0 16px; }
.mp-act .btn-ghost { height: 44px; padding: 0 8px; font-weight: 500; }
.mm-zoom { display: none; }

/* ===== الحاسب: الشجرة من اليمين، والفكرة فوق يسار، والتكبير تحت يمين */
@media (min-width: 1024px) {
  .rd-scr.mm-scr { padding: 0; }
  .mmw { position: absolute; inset: 0; }
  .mmw > .rd-h { position: absolute; top: 16px; right: 24px; left: 368px; margin: 0; z-index: 3; }
  .mm-ai { display: flex; margin-inline-end: 2px; }
  .mm { position: absolute; top: 0; left: 352px; right: 0; bottom: 0; margin: 0; height: auto; }
  .mm-n { font: 500 15px/20px var(--font); }
  .mm-n.br { font-weight: 700; }
  .mm-n.sel { font-weight: 700; }
  .mm-n.root { font: 700 19px/26px var(--font); }
  .mm-cap { display: none; }
  .mm-peek { position: absolute; inset-inline: auto; top: 24px; left: 24px; bottom: auto; width: 320px; z-index: 3; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); transform: translateY(-8px); }
  .mm-peek.on { transform: none; }
  .mm-peek .grab { display: none; }
  .mm-peek .mp-act { flex-direction: column; align-items: flex-start; margin-top: 18px; }
  .mm-zoom { position: absolute; bottom: 24px; right: 24px; z-index: 3; display: flex; align-items: center; height: 40px; padding: 0 4px; border-radius: var(--r-pill); background: var(--surface-2); font: var(--t-caption); color: var(--text-2); }
  .mm-zoom button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-pill); background: none; font: 500 18px/1 var(--font); color: var(--text); cursor: pointer; }
}
/* css/stu-tutor.css */
/* منظّمي — «أستاذ المادة» (js/course-tutor.js وjs/tutor-chats.js)، الشكل المعتمد design-reference/identity screens-study.css «أستاذ المادة»:
   بسيط مثل ChatGPT فوق «سماء واحدة». الجوال عمود: ترويسة، «يقرأ من N ملفات»، المحادثة تتمرر، ومربع الكتابة حبة تحت؛
   «محادثاتك» لوح من تحت. الحاسب (1024+): المحادثات عمود، والمحادثة بالوسط، ومعاينة الصفحة يسار. متغيرات التصميم فقط. */

.ct-screen { position: fixed; inset: 0; top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100%); z-index: 150; overflow: hidden; }
html:has(#app-root:not(.pg-hold) .ct-screen, .pg-ghost .ct-screen) :is(.mobile-nav, .side-nav, .focus-pill) { opacity: 0; visibility: hidden; transition: opacity var(--dur-1) var(--ease-out), visibility 0s linear var(--dur-1); }
@media (prefers-reduced-motion: reduce) { html:has(#app-root:not(.pg-hold) .ct-screen, .pg-ghost .ct-screen) :is(.mobile-nav, .side-nav, .focus-pill) { transition: none; } }
.tuw { height: 100%; }
.tu-col { position: relative; display: flex; flex-direction: column; height: 100%; padding: calc(env(safe-area-inset-top) + 12px) 16px 0; }
.tu-h { position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 56px; margin: -12px -6px 8px; }
.tu-h .streak { position: absolute; bottom: -2px; right: 30%; width: 40px; height: 2px; border-radius: var(--r-pill); background: linear-gradient(to left, var(--text), transparent); }
.tu-tt { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); text-align: start; cursor: pointer; } .tu-tt b { display: block; font: 700 17px/26px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tu-tt small { display: block; font: var(--t-caption); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tu-src, .stu .tu-src { flex: none; align-self: flex-start; margin-bottom: 24px; color: var(--text-2); }
.tu-src .ic { color: var(--text-3); }
.ct-grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 52px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, currentColor 12px); mask-image: linear-gradient(to bottom, transparent, currentColor 12px); }
.ct-main { display: flex; flex-direction: column; min-height: 100%; }

/* المحادثة: سؤالك فقاعة، والجواب نص كامل العرض وتحته شرائح الصفحات */
.tu-chat { padding-bottom: 16px; }
.ct-me { display: flex; }
.bub-me { width: fit-content; max-width: 80%; margin: 0 auto 20px 0; padding: 10px 14px; border-radius: var(--r-field); background: var(--surface-2); font: var(--t-body); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.tu-ans { margin-bottom: 22px; }
.ans { font: var(--t-read); color: var(--text); overflow-wrap: anywhere; }
.ans p { margin: 0 0 8px; } .ans p:last-child { margin-bottom: 0; } .ans b, .ans strong { font-weight: 700; }
.ans ul, .ans ol { margin: 0 0 10px; padding-inline-start: 22px; } .ans li { margin-bottom: 6px; } .ans li::marker { color: var(--text-3); }
.ans h3, .ans h4, .ans h5 { margin: 12px 0 6px; font: var(--t-head); }
.ans .sb-f { margin: 10px 0; padding: 12px 16px; border-radius: var(--r-field); background: var(--surface-2); font: 500 16px/24px var(--font); font-feature-settings: "tnum"; text-align: center; overflow-x: auto; }
.ans .pchip { vertical-align: 1px; }
.tu-ans .srcchips { margin: 12px 0 0; }
.ans-acts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; margin-inline-start: -10px; }
/* الأزرار الثلاثة بعرضها الطبيعي في سطر واحد دائماً؛ ما لا يتسع (الإبهامان على 360) ينزل سطراً */
.ans-acts .ct-act { flex: none; }
.ans-acts button { height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: none; font: var(--t-caption); color: var(--text-2); cursor: pointer; }
.ans-acts .ic { color: var(--text-3); }
.ans-acts .is-on, .ans-acts .is-on .ic { color: var(--text); }
.tu-ans:not(.is-last):not(.acts-on) .ans-acts { display: none; }
.tu-think { display: flex; align-items: center; gap: 8px; font: var(--t-label); color: var(--text-2); margin: 4px 0 14px; }
.aibar i { display: block; height: 10px; border-radius: var(--r-pill); background: var(--surface-2); margin-bottom: 12px; }
.aibar i:nth-child(1) { width: 92%; } .aibar i:nth-child(2) { width: 76%; } .aibar i:nth-child(3) { width: 48%; }
.ct-out { display: flex; gap: 10px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--r-field); font: var(--t-body); color: var(--text-2); }
.ct-out .ic { flex: none; margin-top: 4px; color: var(--text-3); }
.ct-up { margin-top: 12px; }
.ct-out:has(+ :not(.ct-up)) { margin-bottom: var(--space-3); } /* الشرح العام بعد سطر «خارج الملفات» */
.ct-sugg { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; }

/* الدرس وسؤال التأكد */
.ct-steps { display: flex; gap: 4px; }
.ct-steps span { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--surface-3); }
.ct-steps .done { background: var(--text); } .ct-steps .now { background: var(--text-2); }
.ct-steps-cap { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 16px; font: var(--t-caption); color: var(--text-3); }
.ct-steps-cap span:first-child { font-weight: 700; color: var(--text-2); } .ct-steps-cap b { color: var(--text); }
.ct-check { margin-top: 16px; padding-inline-start: 14px; border-inline-start: 2px solid var(--line); }
.ct-check-h { margin-bottom: 6px; font: var(--t-caption); color: var(--text-3); }
.ct-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ct-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font: var(--t-label); cursor: pointer; }
.ct-opt.is-right { border-color: var(--moon); color: var(--moon); font-weight: 700; }
.ct-opt.is-wrong { border-color: var(--ember); color: var(--ember); text-decoration: line-through; }
.ct-opt:disabled { cursor: default; }
.ct-feedback { margin-top: 8px; font: var(--t-body); color: var(--moon); } .ct-feedback.is-wrong { color: var(--text-2); }

/* البداية */
.tu-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; padding: 95px 24px 140px; text-align: center; }
.tu-empty .meteor { color: var(--text-2); } .tu-empty p { margin: 0; font: var(--t-read); color: var(--text-2); text-wrap: balance; }
.tu-empty.off .meteor { opacity: 0.4; } .tu-empty .btn { margin-top: 4px; gap: 6px; }
.met-out { fill: none; stroke: var(--text-3); stroke-width: 1.1; stroke-linecap: round; }
.tu-sugg { position: absolute; bottom: 100%; right: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 12px; }
.stu .tu-sugg .chip { height: 40px; padding: 0 16px; font: var(--t-label); background: var(--surface); border: 1px solid var(--line); }

/* مربع الكتابة: حبة واحدة، والإرسال دائرة تنوّر لما تكتب */
/* الحبة فوق المحادثة (المحادثة تكمل تحتها وتبهت)، مثل النموذج */
.ct-composer { position: absolute; inset-inline: 16px; bottom: max(34px, env(safe-area-inset-bottom)); z-index: 22; transition: transform var(--kb-d, var(--dur-2)) var(--ease-sheet); }
.tu-col > .rd-fade { position: absolute; z-index: 21; }
.tu-in { display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 0 18px 0 6px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: var(--shadow-float); }
.tu-in textarea { flex: 1; min-width: 0; max-height: 160px; padding: 14px 0; border: 0; background: none; resize: none; font: var(--t-body); color: var(--text); }
.tu-in textarea::placeholder { color: var(--text-3); opacity: 1; }
.tu-in textarea:focus { outline: none; }
.tu-in .iconbtn { color: var(--text-2); }
.tu-in.off { opacity: 0.55; }
.sendc { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--surface-3); color: var(--text-3); cursor: pointer; }
.sendc.on { background: var(--ink); color: var(--on-ink); }
.sendc:disabled { cursor: default; }
/* أستاذ واحد (design-reference/teacher-one، 1 نوفمبر): نفس خانة «اسأل» في الملف، مايك قبل الإرسال، ويصير سماوي وهو يسمعك */
.tu-in .ct-mic { flex: none; }
.tu-in .ct-mic.is-hear { color: var(--aura-sky); }
/* اللي انسأل في الملف قبل: فاصل «سألته في محاضرة 3 · ص 1» */
.ct-from { display: flex; align-items: center; gap: 8px; margin: 8px 0; font: var(--t-caption); color: var(--text-3); }
.ct-from::before, .ct-from::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ct-from .ic { flex: none; }
.kb-open .ct-composer { bottom: 12px; }
.kb-native .ct-composer { transform: translateY(calc(-1 * var(--kb-h, 0px))); }
.kb-native .ct-main > :last-child { margin-bottom: var(--kb-h, 0px); }

/* «للمراجعة» */
.ct-review { padding: 4px 0 32px; }
.ct-review h1 { margin: 0; font: var(--t-title); }
.ct-review-sub { margin: 4px 0 16px; font: var(--t-caption); color: var(--text-2); }
.ct-saved { padding: 16px 0; border-top: 1px solid var(--line); }
.ct-saved h2 { margin: 0 0 6px; font: var(--t-head); }
.ct-saved .srcchips { margin: 10px 0 0; }
.ct-saved-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; margin-inline-start: -10px; font: var(--t-caption); color: var(--text-3); }
.ct-saved-meta .ct-act { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: none; color: var(--text); cursor: pointer; }
.ct-saved-link { min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }

/* ملفات الأستاذ واسمه */
.sr-h { display: flex; align-items: center; gap: 12px; margin: 0 4px 7px; }
.sr-h b { display: block; font: var(--t-head); } .sr-h small { display: block; font: var(--t-caption); color: var(--text-2); }
.tu-srcs .ct-file-row { width: 100%; }
.tu-mini { width: 32px; height: 42px; } .tu-mini canvas { display: block; width: 100%; height: 100%; }
.tu-tgl { position: relative; flex: none; width: 51px; height: 31px; border-radius: var(--r-pill); background: var(--surface-3); }
.tu-tgl i { position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: var(--r-pill); background: var(--text-2); transition: transform var(--dur-1) var(--ease-out); }
.tu-tgl.on { background: var(--text); } .tu-tgl.on i { transform: translateX(-20px); background: var(--surface); }
.ct-addf { gap: 6px; margin-top: 16px; }
.ct-sheet-meta { margin: 0 0 12px; font: var(--t-caption); color: var(--text-2); }
#ct-name + .sheet-primary { margin-top: 16px; }

/* «محادثاتك»: لوح من تحت على الجوال */
.ct-scrim { position: fixed; inset: 0; z-index: 23; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
.ct-side { position: fixed; inset-inline: 0; bottom: 0; z-index: 24; max-height: 86%; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 24px 16px max(34px, env(safe-area-inset-bottom)); background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-float), var(--rim);
  transform: translateY(105%); visibility: hidden; transition: transform var(--dur-3) var(--ease-sheet), visibility 0s var(--dur-3); }
.ct-side::before { content: ''; position: absolute; top: 10px; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--line); }
.is-drawer .ct-scrim { opacity: 1; pointer-events: auto; }
.is-drawer .ct-side { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-sheet); }
.ct-side .ex-h { margin: 0 0 0; }
.ct-newchat { gap: 6px; }
.th-cap { font: var(--t-caption); color: var(--text-3); padding: 14px 10px 6px; }
.ct-row, .ct-item { display: flex; flex-direction: column; align-items: stretch; justify-content: center; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-field); background: none; font: var(--t-label); color: var(--text-2); text-align: start; cursor: pointer; }
.ct-row-t, .ct-snip { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ct-snip { font: var(--t-caption); color: var(--text-3); }
.ct-row.on, .ct-item.is-now { background: var(--surface-2); color: var(--text); font-weight: 700; }
.ct-item { flex-direction: row; align-items: center; gap: 10px; }
.ct-item > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ct-item small { font: var(--t-caption); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-list > .ct-item { margin-top: 8px; }
.ct-side mark { background: none; color: var(--text); font-weight: 700; }
.ct-search { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 8px 0 0; padding: 0 12px; border-radius: var(--r-field); background: var(--surface-2); color: var(--text-3); }
.ct-search input { flex: 1; min-width: 0; border: 0; background: none; font: var(--t-body); color: var(--text); }
.ct-search input:focus { outline: none; }
.ct-empty { padding: 16px 10px; font: var(--t-label); color: var(--text-3); }
.tuw > .sp { display: none; }

/* ===== الحاسب: المحادثات عمود، والمحادثة 720 بالوسط، ومعاينة الصفحة يسار */
@media (min-width: 1024px) {
  .tuw { position: absolute; inset: 0; height: auto; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; padding: 24px; }
  .tuw.has-sp { grid-template-columns: 260px minmax(0, 1fr) 400px; }
  .tu-col { width: 100%; max-width: 720px; justify-self: center; min-height: 0; padding: 0; }
  .tu-col .tu-h { margin: 0 -6px 8px; }
  .ct-menu, .ct-new, .ct-scrim { display: none; }
  .ct-side { position: static; max-height: none; transform: none; visibility: visible; padding: 14px 10px; border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--rim); transition: none; }
  .ct-side::before { content: none; }
  .ct-side .ex-h { display: block; min-height: 0; margin: 0 0 10px; }
  .ct-side .ex-h b { display: none; }
  .ct-newchat { width: 100%; height: 44px; }
  .ct-composer { position: relative; inset: auto; flex: none; padding: 8px 0 0; }
  .ct-grid { padding-bottom: 16px; }
  .tu-col > .rd-fade { display: none; }
  .tu-sugg { right: 0; }
  .tuw.has-sp > .sp:not([hidden]) { display: flex; }
}
/* «مفيد / غير مفيد» تحت رد المساعد (js/measure.js، النموذج المعتمد 17 أكتوبر): إبهامان بلا نص.
   «شكراً لك» خارج السطر (تحت إبهام «مفيد» في فراغ ما بين الردود) فلا تزيد عرض صف الأدوات ولا تدفعه خارج الشاشة */
.fb { position: relative; display: inline-flex; gap: 2px; margin-inline-start: auto; align-items: center; }
.fb .fb-b { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-3); cursor: pointer; transition: color var(--dur-2) var(--ease-out); }
.fb .fb-b svg { width: 18px; height: 18px; fill: currentColor; fill-opacity: 0; transition: fill-opacity var(--dur-2) var(--ease-out); }
.fb .fb-b.on { color: var(--text); }
.fb .fb-b.on svg { fill-opacity: .2; }
.fb-thanks { position: absolute; top: calc(100% - var(--space-2)); inset-inline-start: 0; width: 44px; display: flex; justify-content: center; white-space: nowrap; pointer-events: none; font: var(--t-caption); color: var(--text-3); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.fb.is-up .fb-thanks { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fb-thanks, .fb .fb-b, .fb .fb-b svg { transition: none; } }
/* موضوع السؤال فوق الخانة مكان شرائح البداية (design-reference/ask-teacher-topic، اعتمده المالك 22 أكتوبر) */
.stu .tu-sugg .chip.tu-topic { height: auto; min-height: 40px; max-width: 100%; padding: 6px 14px 6px 4px; gap: 10px; white-space: normal; text-align: start; cursor: default; transition: opacity var(--dur-1) var(--ease-out); }
.tu-topic.out { opacity: 0; }
.tu-topic .tt-q { display: flex; flex-direction: column; min-width: 0; }
.tu-topic .tt-q b { font: var(--t-label); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }
.tu-topic .tt-q small { font: var(--t-caption); color: var(--text-3); }
.tu-topic .tt-bar { align-self: stretch; width: 3px; border-radius: var(--r-pill); background: var(--text-3); flex: none; }
.tu-topic .iconbtn { width: 32px; height: 32px; color: var(--text-3); }
/* css/stu-pdf.css */
/* منظّمي — عارض الملف «سماء واحدة» (design-reference/identity screens-study.css §8.5، js/pdf-reader.js وpdf-explain.js).
   الجوال: شريط علوي شفاف قليلاً وخط القراءة تحته، والصفحة ورق بعرض الشاشة بفاصل غامق، وحبة المساعد تحت.
   الواسع (.pw): شريط صفحات يمين، الصفحة بالوسط، ولوحة المساعد يسار. متغيرات نظام التصميم فقط، والحركة transform/opacity. */
.pdf-viewer.stu {
  --pdf-top: calc(52px + env(safe-area-inset-top));
  --pdf-bot: max(30px, env(safe-area-inset-bottom));
  --pr-ring: 0 0 0 2px var(--text);
  --pen-ring: 0 0 0 1px var(--line);
  --pen-ring-on: 0 0 0 3px var(--surface-2), 0 0 0 5px var(--text);
  --pen-ring-on-sm: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--text); /* شريط القلم على الجوالات الضيقة (pdf-shell.css) */
  --rg-ring: 0 0 0 4px var(--surface);
  --sel-tint: color-mix(in srgb, var(--gloss-ink) 20%, transparent);
  --lasso-fill: color-mix(in srgb, var(--gloss-ink) 6%, transparent);
  display: block; background: var(--bg-base); color: var(--text); font-family: var(--font);
}

/* ===== الشريط العلوي ===== */
.stu .pdfbar { position: absolute; top: 0; inset-inline: 0; z-index: 22; height: var(--pdf-top); padding: env(safe-area-inset-top) 8px 0 6px; display: flex; align-items: center; gap: 2px; background: color-mix(in srgb, var(--surface) 94%, transparent); }
.stu .pdfbar .pb-dot { display: none; }
.stu .pb-t { flex: 1; min-width: 0; font: 500 15px/20px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.stu .pb-t .pdf-title-name { font: inherit; overflow: hidden; text-overflow: ellipsis; }
.stu .pdfbar > .grow { display: none; }
.stu .pb-n { flex: none; display: inline-flex; align-items: center; margin: 0 6px; font: 500 14px/20px var(--font); color: var(--text-2); font-feature-settings: "tnum"; }
.stu .pb-n[hidden] { display: none; }
.stu .pb-n .pdf-page-input { width: auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: end; -moz-appearance: textfield; field-sizing: content; min-width: 1ch; }
.stu .pb-n .pdf-page-input:focus { color: var(--text); outline: none; }
.stu .pb-of { white-space: pre; }
.stu .pdfbar .pb-w { display: none; }
.pb-read { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--line); }
.pb-read i { display: block; height: 100%; background: var(--moon); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-2) var(--ease-out); }

/* ===== الصفحات ===== */
.stu .pdf-pages { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; padding: calc(var(--pdf-top) + 8px) 0 calc(var(--pdf-bot) + 80px); }
.stu.is-ink .pdf-pages { padding-top: calc(var(--pdf-top) + 64px); }
.stu .pdf-page { margin: 0 auto 8px; border-radius: unset; box-shadow: none; background: var(--pg-bg); }
.stu .pdf-page-num { color: var(--pg-ink-2); }
.stu .pdf-status { padding-top: calc(var(--pdf-top) + 48px); color: var(--text-2); }
.stu .textLayer ::selection { background: var(--sel-tint); }
.stu .pdf-rail, .stu .aipanel { display: none; }

/* ===== حبة المساعد والمزيد ===== */
.stu .pdf-find { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.stu .pdf-dock:not([hidden]) { display: contents; }
.aipill { position: absolute; z-index: 22; bottom: var(--pdf-bot); inset-inline: 16px; height: 52px; display: flex; align-items: center; padding: 0 14px 0 4px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: var(--shadow-float), var(--rim); }
.aipill > .meteor { margin-inline-end: 4px; flex: none; }
.ap-b { height: 44px; padding: 0 11px; border: 0; border-radius: var(--r-pill); background: none; font: 500 15px/20px var(--font); color: var(--text); white-space: nowrap; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.ap-b:active { transform: scale(.96); }
.ap-b.on { background: var(--surface-3); font-weight: 700; }
/* «اسأل» (الأستاذ على ملفك) كلمة مثل أخواتها بعد الشهاب؛ وضع الشريحة بلاها */
.stu.is-slide .ap-ask { display: none; }
@media (max-width: 374px) { .stu:not(.is-slide) .ap-b:not(.ap-more) { padding: 0 6px; } } /* جوال ضيق أو خط كبير: الكلمات الخمس داخل الحبة */
.ap-more { margin-inline-start: auto; display: grid; place-items: center; padding: 0 8px; color: var(--text-2); }
.stu .pdf-page-label { font: 500 14px/20px var(--font); color: var(--text-2); }
.stu .pdf-seg { margin: 0 4px; background: var(--surface-3); }
.stu.is-slide .aipill { gap: 2px; padding: 0 4px; }
@keyframes pdf-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ===== المؤقت ===== */
.timerpill.pdf-timer { position: absolute; z-index: 21; top: calc(var(--pdf-top) + 13px); right: 12px; height: 44px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: var(--shadow-float), var(--rim); }
.timerpill.pdf-timer[hidden], .is-ink .pdf-timer, .pw .pdf-timer { display: none; }
.pdf-timer .tp-a { height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 8px; color: var(--text); font: 700 15px/20px var(--font); font-feature-settings: "tnum"; text-decoration: none; }

/* ===== التحديد: حبة فوق النص، وفقاعة الترجمة ===== */
.selpill { position: absolute; z-index: 24; left: 0; top: 0; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font: 500 14px/20px var(--font); white-space: nowrap; box-shadow: var(--shadow-float), var(--rim); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.selpill.on { opacity: 1; }
.selpill > i { width: 1px; height: 18px; background: var(--line); }
.selpill .meteor { margin-inline-end: -6px; }
.selpill button { height: 40px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.selpill button:first-of-type { font-weight: 700; }
.wbub { position: absolute; z-index: 24; left: 0; top: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-float); font: var(--t-label); color: var(--text); white-space: nowrap; opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.wbub.on { opacity: 1; }
.wbub::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -6px; width: 10px; height: 10px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.wbub.below::after { bottom: auto; top: -6px; transform: translateX(-50%) rotate(225deg); }
.wbub > i { width: 1px; height: 20px; background: var(--line); }
.wbub button { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0; border: 0; background: none; color: var(--rose); font: inherit; font-weight: 700; cursor: pointer; }
.st-snack { position: absolute; z-index: 23; inset-inline: 16px; bottom: calc(var(--pdf-bot) + 64px); height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; border-radius: var(--r-pill); background: var(--surface-2); font: var(--t-label); color: var(--text); opacity: 0; transform: translateY(8px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.st-snack.on { opacity: 1; transform: none; }
.st-snack button { height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; }

/* ===== لوحة المساعد (الواسع): تبويب «اشرح» تلميح، والشرح نفسه في «اسأل» ===== */

/* ===== اختيار الصفحات ===== */
.rg-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 16px; }
.rg-h b { font: var(--t-head); }
.rg-h span { font: var(--t-caption); white-space: nowrap; }
.rg-strip { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; -webkit-mask-image: linear-gradient(to left, var(--text) 82%, transparent); mask-image: linear-gradient(to left, var(--text) 82%, transparent); }
.rg-strip::-webkit-scrollbar { display: none; }
.rg-pg { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; transition: opacity var(--dur-1) var(--ease-out); }
.rg-pg small { font: var(--t-caption); color: var(--text-2); }
.rg-pg.out { opacity: .4; }
.rg-strip .mini { width: 56px; height: 72px; }
.rg-pg.on .mini { box-shadow: var(--pr-ring); }
.rg-pg.on small { color: var(--text); font-weight: 700; }
.rg-track { position: relative; height: 24px; margin: 22px 12px 6px; touch-action: none; cursor: pointer; }
.rg-track::before { content: ''; position: absolute; inset-inline: 0; top: 10px; height: 4px; border-radius: var(--r-pill); background: var(--line); }
.rg-fill { position: absolute; top: 10px; height: 4px; border-radius: var(--r-pill); background: var(--text); }
.rg-track b { position: absolute; top: 0; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--text); transform: translateX(50%); box-shadow: var(--rg-ring); }
.rg-track b:focus-visible { outline: 2px solid var(--moon); outline-offset: 4px; }
.rg-ends { display: flex; justify-content: space-between; font: var(--t-caption); color: var(--text-3); margin: 0 4px 16px; }
.rg-chips { margin-bottom: 20px; }
.stu .rg-chips .chip { border: 0; cursor: pointer; }
.stu .rg-go { width: 100%; }

/* ===== الصفحات (لوح المصغّرات) ===== */
.th-sheet .tab-bar { margin: 0 0 14px; }
.th-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; justify-items: center; max-height: min(520px, 62vh); overflow-y: auto; scrollbar-width: none; padding: 2px 0 8px; }
.th-grid .mini { width: 104px; height: auto; }
.th-grid .rg-pg.on .mini { box-shadow: var(--pr-ring); }

/* ===== البحث ===== */
.pdf-find { position: absolute; z-index: 24; top: calc(var(--pdf-top) + 8px); left: 12px; width: min(380px, calc(100% - 24px)); padding: 6px; box-shadow: var(--shadow-float), var(--rim); animation: pdf-in var(--dur-2) var(--ease-sheet); }
.pf-in { display: flex; align-items: center; gap: 8px; padding-inline-start: 10px; }
.pf-in input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; color: var(--text); font: var(--t-label); outline: none; }
.pf-res { max-height: 50vh; overflow: auto; }
.pf-res .t3 { margin: 8px 10px; font: var(--t-caption); }
.pf-row { width: 100%; display: flex; gap: 10px; align-items: baseline; padding: 10px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text-2); font: var(--t-caption); text-align: start; cursor: pointer; }
.pf-row b { flex: none; color: var(--text); }
.pf-row mark { background: var(--hl-y); color: var(--text); border-radius: var(--r-mark); }

/* ===== القلم ===== */
.pentray { position: absolute; z-index: 21; top: var(--pdf-top); inset-inline: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); animation: pdf-tray var(--dur-2) var(--ease-sheet); }
@keyframes pdf-tray { from { opacity: 0; transform: translateY(-8px); } }
.pentray .pen { width: 36px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.pentray .pen[data-slot="1"] { --pc: var(--pen-1); } .pentray .pen[data-slot="2"] { --pc: var(--pen-2); } .pentray .pen[data-slot="3"] { --pc: var(--pen-3); } .pentray .pen[data-slot="4"] { --pc: var(--pen-4); }
.pentray .pen > i { width: 26px; height: 26px; border-radius: var(--r-pill); background: radial-gradient(circle, var(--pc) 0 8px, transparent 8.5px), var(--pg-bg); box-shadow: var(--pen-ring); }
.pentray .pen.on > i { box-shadow: var(--pen-ring-on); }
.pt-sep { width: 1px; height: 24px; background: var(--line); flex: none; }
.pentray .iconbtn { color: var(--text); }
.pentray .iconbtn:disabled { opacity: .35; cursor: default; }
.pentray .iconbtn.on { background: var(--surface-3); }
.pen-hint { position: absolute; z-index: 22; bottom: var(--pdf-bot); inset-inline: 16px; height: 52px; padding: 0 10px 0 6px; border-radius: var(--r-pill); background: var(--surface-2); display: flex; align-items: center; gap: 8px; font: var(--t-label); color: var(--text-2); white-space: nowrap; box-shadow: var(--shadow-float), var(--rim); animation: pdf-in var(--dur-2) var(--ease-sheet); }
.pen-hint span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pen-hint .ink-hand { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-3); cursor: pointer; }
.pen-hint .ink-hand.on { background: var(--surface-3); color: var(--text); }
.pen-hint .ink-done { flex: none; height: 44px; padding: 0 8px; border: 0; background: none; color: var(--rose); font: var(--t-label); font-weight: 500; cursor: pointer; }
.stu.is-ink .aipill { display: none; }
.stu .textLayer .ink-picked { background: none; }
.stu .ink-sel { fill: var(--lasso-fill); stroke: var(--gloss-ink); stroke-width: 1.6; stroke-dasharray: 5 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: default; }
.stu .ink-h-hit { fill: transparent; cursor: nwse-resize; }
.stu .ink-h[data-k="ne"] .ink-h-hit, .stu .ink-h[data-k="sw"] .ink-h-hit { cursor: nesw-resize; }
.stu .ink-h-dot { fill: var(--rose); stroke: var(--on-rose); stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.stu .ink-area.is-working .ink-h { display: none; }
.stu .ink-ask.selpill { position: absolute; transform: translateY(14px); opacity: 0; }
.stu .ink-ask.selpill.on { opacity: 1; }
.stu .ink-ask.selpill button { padding: 0; border-radius: unset; background: none; color: inherit; }
.stu .ink-ask.selpill button:first-of-type { background: none; color: inherit; font-weight: 700; }
.stu .ink-thinking { border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: var(--t-caption); }

/* ===== الواسع: شريط الصفحات، الصفحة بالوسط، لوحة المساعد ===== */
.pdf-viewer.stu.pw { display: grid; grid-template-columns: 120px minmax(0, 1fr) 360px; grid-template-rows: 60px minmax(0, 1fr); }
.pw .pdfbar { position: relative; grid-column: 1 / -1; height: 60px; padding: 0 12px; gap: 4px; }
.pw .pdfbar .pb-dot { display: inline-flex; margin-inline-start: 4px; }
.pw .pb-t { flex: none; max-width: 420px; margin-inline-start: 6px; }
.pw .pdfbar > .grow { display: block; flex: 1; }
.pw .pdfbar .pb-w { display: grid; }
.pw .pdfbar .pb-p { display: none; }
.stu.pw .pdf-pages { position: relative; inset: auto; grid-area: 2 / 2; padding: 28px max(var(--space-4, 16px), calc((100% - var(--pdf-page-w, var(--pdf-w, 507px))) / 2)) 40px; }
.pw .pdf-page { margin-bottom: 12px; box-shadow: var(--pen-ring); }
.pw .pdf-rail { grid-area: 2 / 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 0; overflow-y: auto; scrollbar-width: none; background: color-mix(in srgb, var(--surface) 55%, transparent); border-inline-end: 1px solid var(--line); }
.pr-pg { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pr-pg .mini { width: 60px; height: auto; opacity: .8; }
.pr-pg small { font: var(--t-caption); color: var(--text-3); }
.pr-pg.on .mini { opacity: 1; box-shadow: var(--pr-ring); }
.pr-pg.on small { color: var(--text); font-weight: 700; }
.pw .aipanel { grid-area: 2 / 3; display: flex; flex-direction: column; min-height: 0; padding: 18px 20px 16px; background: var(--surface); border-inline-start: 1px solid var(--line); overflow: hidden; }
.pw .aipill, .pw .pdf-dock { display: none; }
/* شريط «حوّله لسؤال» و«تراجع» بعمود الصفحة فوق حبة «اسأل»، مثل الجوال: كان مخفي بالعرض فيختفي الزر بالآيباد والكمبيوتر */
.stu.pw .st-snack { grid-area: 2 / 2; position: relative; inset: auto; align-self: end; justify-self: center; width: min(358px, calc(100% - 32px)); margin: 0 0 calc(var(--pdf-bot) + 64px); }
/* عمود «اسأل» مقفول (الافتراضي): الصفحة بالعرض كله. الحبة تحت الصفحة دايماً مثل التطبيق، و«…» يفتح الباقي */
.pdf-viewer.stu.pw:not(.pw-col) { grid-template-columns: 120px minmax(0, 1fr) 0; }
.pw:not(.pw-col) .aipanel { display: none; }
.pw .pdf-dock:not([hidden]) { display: contents; }
.stu.pw .aipill { display: flex; grid-area: 2 / 2; position: relative; left: auto; bottom: auto; transform: none; align-self: end; justify-self: center; margin-bottom: var(--pdf-bot); } /* بوسط عمود الصفحة لا الشاشة: «اسأل» مفتوح يزيحه */
.pw.pw-col .aipanel { animation: pdf-in var(--dur-2) var(--ease-sheet); }
.pw.is-ink .aipill { display: none; }
.pw .pdf-find { top: 68px; }
.pw .pentray { position: relative; top: auto; grid-area: 2 / 2; align-self: start; z-index: 23; margin: 12px auto 0; width: min(560px, calc(100% - 24px)); border: 1px solid var(--line); border-radius: var(--r-pill); }
.pw.is-ink .pdf-pages { padding-top: 28px; }
/* حبة «الإصبع يكتب» في عمود الصفحات نفسه مثل شريط الأقلام: كانت تتوسّط الشاشة كلها فتركب على لوح المساعد في الآيباد */
.stu.pw .pen-hint { position: relative; inset: auto; grid-area: 2 / 2; align-self: end; margin: 0 auto var(--pdf-bot); width: min(420px, calc(100% - 24px)); transform: none; }

/* الشريحة المترجمة (slide-translate.js) داخل الإطار الجديد */
.stu.is-slide .pdf-stage { position: absolute; inset: var(--pdf-top) 0 0; padding: 16px 12px calc(var(--pdf-bot) + 68px); }
.stu.is-slide .aipill { display: flex; }
.pw.is-slide .pdf-stage { position: relative; inset: auto; grid-area: 2 / 2; }

/* ===== الآيباد العمودي (768–1023) ===== */
@media (min-width: 768px) {
  .pdf-viewer.stu { --pdf-top: calc(60px + env(safe-area-inset-top)); --pdf-bot: max(36px, env(safe-area-inset-bottom)); }
  .stu .pdfbar { padding-inline: 12px; }
  .stu .pdf-pages { padding-inline: calc((100% - 702px) / 2); padding-top: calc(var(--pdf-top) + 24px); }
  .stu .pdf-page { margin-bottom: 14px; }
  .stu .aipill { inset-inline: auto; left: 50%; width: 358px; transform: translateX(-50%); }
  .stu .st-snack { inset-inline: auto; left: 50%; width: 358px; margin-left: -179px; }
  .stu .pen-hint { inset-inline: auto; left: 50%; width: 420px; transform: translateX(-50%); }
}
@media (min-width: 1024px) { .stu.pw .pdf-pages { --pdf-w: 507px; } }
@media (min-width: 1280px) { .stu.pw .pdf-pages { --pdf-w: 624px; } }
@media (prefers-reduced-motion: reduce) { .pentray, .pen-hint, .pdf-find { animation: none; } }

/* ===== عارض المذاكرة (design-reference/identity/screens-pdfx.js): «…» بقسمين، علامة الصفحة */
.pdf-mark-open.on { color: var(--rose); }
.pdf-mark-open.on .ic { fill: var(--rose); }
/* -- الصفحات والعلامات والأوراق (pdf-marks) -- */
/* شريطة الصفحة المعلّمة على زاوية الورقة العليا، وفي المصغّرات (screens-pdfx.css .pg .ribbon و.rg-pg > .rb) */
.pg-ribbon { position: absolute; top: 0; right: 56px; width: 18px; height: 30px; background: var(--rose); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); z-index: 2; pointer-events: none; }
.rg-pg { position: relative; -webkit-touch-callout: none; user-select: none; }
.rg-pg > .rb { position: absolute; top: 0; right: 10px; width: 12px; height: 18px; background: var(--rose); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); z-index: 2; }
.pr-pg > .rb { right: 6px; width: 10px; height: 15px; }
/* ورقتك المضافة: مربعات أو سطور أو فاضية، بألوان الورق */
.stu .pdf-note, .pp-paper { background-color: var(--pg-bg); }
.paper-grid, .stu .pdf-note.paper-grid { background-image: linear-gradient(color-mix(in srgb, var(--pg-ink, var(--on-planet)) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--pg-ink, var(--on-planet)) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px; background-position: -1px 40px; }
.paper-lines, .stu .pdf-note.paper-lines { background-image: linear-gradient(transparent 27px, color-mix(in srgb, var(--pg-ink, var(--on-planet)) 12%, transparent) 27px); background-size: 100% 28px; background-position: 0 40px; }
.pp-paper.paper-grid { background-size: 7px 7px; background-position: 0 0; }
.pp-paper.paper-lines { background-size: 100% 8px; background-position: 0 0; }
.pdf-note.is-new { animation: pdf-in var(--dur-2) var(--ease-sheet); }
.pdf-note.is-gone { opacity: 0; transform: scale(.98); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.note-tag { position: absolute; top: 10px; right: 12px; z-index: 2; height: 24px; padding: 0 10px; border-radius: var(--r-chip); display: inline-flex; align-items: center; gap: 4px; font: var(--t-micro); color: var(--pg-ink-2); background: color-mix(in srgb, var(--pg-bg) 80%, var(--pg-ink, var(--on-planet))); direction: rtl; pointer-events: none; }
.pp-paper { position: relative; display: block; width: 104px; overflow: hidden; }
.pp-paper .ink-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
/* «المحددة»: صفوف بمصغّرة وعنوان الصفحة */
.pp-marked { max-height: min(520px, 62vh); overflow-y: auto; scrollbar-width: none; }
.pp-mk { width: 100%; border: 0; background: none; color: var(--text); font: inherit; text-align: start; gap: 14px; --row-lead: 58px; }
.pp-mk .mini { width: 44px; height: auto; flex: none; }
.pp-mk b { display: block; font: 500 16px/22px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-mk small { display: block; font: var(--t-caption); color: var(--text-2); }
.pp-empty { font: var(--t-label); color: var(--text-2); text-align: center; padding: 24px 8px; }
/* الضغطة المطوّلة: المصغّرة ترتفع ولوحة الإجراءات فوقها */
.th-sheet { position: relative; }
.pm-catch { position: absolute; inset: 0; z-index: 55; }
.th-sheet .rg-pg.lift { z-index: 61; transform: scale(1.04); transition: transform var(--dur-2) var(--ease-out); }
.th-menu { position: absolute; right: 16px; z-index: 60; width: 248px; padding: 12px 16px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-float), var(--rim); animation: pdf-in var(--dur-2) var(--ease-sheet); }
.th-menu .cap { display: block; font: var(--t-micro); color: var(--text-3); margin-bottom: 8px; }
.th-menu button[role="menuitem"] { display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; padding: 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: var(--t-label); text-align: start; cursor: pointer; }
.pm-del button[role="menuitem"] { border-top: 0; }
.pm-q { font: var(--t-label); color: var(--text-2); margin: 4px 0 10px; }
.pm-qa { display: flex; gap: 8px; justify-content: flex-end; padding-bottom: 10px; }
.pm-papers { display: flex; gap: 8px; padding: 0 0 12px; }
.pm-papers button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: var(--t-micro); color: var(--text-2); cursor: pointer; }
.pm-papers button i { width: 44px; height: 56px; border-radius: var(--r-chip); background-color: var(--pg-bg); outline: 1px solid var(--line); }
.pm-papers button.on i { outline: 2px solid var(--text); }
.pm-papers button.on { color: var(--text); font-weight: 700; }
.pm-papers .pl-grid i { background-image: linear-gradient(color-mix(in srgb, var(--pg-ink, var(--on-planet)) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--pg-ink, var(--on-planet)) 14%, transparent) 1px, transparent 1px); background-size: 7px 7px; }
.pm-papers .pl-lines i { background-image: linear-gradient(color-mix(in srgb, var(--pg-ink, var(--on-planet)) 16%, transparent) 1px, transparent 1px); background-size: 100% 8px; }
.pm-pick .pm-papers { padding: 4px 0 16px; }
.pm-pick .pm-papers button i { width: 72px; height: 92px; }
@media (prefers-reduced-motion: reduce) { .pdf-note.is-new, .th-menu { animation: none; } }
/* -- الكتابة: التحديد والشكل (pdf-ink-edit) -- */
/* -- ورق داكن وروابط الملف (pdf-view-extra) -- */
.stu .pdf-pages { transition: opacity var(--dur-1) var(--ease-out); }
.stu .pdf-pages.pdf-fade { opacity: 0; } /* تبديل الورق أو وضع الكتاب: تخفت وترجع بدل القفزة */
/* ورق داكن: الشريحة مقلوبة الألوان على --surface، والكتابة والتظليل والترجمة كما هي */
.pdf-dark .pdf-page { --pg-bg: var(--surface); --pg-ink: var(--text); --pg-ink-2: var(--text-2); }
.pdf-dark .pdf-page > canvas { filter: invert(1) hue-rotate(180deg); }
.pdf-dark .ink-hl { mix-blend-mode: screen; }
/* القلم الأسود (pdfInk.PEN_COLORS[0]) يصير فاتح على الورق الداكن؛ \23 هي «#» */
.pdf-dark .ink-layer [fill="\23 1A1C26"] { fill: var(--text); }
/* روابط الملف: مساحات شفافة فوق طبقة النص، وتنطفي وقت القلم */
.pdf-links { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pdf-link { position: absolute; pointer-events: auto; border-radius: var(--r-mark); cursor: pointer; }
.pdf-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.is-ink .pdf-link { pointer-events: none; }
/* وضع الكتاب (الواسع): مفتاح صفحة / صفحتين في الشريط، والخانات عمودين بترتيبها */
.stu .pb-pair[hidden] { display: none; }
.pdf-book-seg { height: 36px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); gap: 2px; margin: 0 6px; }
.pw .pdfbar .pdf-book-seg { display: inline-flex; }
.pdf-book-seg button { display: grid; place-items: center; width: 40px; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.pdf-book-seg button:active { transform: scale(.96); }
.pdf-book-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--rim); }
.stu.pw.is-book .pdf-pages { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; align-content: start; column-gap: 18px; padding-top: 24px; }
.stu.pw.is-book .pdf-page { margin: 0 0 18px; }
/* «PDF مع كتابتك» في لوح التصدير (pdf-export-ink) */
.xe .xe-panel { margin-bottom: 16px; }
.xe .xe-ink { min-height: 64px; }
.xe .xe-ink.on { background: var(--surface-2); }
.xe .xe-ink .rose-t { color: var(--rose); flex: none; }
.xe .xe-opts { padding: 2px 16px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); }
.xe .xe-opts .chip { background: var(--surface-3); }
.xe .xe-opts .chip.on { background: var(--surface); }
.xe .xe-row2 { display: flex; align-items: center; justify-content: space-between; font: var(--t-label); }
.xe .xe-range { display: flex; gap: 16px; font: var(--t-label); color: var(--text-2); }
.xe .xe-range[hidden] { display: none; }
.xe .xe-range input { width: 64px; height: 36px; margin-inline-start: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--surface); color: var(--text); font: inherit; text-align: center; }
.xe .xe-go:disabled { opacity: .5; }
.pdf-xprog { top: calc(var(--pdf-top) + 12px); z-index: 24; }
.pw .pdf-xprog { top: 72px; }
@media (prefers-reduced-motion: reduce) { .stu .pdf-pages { transition: none; } }
/* -- المراجعة بالإخفاء والتسجيل (pdf-tape، pdf-rec) -- */
/* الإخفاء: شريط وردي فوق الكلمة، لمسة تكشفه (الغطاء يتلاشى ويبقى أثر خفيف) */
.pdf-viewer.stu.is-tape .aipill, .pdf-viewer.stu.is-play .aipill { display: none; }
.is-tape .textLayer { -webkit-user-select: none; user-select: none; cursor: pointer; }
.is-tape .pdf-page { touch-action: pan-y pinch-zoom; }
.tape-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
.tape-layer.is-out { opacity: 0; }
.tape-layer .tp { position: absolute; padding: 0; border: 0; pointer-events: auto; cursor: pointer; border-radius: calc(var(--r-thumb) / 2); background: color-mix(in srgb, var(--rose) 22%, transparent); animation: tape-in var(--dur-2) var(--ease-out); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.tape-layer .tp::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--rose) 70%, var(--pg-bg)); transform-origin: center; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.tape-layer .tp.open::before { opacity: 0; transform: scaleY(.6); }
.tape-layer .tp:active { transform: scale(var(--press-scale)); }
.tape-layer .tp.is-out { opacity: 0; transform: scale(.9); }
.tape-layer .tp:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@keyframes tape-in { from { opacity: 0; transform: scaleX(.92); } }
.tape-bar, .rec-hint, .play-bar { position: absolute; z-index: 22; bottom: var(--pdf-bot); inset-inline: 16px; display: flex; align-items: center; background: var(--surface-2); box-shadow: var(--shadow-float), var(--rim); white-space: nowrap; animation: pdf-in var(--dur-2) var(--ease-sheet); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.tape-bar.is-out, .play-bar.is-out { opacity: 0; transform: translateY(8px); pointer-events: none; }
.tape-bar { height: 52px; gap: 6px; padding: 0 6px 0 14px; border-radius: var(--r-pill); }
.tape-bar b { font: 700 15px/20px var(--font); } .tape-bar .t2 { font: var(--t-caption); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tape-bar > .ic { color: var(--rose); margin: 0 8px 0 0; flex: none; }
.tape-bar .btn { flex: none; }
/* التسجيل: النقطة والوقت مكان رقم الصفحة، وحبة «يسجّل…» تحت */
.rec-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin: 0 2px; border: 0; border-radius: var(--r-pill); background: var(--ember-wash); color: var(--ember); font: 700 13px/1 var(--font); font-feature-settings: "tnum"; flex: none; cursor: pointer; animation: pdf-in var(--dur-2) var(--ease-sheet); }
.rec-chip i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--ember); }
.rec-hint { height: 52px; gap: 10px; padding: 0 6px; border-radius: var(--r-pill); font: var(--t-label); color: var(--text-2); }
.rec-hint span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .rec-hint .btn { flex: none; }
.rec-hint > .ic { color: var(--text-3); margin-inline-start: 10px; flex: none; }
.is-ink .rec-hint, .is-tape .rec-hint { display: none; }
/* التشغيل: لمسة على الكتابة تشغّل لحظتها */
.play-bar { height: 64px; gap: 10px; padding: 0 8px; border-radius: var(--r-panel); }
.play-bar .pb-play { width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--text); color: var(--surface); display: grid; place-items: center; flex: none; cursor: pointer; }
.play-bar .pb-play .ic { stroke: currentColor; stroke-width: 2.6; }
.play-bar .wave { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.play-bar .wave svg { width: 100%; height: 22px; cursor: pointer; touch-action: none; }
.play-bar .wave rect { fill: var(--line); } .play-bar .wave rect.on { fill: var(--text); }
.play-bar .wave small { display: flex; justify-content: space-between; gap: 8px; font: var(--t-micro); color: var(--text-2); font-feature-settings: "tnum"; }
.play-bar .wave small .pb-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.play-bar .spd { font: 700 13px/1 var(--font); color: var(--text-2); padding: 7px 8px; border: 0; border-radius: var(--r-chip); background: var(--surface-3); flex: none; cursor: pointer; }
.is-ink .play-bar, .is-tape .play-bar { display: none; }
.hl-play { position: absolute; z-index: 2; pointer-events: none; border-radius: calc(var(--r-thumb) * .75); background: color-mix(in srgb, var(--ember) 14%, transparent); outline: 1.5px solid color-mix(in srgb, var(--ember) 55%, transparent); outline-offset: -1.5px; animation: tape-in var(--dur-2) var(--ease-out); transition: opacity var(--dur-2) var(--ease-out); }
.hl-play.is-out { opacity: 0; }
/* بعد «وقّف»: «انحفظ» مع «تسجيلاتك» و«شغّله» */
.rec-saved > .ic { color: var(--rose); }
.rec-saved b { color: var(--text); font-weight: 700; }
.rec-saved .btn-sm { gap: 4px; }
.rec-hint.is-out { opacity: 0; transform: translateY(8px); pointer-events: none; }
.rec-sheet .rec-pl { width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--surface-3); display: grid; place-items: center; flex: none; color: var(--text); }
/* كتابتك مع الصوت (js/pdf-replay.js): الجاي باهت، والخط الحالي ينرسم ورأسه يتوهج بلونه */
.play-bar .wave.has-ticks svg { height: 28px; }
.play-bar .wave .tk { fill: var(--text-3); } .play-bar .wave .tk.on { fill: var(--text-2); }
.is-replay .ink-layer .ink-item, .is-replay .ink-note { transition: opacity var(--dur-2) var(--ease-out); }
.is-replay .ink-layer .rp-later, .is-replay .ink-note.rp-later { opacity: .16; }
.is-replay .ink-layer .rp-hide { opacity: 0; transition: none; }
.ink-layer .rp-trace, .ink-layer .rp-tip, .ink-layer .rp-halo { pointer-events: none; }
.ink-layer .rp-halo { opacity: .28; }
.rec-sheet .rec-row { padding: 0; gap: 0; }
.rec-sheet .rec-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 16px; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.rec-sheet .rec-row .iconbtn { margin-inline-end: 8px; }
.rec-sheet .rec-note { font: var(--t-caption); margin: 12px 4px 0; }
@media (min-width: 768px) {
  .stu .tape-bar, .stu .rec-hint, .stu .play-bar { inset-inline: auto; left: 50%; width: 420px; translate: -50% 0; }
}
.stu.pw .tape-bar, .stu.pw .rec-hint, .stu.pw .play-bar { position: relative; inset: auto; grid-area: 2 / 2; align-self: end; margin: 0 auto var(--pdf-bot); width: min(420px, calc(100% - 24px)); translate: none; }
@media (prefers-reduced-motion: reduce) { .tape-layer .tp, .tape-bar, .rec-hint, .play-bar, .rec-chip, .rec-chip i, .hl-play { animation: none; } .is-replay .ink-layer .ink-item, .is-replay .ink-note { transition: none; } }
/* css/pdf-shell.css */
/* منظّمي — قشرة العارض الجديدة (design-reference/reader-v3، اعتمدها المالك 6 نوفمبر؛ js/pdf-shell.js).
   كبسولة زجاج وحدة فوق (رجوع، الاسم يفتح «روح»، 12 / 24)، وخط القراءة بلون القمر على حافة الشاشة،
   وشريط سفلي بخمس أدوات والمساعد بالشهاب، وشريطة العلامة على زاوية الورقة، وشريط القلم الواحد تحت.
   الواسع: الكبسولة بالوسط، ولوحة جانبية وحدة بوقت واحد (المصغّرات أو «اسأل»). متغيرات النظام فقط، والحركة transform/opacity. */
.pdf-viewer.stu { --pdf-top: calc(64px + env(safe-area-inset-top)); --pdf-bot: max(24px, env(safe-area-inset-bottom)); }

/* ===== الكبسولة ===== */
.stu .pdfbar.pcap { top: calc(env(safe-area-inset-top) + 8px); inset-inline: 12px; height: 48px; padding: 0 4px; gap: 2px; border-radius: var(--r-pill); }
/* زجاج واحد للكبسولة والشريط السفلي (حد backdrop-filter في perf-budget) */
.stu .pdfbar.pcap, .stu:not(.is-slide) .aipill.pdock {
  background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--lg-rim), var(--shadow-float); }
:root[data-theme="dawn"] .stu .pdfbar.pcap, .stu.is-ink .pdfbar.pcap { background: var(--glass-solid); }
.stu .pcap .pb-t { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--text); text-align: start; cursor: pointer; }
.stu .pcap .pb-t:disabled { cursor: default; }
.stu .pcap .pdf-title-name { display: block; max-width: 100%; font: 600 14.5px/20px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stu .pcap .pb-sub { display: flex; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; }
.stu .pcap .pb-c { display: none; font: var(--t-micro); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.stu .pcap .pb-left { font: var(--t-micro); color: var(--text-2); flex: none; }
.pw .pcap .pb-c + .pb-left:not([hidden])::before { content: ' · '; }
.stu .pcap .pb-n { height: 32px; margin: 0 4px 0 2px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-3); font: 600 12.5px/1 var(--font); }
.stu .pcap .pb-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--line); }
.stu .pcap .pb-read { position: fixed; top: 0; bottom: auto; height: 2px; background: none; z-index: 41; }

/* ===== الشريط السفلي ===== */
.stu:not(.is-slide) .aipill.pdock { inset-inline: auto; left: 50%; transform: translateX(-50%); width: auto; height: 64px; padding: 0 6px; gap: 0; }
:root[data-theme="dawn"] .stu .aipill.pdock { background: var(--glass-solid); }
.pdock .dk { width: 62px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--text-2); font: 500 11px/14px var(--font); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.pdock .dk:active { transform: scale(.94); }
.pdock .dk.on { color: var(--text); background: var(--surface-3); }
.pdock .dk-ai { width: 70px; color: var(--text); }
.pdock .dk-ai .meteor { margin-top: -2px; }
.pdock .ap-more { margin: 0; padding: 0; }
@media (max-width: 359px) { .pdock .dk { width: 56px; } .pdock .dk-ai { width: 62px; } }
@keyframes pdf-in-c { from { opacity: 0; transform: translate(-50%, 8px) scale(.98); } }

/* ===== الصفحات: مكان تحت الكبسولة، وشريطة العلامة شبح على الزاوية ===== */
.stu .pdf-pages { padding-bottom: calc(var(--pdf-bot) + 92px); }
.pg-rib { position: absolute; top: 0; right: 16px; z-index: 3; width: 34px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.pg-rib::before { content: ''; position: absolute; top: 0; left: 8px; width: 18px; height: 28px; background: var(--pg-ink-2); opacity: .16; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); transition: opacity var(--dur-1) var(--ease-out); }
.pdf-page:has(> .pg-ribbon) > .pg-rib::before { opacity: 0; }
.stu .pg-ribbon { right: 24px; }
.is-ink .pg-rib, .is-slide .pg-rib { display: none; }

/* ===== لوح «المساعد» ===== */
.as-sheet .as-ask { width: 100%; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); box-shadow: var(--ring-line); color: var(--text-3); font: 400 15px/1 var(--font); text-align: start; cursor: pointer; }
.as-sheet .as-ask .meteor { color: var(--text); }
.as-sheet .list-panel { margin-top: 12px; }
.as-row { width: 100%; border: 0; background: none; text-align: start; cursor: pointer; }
.as-row .lic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); }
.as-all { display: block; margin: 12px auto 0; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); font: var(--t-label); cursor: pointer; }

/* ===== «روح» ===== */
.go-in { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: var(--ring-line); }
.go-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: 400 16px/1 var(--font); outline: none; }
.go-cap { display: block; margin: 16px 6px 8px; font: var(--t-caption); color: var(--text-2); }
.go-list { max-height: 44vh; overflow-y: auto; scrollbar-width: none; }
.go-toc { width: 100%; min-height: 48px; border: 0; background: none; text-align: start; cursor: pointer; }
.go-toc.cur { background: color-mix(in srgb, var(--moon) 10%, transparent); }
.go-n { width: 26px; flex: none; color: var(--text-2); font: 600 13px/1 var(--font); }
.go-toc.cur .go-n { color: var(--moon); }
.go-p { flex: none; color: var(--text-2); font: var(--t-micro); }
.go-files { display: flex; flex-wrap: wrap; gap: 8px; }
.go-f { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font: 500 13px/1 var(--font); cursor: pointer; }
.go-f span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.go-f.cur { box-shadow: var(--ring-moon); }
.go-ring { width: 18px; height: 18px; flex: none; border-radius: var(--r-pill); background: conic-gradient(var(--moon) calc(var(--p) * 1%), var(--surface-3) 0);
  -webkit-mask: radial-gradient(circle, transparent 5px, black 6px); mask: radial-gradient(circle, transparent 5px, black 6px); }

/* ===== شريط القلم الواحد تحت ===== */
.stu .pentray { top: auto; bottom: var(--pdf-bot); inset-inline: auto; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px); height: 60px; gap: 2px; padding: 0 8px;
  border: 0; border-radius: var(--r-pill); background: var(--glass-solid); box-shadow: var(--lg-rim), var(--shadow-float); animation: pdf-tray-b var(--dur-2) var(--ease-sheet); }
@keyframes pdf-tray-b { from { opacity: 0; transform: translate(-50%, 8px); } }
.stu .pentray .ink-done { flex: none; height: 40px; min-height: 0; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--text); color: var(--surface); font: 600 14px/1 var(--font); }
.stu .pentray .pen { width: 32px; }
.stu .pentray .ink-redo { display: none; }
.stu.is-ink .pdf-pages { padding-top: calc(var(--pdf-top) + 8px); }
.stu .pen-hint { bottom: calc(var(--pdf-bot) + 70px); inset-inline: auto; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); height: 40px; padding-block: 0; padding-inline: 4px 14px; }

/* ===== الواسع (.pw): الكبسولة بالوسط، والصفحة وحدها، ولوحة جانبية وحدة ===== */
.pdf-viewer.stu.pw, .pdf-viewer.stu.pw:not(.pw-col) { grid-template-columns: 0 minmax(0, 1fr) 0; grid-template-rows: 0 minmax(0, 1fr); }
.pdf-viewer.stu.pw.rail-on:not(.pw-col) { grid-template-columns: 236px minmax(0, 1fr) 0; }
.pdf-viewer.stu.pw.pw-col { grid-template-columns: 0 minmax(0, 1fr) 396px; }
.pw .pdfbar.pcap { position: absolute; top: 14px; left: 50%; right: auto; transform: translateX(-50%); width: min(640px, calc(100% - 32px)); height: 52px; padding: 0 6px; }
.pw.pw-col .pdfbar.pcap { left: calc(50% + 198px); width: min(640px, calc(100% - 428px)); }
.pw.rail-on .pdfbar.pcap { left: calc(50% - 118px); }
.pw .pcap .pb-t { flex: 1; max-width: none; margin: 0; }
.pw .pcap .pb-c { display: block; }
.stu.pw .pdf-pages, .stu.pw .pdf-stage { padding-top: 84px; } /* الشريحة المترجمة تبدأ تحت الشريط (ST-3، «اعتمد» 8 نوفمبر) */
/* الصفحة أعرض: ما عاد فيه عمود مصغّرات ولوحة دايمين جنبها */
@media (min-width: 1024px) { .stu.pw .pdf-pages { --pdf-w: 720px; } .stu.pw.pw-col .pdf-pages, .stu.pw.rail-on .pdf-pages { --pdf-w: 600px; } }
@media (min-width: 1280px) { .stu.pw .pdf-pages { --pdf-w: 820px; } .stu.pw.pw-col .pdf-pages, .stu.pw.rail-on .pdf-pages { --pdf-w: 680px; } }
.pw .pdf-rail { display: none; }
.pw.rail-on .pdf-rail { display: flex; margin: 84px 16px 16px 0; border: 0; border-radius: var(--r-panel); background: var(--glass-solid); box-shadow: var(--rim); animation: pdf-in var(--dur-2) var(--ease-sheet); }
.pw .aipanel { margin: 84px 0 16px 16px; border: 0; border-radius: var(--r-panel); box-shadow: var(--rim); }
.stu.pw .aipill.pdock { position: absolute; grid-area: auto; left: 50%; transform: translateX(-50%); bottom: var(--pdf-bot); margin: 0; }
.stu.pw.pw-col .aipill.pdock { left: calc(50% + 198px); }
.stu.pw.rail-on .aipill.pdock { left: calc(50% - 118px); }
.pw .pdf-find { top: 76px; }
/* القلم بالواسع: شريط عمودي على اليمين */
.stu.pw .pentray { position: absolute; grid-area: auto; inset: 50% 18px auto auto; transform: translateY(-50%); flex-direction: column; justify-content: flex-start; width: 60px; height: auto; max-width: none; padding: 10px 0; margin: 0; border-radius: var(--r-tray); animation: pdf-in var(--dur-2) var(--ease-sheet); }
.stu.pw .pentray .pt-sep { width: 26px; height: 1px; }
.stu.pw .pentray .pen { height: 36px; }
.stu.pw .pentray .ink-redo { display: grid; }
.stu.pw .pentray .ink-done { padding: 0 10px; }
.stu.pw .pen-hint { position: relative; inset: auto; grid-area: 2 / 2; align-self: end; justify-self: center; margin: 0 0 var(--pdf-bot); transform: none; width: max-content; } /* وسط عمود الصفحات، لا فوق اللوح الجانبي */
@media (prefers-reduced-motion: reduce) { .stu .pentray, .pw.rail-on .pdf-rail { animation: none; } }

/* ===== شريط التحديد (ظلّل · اشرح · ترجم · بطاقة · لملخّصي) ===== */
.selpill.sp-v3 { height: 54px; gap: 0; padding: 0 6px; background: var(--glass-solid); box-shadow: var(--lg-rim), var(--shadow-float); }
.selpill.sp-v3 button { width: 58px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 500 11px/14px var(--font); font-weight: 500; border-radius: var(--r-pill); }
.selpill.sp-v3 button:first-of-type { font-weight: 500; }
.selpill.sp-v3 .meteor { margin: 0; }
.sp-hl { width: 19px; height: 19px; border-radius: var(--r-pill); background: var(--hl-y); box-shadow: var(--halo-text); }

/* ===== بطاقة من المحدد ===== */
.cd-sheet { display: flex; flex-direction: column; gap: 12px; }
.cd-f { display: flex; flex-direction: column; gap: 6px; font: var(--t-caption); color: var(--text-2); }
.cd-f textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: var(--r-field); background: var(--surface-2); box-shadow: var(--ring-line); color: var(--text); font: 500 16px/24px var(--font); resize: none; }
.cd-save { margin-top: 4px; }

/* ===== ملخّصي: نص الشاشة بالجوال، لوحة جانبية بالواسع ===== */
.pnotes { position: absolute; z-index: 25; inset-inline: 0; bottom: 0; height: 47%; display: flex; flex-direction: column; padding: 8px 16px calc(env(safe-area-inset-bottom) + 12px);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--surface-sheet); box-shadow: var(--shadow-sheet); transform: translateY(100%); transition: transform var(--dur-2) var(--ease-sheet); }
.pnotes.on { transform: none; }
.pn-grab { display: block; flex: none; width: 38px; height: 5px; margin: 0 auto 8px; border-radius: var(--r-pill); background: var(--line); }
.pn-h { display: flex; align-items: center; gap: 8px; flex: none; }
.pn-h b { font: 700 18px/26px var(--font); }
.pn-h small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-micro); color: var(--text-2); }
.pn-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 8px 0; }
.pn-empty { margin: 12px 4px; font: var(--t-caption); color: var(--text-2); }
.pn-q { position: relative; margin: 0 0 8px; padding: 10px 12px 10px 104px; border-radius: var(--r-field); background: var(--surface-2); box-shadow: var(--edge-pen); font: 400 13.5px/21px var(--font); }
.pn-pg { position: absolute; left: 52px; top: 50%; transform: translateY(-50%); height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); font: 500 12px/1 var(--font); cursor: pointer; }
.pn-x { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-3); cursor: pointer; }
.pn-q .pn-x::after { content: ''; position: absolute; inset: -8px; }
.pn-q .pn-pg::after { content: ''; position: absolute; inset: -9px -4px; }
.pn-p:placeholder-shown { direction: rtl; } /* فاضية مع dir=auto: التلميح يمين (ST-9) */
.pn-p { display: block; width: 100%; margin: 0 0 8px; padding: 4px 2px; border: 0; background: none; color: var(--text); font: 400 15px/24px var(--font); resize: none; overflow: hidden; outline: none; }
.pn-p::placeholder { color: var(--text-3); }
.pn-foot { display: flex; align-items: center; gap: 6px; flex: none; padding-top: 6px; }
.pn-b { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: 500 12.5px/1 var(--font); cursor: pointer; }
.stu:not(.pw).notes-on .aipill.pdock { opacity: 0; pointer-events: none; }
.stu:not(.pw).notes-on .pdf-pages { padding-bottom: 50vh; }
.pdf-viewer.stu.pw.notes-on, .pdf-viewer.stu.pw.notes-on:not(.pw-col) { grid-template-columns: 0 minmax(0, 1fr) 396px; }
.pw.notes-on .pnotes { inset: 84px auto 16px 16px; width: 380px; height: auto; border-radius: var(--r-panel); box-shadow: var(--rim); transform: translateX(-16px); opacity: 0; transition: transform var(--dur-2) var(--ease-sheet), opacity var(--dur-2) var(--ease-out); }
.pw.notes-on .pnotes.on { transform: none; opacity: 1; }
.pw.notes-on .pn-grab { display: none; }
.pw.notes-on .pdfbar.pcap { left: calc(50% + 198px); width: min(640px, calc(100% - 428px)); }
.stu.pw.notes-on .aipill.pdock { left: calc(50% + 198px); }
.stu.pw.notes-on .pdf-pages { --pdf-w: 600px; }
@media (min-width: 1280px) { .stu.pw.notes-on .pdf-pages { --pdf-w: 680px; } }
@media (prefers-reduced-motion: reduce) { .pnotes { transition: none; } }

/* ===== «شكل القراءة» (js/pdf-look.js) ===== */
.stu.pdf-warm .pdf-page::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--paper-warm); mix-blend-mode: multiply; pointer-events: none; }
.lk-papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.lk-sw { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px; padding: 12px 6px; border: 0; border-radius: var(--r-panel); background: var(--surface-2); color: var(--text-2); font: var(--t-caption); cursor: pointer;
  }
.lk-sw.on { background: var(--surface-3); color: var(--text); box-shadow: var(--ring-on-2); }
.lk-pp { width: 44px; height: 56px; border-radius: var(--r-chip); outline: 1px solid var(--line); }
.lk-white { background: var(--pg-bg); } .lk-warm { background: var(--paper-warm); } .lk-dark { background: var(--surface); }
.lk-row { width: 100%; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.lk-row .list-row-main small { color: var(--text-2); }
.lk-seg { margin-bottom: 4px; }

/* الانغماس: ضغطة على الصفحة تخفي الكبسولة والشريط (translate منفصل فلا يكسر transform الشريط) */
.stu .pdfbar.pcap, .stu:not(.is-slide) .aipill.pdock { transition: translate var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.stu.is-imm .pdfbar.pcap { translate: 0 -72px; opacity: 0; pointer-events: none; }
.stu.is-imm:not(.is-slide) .aipill.pdock { translate: 0 96px; opacity: 0; pointer-events: none; }

/* راحة العين و«ارجع لصفحتك»: فوق الشريط، وسط عمود الصفحات */
.lk-eye, .lk-back { position: absolute; z-index: 45; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 92px); translate: -50% 12px; opacity: 0;
  transition: translate var(--dur-2) var(--ease-spring), opacity var(--dur-2) var(--ease-out);
  background: var(--glass-solid); box-shadow: var(--lg-rim), var(--shadow-float); color: var(--text); }
.lk-eye.on, .lk-back.on { translate: -50% 0; opacity: 1; }
.lk-back { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill); font: 600 13.5px/1 var(--font); white-space: nowrap; cursor: pointer; }
.lk-eye { display: flex; align-items: center; gap: 12px; width: min(380px, calc(100% - 32px)); padding: 12px 14px; border-radius: var(--r-panel); }
.lk-eye .list-row-main { min-width: 0; flex: 1; }
.lk-eye .list-row-main small { display: block; white-space: normal; color: var(--text-2); }
.lk-ring { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); box-shadow: var(--ring-text3-2); font: 600 15px/1 var(--font); }
.lk-skip { flex: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: var(--t-caption); cursor: pointer; }
.stu.is-imm .lk-back { bottom: calc(env(safe-area-inset-bottom) + 24px); }
.stu.pw.rail-on :is(.lk-eye, .lk-back) { left: calc(50% - 118px); }
.stu.pw:is(.pw-col, .notes-on) :is(.lk-eye, .lk-back) { left: calc(50% + 198px); }
@media (prefers-reduced-motion: reduce) { .lk-eye, .lk-back, .stu .pdfbar.pcap, .stu .aipill.pdock { transition: none; } }

/* ===== «ذاكر وتابع» (js/pdf-video.js) ===== */
.vd-sub { margin: -8px 4px 14px; font: var(--t-caption); color: var(--text-2); }
.vd-paste { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: var(--t-caption); cursor: pointer; }
.vd-row { width: 100%; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.vd-th { flex: none; width: 96px; aspect-ratio: 16 / 9; border-radius: var(--r-thumb); overflow: hidden; background: var(--surface-3); }
.vd-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-row .list-row-main b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vd-row .list-row-main small { color: var(--text-2); }
.vd-hint { margin: 14px 6px 0; font: var(--t-micro); color: var(--text-3); }

/* نافذة «ذاكر وتابع» v245 */
.vwin { position: absolute; z-index: 44; left: 0; top: 0; width: 448px; padding: 0 8px 4px; container-type: inline-size; border-radius: var(--r-panel); overflow: hidden; background: linear-gradient(var(--glass-solid), var(--glass-solid)), var(--bg-base); box-shadow: var(--lg-rim), var(--shadow-modal); opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out); }
.vwin.on { opacity: 1; }
.vwin.snap { transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-out); }
.vwin.drag { opacity: .94; }
.vwin.drag iframe { pointer-events: none; } /* السحب ما يضيع داخل المشغّل */
.vwin.is-mini { opacity: 0; pointer-events: none; }
.vfr { aspect-ratio: 16 / 9; min-height: 200px; border-radius: var(--r-field); overflow: hidden; background: var(--sw-black); }
.vfr iframe { display: block; width: 100%; height: 100%; border: 0; }
/* ترتيب مشغّل أبل المصغّر */
.vtop { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 44px; cursor: grab; touch-action: none; user-select: none; }
.vtop .vb-s:nth-child(2) { margin-inline-end: auto; }
.vwin.drag .vtop, .vwin.drag .vhead { cursor: grabbing; }
.vgrab { position: absolute; left: 50%; top: 50%; width: 36px; height: 5px; translate: -50% -50%; border-radius: var(--r-pill); background: var(--text-3); opacity: .55; transition: opacity var(--dur-1) var(--ease-out); }
.vtop:hover .vgrab { opacity: 1; }
.vhead { padding: 12px 8px 2px; cursor: grab; touch-action: none; user-select: none; }
.vch { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 14px/20px var(--font); color: var(--text); }
.vb { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text); cursor: pointer; transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.vb:active, .vspd:active, .vstamp:active { transform: scale(.94); }
.vb-s { width: 40px; height: 40px; color: var(--text-2); }
.vb-s:hover { color: var(--text); }
.vbar { position: relative; height: 20px; display: flex; align-items: center; margin: 4px 8px 0; cursor: pointer; touch-action: none; direction: ltr; }
.vbar-t { position: relative; flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; transition: transform var(--dur-1) var(--ease-out); }
.vbar-f { position: absolute; inset: 0; background: var(--moon); transform: scaleX(0); transform-origin: left center; }
.vbar:hover .vbar-t, .vbar.on .vbar-t { transform: scaleY(1.6); }
.vbar:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; border-radius: var(--r-pill); }
.vtimes { display: flex; justify-content: space-between; margin: 0 8px; font: 600 11px/14px var(--font); color: var(--text-3); }
.vctl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; padding: 0 4px; }
.vtrans { display: flex; align-items: center; gap: 10px; }
.vplay { width: 52px; height: 52px; background: var(--ink); color: var(--on-ink); }
.vstamp { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: 600 12.5px/1 var(--font); white-space: nowrap; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.vspd { justify-self: end; height: 32px; min-width: 44px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: 600 12.5px/1 var(--font); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
@container (max-width: 340px) { .vstamp span { display: none; } }
.vres { position: absolute; left: 0; bottom: 0; width: 32px; height: 32px; cursor: nesw-resize; touch-action: none; }
.vres::after { content: ''; position: absolute; left: 6px; bottom: 6px; width: 10px; height: 10px; border-left: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); border-radius: var(--r-corner-mark); }
.vres:hover::after { border-color: var(--text-2); }
/* الجوال: نافذة بعرض الشاشة تحت الكبسولة، تنسحب فوق وتحت، والصفحات تنزل تحت مكانها الأول */
.vwin.strip { left: 8px; right: 8px; top: calc(env(safe-area-inset-top) + 64px); width: auto; }
.vwin.strip .vfr { min-height: 200px; } /* شروط يوتيوب: المشغّل 200×200 على الأقل حتى على جوال 320 */
@media (max-width: 359px) { .vwin.strip { left: 0; right: 0; padding-inline: 0; border-radius: var(--r-none); } .vwin.strip .vfr { border-radius: var(--r-none); } }
.stu.vid-on:not(.pw) .pdf-pages { padding-top: calc(env(safe-area-inset-top) + 64px + 44px + 56.25vw + 150px); }
/* «صغّرها»: حبة فوق الشريط ترجّعه */
.vpill { position: absolute; z-index: 45; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 92px); translate: -50% 12px; opacity: 0; display: inline-flex; align-items: center; gap: 10px; max-width: min(360px, calc(100% - 32px)); height: 52px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--glass-solid); box-shadow: var(--lg-rim), var(--shadow-float); color: var(--text); text-align: start; cursor: pointer; transition: translate var(--dur-2) var(--ease-spring), opacity var(--dur-2) var(--ease-out); }
.vpill.on { translate: -50% 0; opacity: 1; }
.vpill .list-row-main { min-width: 0; }
.vpill b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 13px/18px var(--font); }
.vpill small { font: var(--t-micro); color: var(--text-2); }
.stu.pw.rail-on .vpill { left: calc(50% - 118px); }
.stu.pw:is(.pw-col, .notes-on) .vpill { left: calc(50% + 198px); }
.pn-vt { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin: 0 0 6px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: var(--t-micro); cursor: pointer; }
.pn-v > span { display: block; }
@media (prefers-reduced-motion: reduce) { .vwin, .vwin.snap, .vpill { transition: none; } }
/* كلمة البحث مظلّلة على الصفحة (pdfViewer.markHits) */
.stu .textLayer span.find-hit { background: var(--hl-y); border-radius: var(--r-mark); }
/* ألوان التظليل بمعانيها: حبة الاختيار، وشريط اللون في ملخّصي، وفلتر المعنى */
.hlc { display: inline-block; width: 20px; height: 20px; border-radius: var(--r-pill); box-shadow: var(--ring-line); }
.hlc-0 { background: var(--hl-y); } .hlc-1 { background: var(--hl-g); } .hlc-2 { background: var(--hl-p); } .hlc-3 { background: var(--hl-b); }
.selpill.sp-hlpick button span { font-size: var(--fs-micro); }
.pn-q.pn-c0 { box-shadow: var(--edge-hl-y); } .pn-q.pn-c1 { box-shadow: var(--edge-hl-g); } .pn-q.pn-c2 { box-shadow: var(--edge-hl-p); } .pn-q.pn-c3 { box-shadow: var(--edge-hl-b); }
.pn-f { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
.pn-fc { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: var(--t-micro); cursor: pointer; }
.pn-fc .hlc { width: 12px; height: 12px; }
.pn-fc.on { background: var(--text); color: var(--bg-base); }
.qz-clip { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-inline-start: 8px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: var(--t-micro); cursor: pointer; }
/* «حصاد الجلسة» (js/pdf-harvest.js) */
.hv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 6px; }
.hv-stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: var(--r-field); background: var(--surface-2); }
.hv-stats b { font: var(--t-head); } .hv-stats small { font: var(--t-micro); color: var(--text-2); }
.hv-row { width: 100%; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.hv-row .list-row-main small { color: var(--text-2); }
.hv-cb { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-mark); box-shadow: var(--ring-text3-2); color: transparent; }
.hv-cb.on { background: var(--text); box-shadow: none; color: var(--bg-base); }
.hv-save { width: 100%; margin-top: 14px; }
/* «فيديوهات المادة» (js/course-videos.js) */
.cv-row { padding: 0; }
.cv-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.cv-main .list-row-main b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cv-main .list-row-main small { color: var(--text-2); }
.cv-pl { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-2); }
.cv-row .pn-x { position: static; transform: none; flex: none; width: 44px; height: 44px; margin-inline-end: 4px; }
.cv-vf { border-radius: var(--r-field); overflow: hidden; }
.cv-act { display: flex; gap: 8px; margin: 12px 0 4px; }
/* «جاوب من ملفي»: السطر اللي أخذ منه المساعد، و«ارجع للجواب» بشكل «ارجع لصفحتك» */
.textLayer span.cite-hit { background: color-mix(in srgb, var(--moon) 35%, transparent); box-shadow: var(--halo-moon); border-radius: var(--r-mark); }
.pdf-page.cite-hit { box-shadow: var(--halo-moon-3); }
.pt-citeback { position: absolute; z-index: 45; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 92px); display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 14px; border-radius: var(--r-pill); background: var(--glass-solid); box-shadow: var(--lg-rim), var(--shadow-float); font: var(--t-label); color: var(--text); white-space: nowrap; translate: -50% 12px; opacity: 0; transition: translate var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out); }
.pt-citeback.on { translate: -50% 0; opacity: 1; }
.pt-cb-go { height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--text); color: var(--bg-base); font: var(--t-label); font-weight: 700; cursor: pointer; }
/* «3 أسئلة وتطلع» داخل حصاد الجلسة (js/pdf-harvest.js): السؤال كبير، والكشف ثم «عرفتها/ما عرفتها» في منطقة الإبهام */
.hv-quiz { width: 100%; margin-top: 8px; }
.hq-hd { display: flex; align-items: center; gap: 10px; margin: 6px 2px 10px; font: var(--t-caption); color: var(--text-2); }
.hq-bar { position: relative; flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.hq-bar i { position: absolute; inset: 0; background: var(--moon); transform-origin: right; transition: transform var(--dur-3) var(--ease-out); }
.hq-q { margin: 0 0 12px; font: var(--t-head); color: var(--text); animation: hq-in var(--dur-3) var(--ease-out); }
.hq-a { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-field); background: var(--surface-2); font: var(--t-body); color: var(--text); animation: hq-in var(--dur-3) var(--ease-out); }
.hq-reveal { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: var(--r-field); background: var(--surface-2); font: var(--t-caption); color: var(--text-2); }
.hq-reveal span { flex: 1; }
.hq-rate { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hq-rate .btn { display: grid; gap: 2px; min-height: 60px; } .hq-rate small { font: var(--t-micro); opacity: .8; }
@keyframes hq-in { from { opacity: 0; transform: translateY(6px); } }
/* وقت التسجيل الشريط يبقى (القلم منه: كل كلمة تنربط بلحظتها)، وحبة «يسجّل» فوقه لا مكانه */
.stu:not(.pw).is-rec .rec-hint { bottom: calc(var(--pdf-bot) + 76px); }
.stu.pw.is-rec .rec-hint { margin-bottom: calc(var(--pdf-bot) + 76px); }
/* ST-5: على الجوالات الضيقة (SE) الشريط ما يطلع برا الشاشة: مسافات أقل وأقلام أنحف، ومساحة لمسها 44 باقية (components.css) */
/* ST-5 (مع ملاحظة المالك 9 نوفمبر: الدواير ما تدخل على بعض): الأقلام بعرض ثابت 34، والدائرة 24 وحلقتها 4، فبين كل دائرتين فراغ */
@media (max-width: 400px) { .stu .pentray { gap: 0; } .stu .pentray .ink-btn { width: 34px; } .stu .pentray .ink-done { padding: 0 12px; } .stu .pentray .pen { flex: none; width: 34px; } .stu .pentray .pen > i { width: 24px; height: 24px; } .stu .pentray .pen.on > i { box-shadow: var(--pen-ring-on-sm); } }
/* css/desktop.css */
/* منظّمي — الآيباد والحاسب («سماء واحدة»، design-reference/identity ui.css .sidebar/.sd-* و.wscr):
   الآيباد العمودي (768–1023) يأخذ كبسولة الجوال في الوسط (css/base.css)، ومن 1024 شريط جانبي زجاجي عائم دائماً ممدود:
   240 حتى 1279 و264 بعدها، 16 من الحواف، والمحتوى بجنبه فوق السماء. الصفحات بعمودين من 768. */

.side-nav { display: none; }

/* رابط التخطي: مخفي حتى يصله التركيز بلوحة المفاتيح */
.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
  background-color: var(--ink);
  color: var(--on-ink);
  font: var(--t-button);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; outline: none; box-shadow: var(--focus-ring); }

@media (min-width: 768px) {
  /* النموذج .vp-ipadp .scr: 40 فوق و24 جنب، والأسفل فوق الكبسولة */
  main { max-width: calc(var(--content-max) + 2 * var(--space-6)); padding: 40px var(--space-6) calc(150px + env(safe-area-inset-bottom)); }
  main.is-wide { max-width: calc(var(--content-wide) + 2 * var(--space-6)); }
  main.is-grid { max-width: calc(var(--wide-max) + 2 * var(--space-6)); }
  :is(#app-root, .pg-ghost-page) h1.type-h1 { font-size: var(--fs-display); line-height: 1.15; }

  .is-grid > * { grid-column: 1 / -1; min-width: 0; }
  /* اللوح السفلي بطاقة عائمة في الوسط، والإشعار فوق الكبسولة في الوسط */
  .sheet-panel { max-width: var(--sheet-max-w); margin-inline: auto; }
  .toast-container, .backup-reminder { inset-inline: var(--side-off) 0; align-items: center; }
  .toast-container { inset-block: auto calc(112px + env(safe-area-inset-bottom)); }
}

/* ══ ≥1024: الشريط الجانبي (S.sidebar) ══ */
@media (min-width: 1024px) {
  :root { --side-gap: 16px; --side-off: calc(var(--side-w) + 24px); }
  body { padding-inline-start: var(--side-off); }
  main { padding: 28px var(--space-6) 40px; }
  .toast-container { inset-block: auto var(--space-6); }
  .side-nav {
    position: fixed;
    inset-block: 16px;
    right: 16px;
    z-index: 90;
    width: var(--side-w);
    display: flex;
    flex-direction: column;
    padding: 20px 14px 14px;
    overflow-y: auto;
    scrollbar-width: none;
    border-radius: var(--r-sheet);
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav :is(ul, li) { margin: 0; padding: 0; list-style: none; }
  .sd-lock { display: block; padding: 4px 8px 18px; color: var(--text); text-decoration: none; }
  .sd-cmd { display: flex; align-items: center; gap: 10px; flex: none; height: 46px; margin-bottom: 18px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface-2) 60%, transparent); color: var(--text-3); font: var(--t-label); text-align: start; cursor: pointer; }
  .sd-cmd span { flex: 1; }
  .sd-cmd kbd { padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-kbd); color: var(--text-2); font: var(--t-caption); }
  .sd-nav { display: flex; flex-direction: column; gap: 2px; }
  .sd-nav .side-item { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: var(--r-row); color: var(--text-2); font: var(--t-nav); text-decoration: none; }
  .side-item.active { background: color-mix(in srgb, var(--surface-2) 85%, transparent); box-shadow: var(--rim); color: var(--rose); font-weight: 700; }
  .side-item.active .ic { color: var(--text); }
  .side-item :is(svg, .nav-moon) { flex: none; }
  .side-item .ring circle + circle { stroke: var(--text-2); }
  .sd-count { position: static; margin: 0; margin-inline-start: auto; }
  .sd-bottom { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 16px; }
  .sd-plus { padding: 0 12px; color: var(--rose); font: var(--t-label); text-decoration: none; }
  .sd-plus[hidden] { display: none; }
  /* «أنا» = بطاقة قمرك؛ المفتوح عدسة مثل الأقسام */
  .sd-me { display: flex; align-items: center; gap: 14px; padding: 16px 12px; border-radius: var(--r-lens); background: color-mix(in srgb, var(--surface-2) 55%, transparent); color: var(--text); text-decoration: none; }
  .sd-me b { display: block; font: var(--t-nav); font-weight: 700; }
  .sd-me.active b { color: var(--rose); }
  .sd-me small { display: block; color: var(--text-2); font: var(--t-caption); white-space: nowrap; }
  .pts3 { display: flex; gap: 6px; margin-top: 6px; }
  .pts3 .pt { --pt: 8px; }
  .side-nav :focus-visible { outline: none; box-shadow: var(--focus-ring); }
}
@media (min-width: 1280px) {
  :root { --side-w: 264px; --side-off: calc(var(--side-w) + 32px); }
  main { max-width: calc(var(--content-max) + 2 * var(--space-8)); padding: 40px var(--space-8) 48px; }
  main.is-wide { max-width: calc(var(--content-wide) + 2 * var(--space-8)); }
  main.is-grid { max-width: calc(var(--wide-max) + 2 * var(--space-8)); }
}

/* شريط تمرير رفيع بألوان النظام للأجهزة بمؤشر */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .sd-nav .side-item:hover:not(.active), .list-row:hover, .file-row:hover { background-color: var(--muted-bg); }
}

/* css/wear.css */
/* منظّمي — «ثيمات من تراثنا» تلبس التطبيق كله (design-reference/themes، اعتمده المالك 22 أكتوبر: الليل 13:01 و«فجر» 13:34).
   js/wear.js يضع data-wear=<الثيم> على <html>: الثيم يبدّل متغيرات نظام التصميم نفسها (اللون الأساسي، الأسطح، الخطوط، النجوم)،
   ونقشه على شريط التنقل واللوح والشريط الجانبي، ومشهد منطقته في الرئيسية و«أنا» فقط (ما نشتت الطالب). data-theme يختار السماء:
   الأسود الخالص والليلي يرسمان المنطقة ظلاً تحت القمر، و«فجر» بألوان مادتها تحت شمس الصبح. الزينة (لون القمر ورفقاء السماء) من js/wear.js أيضاً. */

/* الليلي والأسود الخالص (:not(dawn)): الأسطح والنجوم تميل للون المنطقة. «فجر» تحت: أسطحه ونصه لمحادثة المظهر الفاتح، والثيم لونه ونقشه ومشهده فقط */
/* طبقات المشهد (scenes.js): الليل = ظل واحد بلون أرض الثيم وحافته بلونه (كما اعتمده المالك)، والقيم كلها من متغيرات الثيم */
:root[data-wear] {
  --wear-lit: var(--wear-ground); --wear-hole: var(--sky-0);
  --wear-far: var(--wear-ink); --wear-far-a: .07;
  --wear-rim: var(--wear-ink); --wear-rim-a: .55;
  --wear-m1: var(--wear-ink); --wear-m2: var(--wear-ink2); --wear-m3: var(--wear-ink3, var(--wear-ink)); --wear-m4: var(--wear-ink4, var(--wear-ink2));
  --wear-edge: inset 0 1px 0 color-mix(in srgb, var(--wear-ink) 30%, transparent);
}
.ws-far { fill: var(--wear-far); opacity: var(--wear-far-a); }
.ws-lit { stop-color: var(--wear-lit); }
.ws-gnd { stop-color: var(--wear-ground); }
.ws-rim { fill: none; stroke: var(--wear-rim); stroke-width: 1.1; stroke-opacity: var(--wear-rim-a); stroke-linejoin: round; }

:root:not([data-theme="dawn"])[data-wear="najdi"] {
  --rose: #E7A673; --on-rose: #3A1E0C; --mark-dot: #E7A673; --star: #F3E4CC;
  --surface: #17120E; --surface-2: #211913; --surface-3: #2B221A; --line: #382B20;
  --wear-ink: #E7A673; --wear-ink2: #F3E4CC; --wear-ground: #120D09;
}
:root:not([data-theme="dawn"])[data-wear="hijazi"] {
  --rose: #72D0C0; --on-rose: #0B2A26; --mark-dot: #72D0C0; --star: #DDF3EF;
  --surface: #0F1716; --surface-2: #152120; --surface-3: #1C2B29; --line: #233634;
  --wear-ink: #72D0C0; --wear-ink2: #F2EFE8; --wear-ground: #0A1110;
}
:root:not([data-theme="dawn"])[data-wear="sadu"] {
  --rose: #EF7A72; --on-rose: #3A0D0D; --mark-dot: #EF7A72; --star: #F6E7E2;
  --surface: #170F10; --surface-2: #221617; --surface-3: #2D1D1F; --line: #3A262A;
  --wear-ink: #EF7A72; --wear-ink2: #F2EFE8; --wear-ground: #120A0B;
}
:root:not([data-theme="dawn"])[data-wear="asiri"] {
  --rose: #F4C845; --on-rose: #3A2C05; --mark-dot: #F4C845; --star: #F4EED8;
  --surface: #121410; --surface-2: #1A1D16; --surface-3: #23271D; --line: #2F3426;
  --wear-ink: #F4C845; --wear-ink2: #6CC283; --wear-ink3: #E9685A; --wear-ink4: #6E9BE8; --wear-ground: #0C0E0A;
}
:root:not([data-theme="dawn"])[data-wear="ula"] {
  --rose: #F3A57E; --on-rose: #3A1A0C; --mark-dot: #F3A57E; --star: #F2E2F0;
  --surface: #15111A; --surface-2: #1E1825; --surface-3: #282031; --line: #352A3F;
  --wear-ink: #F3A57E; --wear-ink2: #C9A0D8; --wear-ground: #100C14;
}
:root:not([data-theme="dawn"])[data-wear="gulf"] {
  --rose: #A2D6EE; --on-rose: #0A2433; --mark-dot: #A2D6EE; --star: #EEF4F8;
  --surface: #0D141B; --surface-2: #131C26; --surface-3: #1A2532; --line: #233241;
  --wear-ink: #A2D6EE; --wear-ink2: #F1ECE4; --wear-ground: #08101A;
}
:root:not([data-theme="dawn"])[data-wear="qahwa"] {
  --rose: #BFD27F; --on-rose: #232B0A; --mark-dot: #BFD27F; --star: #F1E6D6;
  --surface: #15110D; --surface-2: #1F1813; --surface-3: #29211A; --line: #352A20;
  --wear-ink: #BFD27F; --wear-ink2: #C89A6A; --wear-ground: #100C09;
}
:root:not([data-theme="dawn"])[data-wear="harrah"] {
  --rose: #FF8452; --on-rose: #3A1205; --mark-dot: #FF8452; --star: #FFE1D2;
  --surface: #131212; --surface-2: #1B1A19; --surface-3: #242221; --line: #2F2C2A;
  --wear-ink: #FF8452; --wear-ink2: #8A817C; --wear-ground: #0B0A0A;
}

/* أفق المنطقة: أسفل السماء الثابتة، يعتم معها في صفحات القراءة */
.wear-hz { position: absolute; left: 0; right: 0; bottom: 0; height: 132px; pointer-events: none; }
.wear-hz svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
/* على الجوال الأفق داخل تلاشي الأسفل (فوق المحتوى)؛ على الحاسب في السماء */
.sky > .wear-hz, .sky > .wear-glow { display: none; }
/* الحاسب: مشهد الرئيسية يظهر ويختفي بالشفافية مع انزياح السماء، لا فجأة */
@media (min-width: 1024px) {
  .sky > .wear-hz, .sky > .wear-glow { display: block; transition: opacity var(--dur-2) var(--ease-out); }
  .sky > .wear-hz { height: 96px; opacity: 0.6; }
}
/* الجوال: الأفق يقف فوق شريط «اكتب أي شي» (أعلاه 82px من تحت + الحافة الآمنة)، فلا شي منه خلف الأزرار */
.bottomfade .wear-hz { bottom: calc(env(safe-area-inset-bottom, 0px) + 140px); height: 96px; opacity: 0.8; }
.bottomfade .wear-glow { bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); }
/* ما نشتت الطالب: أفق الجوال في الرئيسية فقط (التلاشي الطويل)، وباقي الصفحات يكفيها اللون والنقش */
.bottomfade:not(.tall) .wear-hz, .bottomfade:not(.tall) .wear-glow { display: none; }
.bottomfade .wear-hz svg { width: 100%; height: 100%; }
.wear-glow { position: absolute; left: -10%; right: -10%; bottom: -40px; height: 300px; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 100%, color-mix(in srgb, var(--wear-haze, var(--wear-ink)) var(--wear-haze-a, 15%), transparent), transparent 72%); }

/* نقش الثيم: شريط رفيع على كبسولة التنقل، وفوق اللوح، وأسفل الشريط الجانبي */
:root[data-wear] .mobile-nav-list::after { content: ''; position: absolute; left: 40px; right: 40px; top: 1px; height: 4px; z-index: 0;
  background: var(--wear-motif) center / auto 4px repeat-x; opacity: 0.6; pointer-events: none; }
:root[data-wear] .sheet-panel::before { content: ''; display: block; height: 8px; margin: 0 60px 12px;
  background: var(--wear-motif) center / auto 8px repeat-x; opacity: 0.85; }
:root[data-wear] .side-nav::after { content: ''; position: absolute; left: 28px; right: 28px; top: 14px; height: 6px;
  background: var(--wear-motif) center / auto 6px repeat-x; opacity: 0.75; pointer-events: none; }
/* أطر القوائم والملخصات: حافة علوية بلون الثيم */
:root[data-wear] .list-panel, :root[data-wear] .mz-panel, :root[data-wear] .mz-box { box-shadow: var(--wear-edge); }
.wear-mehz { position: absolute; left: -16px; right: -16px; top: 92px; height: 96px; opacity: 0.85; z-index: 0; pointer-events: none; }
:root[data-wear] .mz-hero .mz-moonbox { position: relative; z-index: 2; }
.wear-mehz svg { width: 100%; height: 100%; display: block; }

/* ===== «فجر» (المظهر الفاتح، data-theme="dawn"): نفس الثيمات تحت شمس الصبح =====
   الليل يرسم المنطقة ظلاً تحت القمر؛ الفجر يرسمها بألوان مادتها الحقيقية: طين نجد، حجر جدة الأبيض ورواشينه الخضراء،
   بيت الشَّعر الأسود ونار المعاميل في بابه، حجر عسير بإطارات القط، صخر العلا الأحمر، فيروز الخليج وأشرعة البوم،
   نخل الأحساء الأخضر وقبة قصر إبراهيم، وبازلت خيبر بفوهاته. القمة مضيئة وحافتها مشمسة، والقاعدة تذوب في ضباب الكثبان.
   السماء والأسطح والنص لـ«فجر» نفسه (محادثة المظهر الفاتح)؛ الثيم هنا: اللون الأساسي، والنقش بألوان المادة، والمشهد، ولون الضباب. */
:root[data-theme="dawn"][data-wear] {
  --on-rose: #FFFFFF;
  --wear-far-a: .5; --wear-rim-a: .85; --wear-haze-a: 42%;
  --wear-edge: var(--rim);
}
:root[data-theme="dawn"][data-wear="najdi"] {
  --rose: #94542A; --mark-dot: #94542A;
  --wear-lit: #DDA36C; --wear-ground: #B27449; --wear-far: #D9AFA2; --wear-hole: #5E3520; --wear-rim: #FFEBD2;
  --wear-ink: #6E3D20; --wear-ink2: #F6E3C8; --wear-m1: #A8643A; --wear-m2: #5E3520; --wear-haze: #F4C08A;
}
:root[data-theme="dawn"][data-wear="hijazi"] {
  --rose: #1D6E62; --mark-dot: #1D6E62;
  --wear-lit: #FBF4EA; --wear-ground: #D9C6B0; --wear-far: #CDBBD0; --wear-hole: #5A4636; --wear-rim: #9C8468; --wear-rim-a: .7;
  --wear-ink: #23806D; --wear-ink2: #6B4A2E; --wear-m1: #23806D; --wear-m2: #8A5A35; --wear-haze: #BDE5DA;
}
:root[data-theme="dawn"][data-wear="sadu"] {
  --rose: #A1323A; --mark-dot: #A1323A;
  --wear-lit: #503A33; --wear-ground: #2C211E; --wear-far: #DDB596; --wear-far-a: .7; --wear-hole: #F7C27E; --wear-rim: #F4B486; --wear-rim-a: .7;
  --wear-ink: #C03A3F; --wear-ink2: #F8EDE0; --wear-m1: #B23C40; --wear-m2: #2C211E; --wear-haze: #F5AE9E;
}
:root[data-theme="dawn"][data-wear="asiri"] {
  --rose: #85650A; --mark-dot: #85650A;
  --wear-lit: #A89A89; --wear-ground: #75695D; --wear-far: #9DB08E; --wear-far-a: .6; --wear-hole: #3A332D; --wear-rim: #F6EBDD;
  --wear-ink: #E5B023; --wear-ink2: #2F9E5B; --wear-ink3: #D8452F; --wear-ink4: #2F64C8; --wear-stripe: #FFFFFF;
  --wear-m1: #B8860B; --wear-m2: #2F7A45; --wear-m3: #B23F32; --wear-m4: #2F5FA8; --wear-haze: #D2E6B4;
}
:root[data-theme="dawn"][data-wear="ula"] {
  --rose: #9E4B2B; --mark-dot: #9E4B2B;
  --wear-lit: #E89662; --wear-ground: #B9633C; --wear-far: #EAB59C; --wear-hole: #7A3A22; --wear-rim: #FFE2C6;
  --wear-ink: #84391F; --wear-ink2: #FFE3CC; --wear-m1: #B05A34; --wear-m2: #7A3A22; --wear-haze: #F8B490;
}
:root[data-theme="dawn"][data-wear="gulf"] {
  --rose: #22648A; --mark-dot: #22648A;
  --wear-lit: #6CC0CF; --wear-ground: #2F8098; --wear-rim: #FFFFFF; --wear-rim-a: .75;
  --wear-ink: #FFFFFF; --wear-ink2: #FFF7EA; --wear-boat: #87573A; --wear-sail: #FFF6E8;
  --wear-m1: #2E7299; --wear-m2: #B8914A; --wear-haze: #A6DCE4;
}
:root[data-theme="dawn"][data-wear="qahwa"] {
  --rose: #56691B; --mark-dot: #56691B;
  --wear-lit: #5E9C43; --wear-ground: #6A4F35; --wear-bld: #F3E7D3; --wear-far: #E2C58E; --wear-far-a: .75; --wear-hole: #6A4F35; --wear-rim: #FFF1D4; --wear-rim-a: .7;
  --wear-ink: #4A3523; --wear-ink2: #E9D3A8; --wear-m1: #4F8A36; --wear-m2: #8A5A2C; --wear-haze: #E9D68E;
}
:root[data-theme="dawn"][data-wear="harrah"] {
  --rose: #AE4118; --mark-dot: #AE4118;
  --wear-lit: #776A63; --wear-ground: #3D3532; --wear-far: #BFA3AA; --wear-hole: #2A2422; --wear-rim: #F7BFA4; --wear-rim-a: .8;
  --wear-ink: #F0743E; --wear-ink2: #E8CFC6; --wear-m1: #BF4A1E; --wear-m2: #4A403C; --wear-haze: #F2A88E;
}
/* المشهد يطلع من ضباب الكثبان: قاعدته تذوب، فلا حد أفقي مقطوع فوق «اكتب أي شي» */
:root[data-theme="dawn"] .wear-hz { -webkit-mask-image: linear-gradient(to top, transparent 0, black 38%); mask-image: linear-gradient(to top, transparent 0, black 38%); }
:root[data-theme="dawn"] .bottomfade .wear-hz { opacity: 1; }
@media (min-width: 1024px) { :root[data-theme="dawn"] .sky > .wear-hz { height: 132px; opacity: 1; } }
:root[data-theme="dawn"] .bottomfade .wear-glow { bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); height: 260px; }
/* «أنا»: المشهد على الجانبين فقط والوسط تحت القمر صافي، وقاعدته تذوب في ضباب الصبح بلون المنطقة (لا حد مقطوع فوق «هلال») */
:root[data-theme="dawn"] .wear-mehz { opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, black 0, black 20%, transparent 34%, transparent 66%, black 80%, black 100%), linear-gradient(to top, transparent 0, black 34%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, black 0, black 20%, transparent 34%, transparent 66%, black 80%, black 100%), linear-gradient(to top, transparent 0, black 34%);
  mask-composite: intersect; }
:root[data-theme="dawn"][data-wear] .mz-hero::before { content: ''; position: absolute; inset-inline: -16px; bottom: -18px; height: 100px; z-index: 0; pointer-events: none;
  background: radial-gradient(62% 80% at 50% 100%, color-mix(in srgb, var(--wear-haze) 75%, transparent), transparent 78%); }
/* النقش في الفجر يمشي مع عدسة التبويب المفتوح (شريط منسوج قصير أعلى العدسة ينزلق معها)، ومكان مقبض اللوح، وأعلى الشريط الجانبي قطعة قصيرة */
:root[data-theme="dawn"][data-wear] .mobile-nav-list::after { left: auto; right: 23px; top: 11px; width: calc(var(--tw) - 34px); height: 4px; z-index: 2; opacity: 1;
  background-size: auto 4px; transform: translateX(calc(var(--i) * var(--tw) * -1)); transition: transform var(--pg-bar) var(--ease-spring); }
:root[data-theme="dawn"][data-wear] .mobile-nav-list:not(:has(.active))::after { opacity: 0; }
:root[data-theme="dawn"][data-wear] .sheet-panel::before { width: 72px; margin: 0 auto 12px; opacity: 1; }
:root[data-theme="dawn"][data-wear] .side-nav::after { left: 34%; right: 34%; opacity: 1; }
/* خارج الرئيسية مخفي (بعد قواعد «فجر» اللي تعطيه شفافيته) */
@media (min-width: 1024px) { :root .sky:not([data-home]) > :is(.wear-hz, .wear-glow) { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="dawn"][data-wear] .mobile-nav-list::after, .sky > .wear-hz, .sky > .wear-glow { transition: none; } }

/* ===== رفقاء السماء (js/wear.js): في الفراغ تحت قوس الرئيسية، لا خلف النصوص. «فجر»: النجم أبيض بهالة بنفسجية والشهاب ذهبي ===== */
:root {
  --comp-star: #FFE7B0; --comp-cluster: #DCE8FF; --comp-meteor: #FFFFFF;
  --comp-star-halo: var(--comp-star); --comp-cluster-halo: var(--comp-cluster); --comp-a1: .16; --comp-a2: .3; --comp-x: .6;
}
:root[data-theme="dawn"] {
  --comp-star: #FFFFFF; --comp-cluster: #FFFFFF; --comp-meteor: #C98A2E;
  --comp-star-halo: #6F63B5; --comp-cluster-halo: #6F63B5; --comp-a1: .12; --comp-a2: .22; --comp-x: .9;
}
.wear-comp { position: absolute; inset: 0; pointer-events: none; }
.wear-comp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wear-comp .s { fill: var(--comp-star); } .wear-comp .sh { fill: var(--comp-star-halo); }
.wear-comp .c { fill: var(--comp-cluster); } .wear-comp .ch { fill: var(--comp-cluster-halo); }
.wear-comp .a1 { opacity: var(--comp-a1); } .wear-comp .a2 { opacity: var(--comp-a2); }
.wear-comp .x { stroke: var(--comp-star); opacity: var(--comp-x); }
.wear-comp stop { stop-color: var(--comp-meteor); stop-opacity: 0; } .wear-comp stop + stop { stop-opacity: .85; }
@media print { .wear-hz, .wear-glow, .wear-comp { display: none; } }
.mz-me.wide .wear-mehz { left: 0; right: 0; } .mz-ipadp .wear-mehz { left: -24px; right: -24px; }
/* css/coach-page.css */
/* منظّمي — صفحة «مدربك» (المالك 2 نوفمبر، «اعتمد» 19:43): شاشة كاملة «سماء المدرب» (design-reference/coach-page، ب)،
   ورد «هادي» (design-reference/coach-reply، 1). اسمه «شهاب AI» (المالك 7 نوفمبر)، ويدخلها من الشهاب في قلب الشريط (js/meteor-sheet.js).
   html.coach-pg والمحادثة مفتوحة (cmdSheet.head).
   متغيرات نظام التصميم فقط، والحركة transform/opacity. */
/* زر الرجوع وزر الإرسال لصفحة المدرب بس (cmdSheet واحد لكل المحادثات) */
.cp-back, .cp-send { display: none; }
/* شاشة كاملة: لا لوح ولا مقبض ولا رئيسية فوقه */
html.coach-pg .cmd.is-th .cmd-panel.glass { top: 0; padding-top: env(safe-area-inset-top); border-radius: var(--r-none); background: var(--bg-base); }
html.coach-pg .cmd.is-th .cmd-grab, html.coach-pg .cmd.is-th .cmd-glow, html.coach-pg .cmd.is-th .cmd-day, html.coach-pg .cmd.is-th .cmd-streak { display: none; }

/* الرأس: رجوع يمين، «مدربك» في النص، محادثة جديدة يسار، بلا خط تحته */
html.coach-pg .cmd-th-h { height: 56px; padding: 0 var(--space-2); gap: 0; border-bottom: 0; }
html.coach-pg .cmd-th-h > .ch-mark { display: none; }
html.coach-pg .cp-back, html.coach-pg .cmd .cmd-th-h .cmd-new { flex: none; width: 44px; height: 44px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text); }
html.coach-pg .cmd-th-h .cmd-who { flex: 1; align-items: center; margin: 0; }
html.coach-pg .cmd-who b { display: inline-flex; align-items: center; gap: 6px; font: var(--t-subtitle); font-weight: 700; }
html.coach-pg .cmd-who small { font: var(--t-caption); color: var(--text-3); }
html.coach-pg .cmd-who small .ic { display: none; }

/* الخانة: كبسولة أعلى، + يمين، والمايك دائرة بلون النص، والنجمة داخلها تروح */
html.coach-pg .cmd-in { height: 56px; margin: 0 var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); padding: 0 var(--space-2); gap: var(--space-1);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); box-shadow: var(--shadow-soft); }
html.coach-pg .cmd-in > .ch-mark { display: none; }
html.coach-pg .cmd-in .cmd-clip { order: -1; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); }
html.coach-pg .cmd-in input { padding-inline: var(--space-2); }
html.coach-pg .cmd-in .cmd-mic { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--text); color: var(--bg-base); }

/* فاضية: ترحيب في نص الشاشة، والاقتراحات تحت عند الخانة */
html.coach-pg .cmd.is-th .cmd-body { display: flex; flex-direction: column; padding: 0 var(--space-4) var(--space-3); }
html.coach-pg .cmd-th { display: flex; flex-direction: column; flex: 1; }
html.coach-pg .cp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; padding: var(--space-8) 0; }
html.coach-pg .cp-empty h2 { margin: var(--space-3) 0 0; font: var(--t-title); font-weight: 700; color: var(--text); }
html.coach-pg .cp-empty p { margin: 0; font: var(--t-body); color: var(--text-2); }
html.coach-pg .cp-sugg { margin: auto 0 0; }
html.coach-pg .cp-sugg .list-row { width: 100%; border: 0; background: none; color: var(--text); font: inherit; text-align: start; }
html.coach-pg .cp-sugg .cp-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-3); }

/* ب: سماء المدرب. أفق ناعم فوق الصفحة، والترحيب تحته مع نجمته الكبيرة، والاقتراحات بطاقات صغيرة تتمرر */
html.coach-pg .cmd.is-th .cmd-panel.glass { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-horizon) 30%, var(--bg-base) 56%); }
html.coach-pg .cp-empty { justify-content: flex-start; padding-top: var(--space-10); }
html.coach-pg .cp-empty .guide { filter: drop-shadow(0 0 24px var(--star)); }
html.coach-pg .cp-empty h2 { font: var(--t-display); font-weight: 700; }
html.coach-pg .cp-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin: auto calc(-1 * var(--space-4)) 0; padding: 0 var(--space-4); }
html.coach-pg .cp-chips button { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 156px; padding: var(--space-3); border: 1px solid var(--line);
  border-radius: var(--r-panel); background: var(--surface-2); color: var(--text); font: var(--t-label); font-weight: 600; text-align: start; }
html.coach-pg .cp-chips button small { font: var(--t-caption); font-weight: 400; color: var(--text-3); }
html.coach-pg .cp-chips .cp-ic { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: var(--space-2); border-radius: var(--r-pill); background: var(--surface-3); }
/* المسافة الجانبية مرة وحدة (في .cmd-th) عشان الاقتراحات بعرض الخانة */
html.coach-pg .cmd.is-th .cmd-body { padding-inline: 0; }
html.coach-pg .cmd-th { padding: var(--space-2) var(--space-4) var(--space-3); }
html.coach-pg .cp-sugg { margin-bottom: 0; }
/* ب في المحادثة: الأفق يقصر لورا الرأس بس، والكلام على خلفية هادية */
html.coach-pg .cmd.is-th .cmd-panel.glass:not(:has(.cp-empty)) { background: linear-gradient(180deg, var(--sky-top) 0%, var(--bg-base) 18%); }

/* الجولة 2: فقاعته ورد المدرب والأزرار */
/* فقاعته مثل ChatGPT: على اليسار، زاوية صغيرة جهة الكتابة، مسافة أوسع */
html.coach-pg .bub-me { max-width: 78%; margin: var(--space-4) auto var(--space-5) 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-panel); border-start-end-radius: var(--radius-xs);
  background: var(--surface-3); font: var(--t-body); line-height: 1.6; }
/* رد المدرب: نجمته واسمه فوقه مثل Gemini، والنص أريح للقراءة */
html.coach-pg .cp-who { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font: var(--t-label); font-weight: 700; color: var(--text); }
html.coach-pg .cmd-ai .cw-say, html.coach-pg .cmd-ai .ans { font: var(--t-body); font-size: var(--fs-read); line-height: 1.8; color: var(--text); }
/* الاقتراحات كبسولات بإطار */
html.coach-pg .cmd-chips { gap: var(--space-2); margin-top: var(--space-4); }
html.coach-pg .cmd-chips .tag-chip { height: 40px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: none; color: var(--text); font: var(--t-label); }
/* صف الأزرار تحت الرد */
html.coach-pg .cp-acts { display: flex; gap: var(--space-1); margin: var(--space-3) calc(-1 * var(--space-2)) 0; }
html.coach-pg .cp-act { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); }
/* الخانة مثل Gemini */
html.coach-pg .cmd-in .cmd-clip { order: -1; background: none; }
html.coach-pg .cmd-in .cmd-mic { order: 1; background: none; color: var(--text-2); }
html.coach-pg .cp-send { order: 2; flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--text); color: var(--bg-base); }
html.coach-pg .cp-send .ic { transform: scaleX(-1); }


/* مشترك: نص مقروء، الافتتاحية أوضح، المصطلح سطر وشرحه تحته */
html.coach-pg .cmd-ai .cw-say { font: var(--t-body); font-size: var(--fs-read); line-height: 1.85; color: var(--text); }
html.coach-pg .cw-say .cw-desc { display: block; color: var(--text-2); font-size: var(--fs-read-sm); line-height: 1.7; }
html.coach-pg .cw-say .cw-term { display: block; font-weight: 700; }
html.coach-pg .cw-say li.has-term + li.has-term { margin-top: var(--space-3); }

/* 1 «هادي» مثل Claude: مسافات واسعة، عناوين متوسطة، نقاط نجمية صغيرة، أرقام خفيفة */
html.coach-pg .cw-say .cw-h { margin-top: var(--space-6); font: var(--t-subtitle); font-weight: 700; }
html.coach-pg .cw-say ul.cw-list { list-style: none; padding-inline-start: 0; }
html.coach-pg .cw-say ul.cw-list li { position: relative; padding-inline-start: var(--space-5); }
html.coach-pg .cw-say ul.cw-list li::before { content: ''; position: absolute; inset-inline-start: var(--space-1); top: 0.8em; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--star); }
html.coach-pg .cw-say .cw-n { min-width: 1.6em; font-weight: 600; }
html.coach-pg .cw-say .cw-lead { font-size: var(--fs-read-lead); font-weight: 600; line-height: 1.75; }
html.coach-pg .cw-say > p + p { margin-top: var(--space-3); }
html.coach-pg .cw-say .cw-ask { margin-top: var(--space-5); font-weight: 600; }
/* الكلام يختفي بنعومة تحت الرأس بدل ما يظهر من وراه */
html.coach-pg .cmd.is-th .cmd-body { -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--space-5)); mask-image: linear-gradient(to bottom, transparent 0, black var(--space-5)); }

/* صفحة المدرب المعتمدة (سماء المدرب، نفس share.css) */
html.coach-pg .cmd.is-th .cmd-scrim { display: none; }
html.coach-pg .cmd.is-th .cmd-panel.glass { opacity: 1; background: none; }
html.coach-pg .cmd.is-th .cmd-panel.glass::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--bg-base) 18%); }
html.coach-pg .cmd.is-th:has(.cp-empty) .cmd-panel.glass::before { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-horizon) 30%, var(--bg-base) 56%); }
html.coach-pg .cmd.is-th.is-open .cmd-th-h { animation: none; }
html.coach-pg .cmd.is-th.is-closing :is(.cmd-th-h, .cmd-body, .cmd-glow), html.coach-pg .cmd.is-th.is-closing .cmd-in { opacity: 1; transform: none; transition: none; }


/* الآيباد (ع10، «اعتمد» 8 نوفمبر): نفس شكل الجوال في عمود بعرض مريح */
@media (min-width: 768px) and (max-width: 1023.98px) {
  html.coach-pg .cmd.is-th .cmd-th-h, html.coach-pg .cmd.is-th .cmd-body > *, html.coach-pg .cmd-in { width: min(640px, calc(100% - 2 * var(--space-4))); margin-inline: auto; }
  html.coach-pg .cmd-in { margin-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
}
/* «يفكر…» لين يبدأ الرد (AI-2، «اعتمد» 8 نوفمبر): الصندوق الحي فاضي = ينتظر الخادم */
.cw-live:empty { min-height: 48px; display: flex; align-items: center; gap: var(--space-2); color: var(--text-2); font: var(--t-label); }
.cw-live:empty::before { content: ''; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--moon); animation: cw-think var(--dur-3) var(--ease-out) infinite alternate; }
.cw-live:empty::after { content: 'يفكر…'; animation: cw-think var(--dur-3) var(--ease-out) infinite alternate; }
@keyframes cw-think { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cw-live:empty::before, .cw-live:empty::after { animation: none; } }
/* css/b2-study-me.css */
/* منظّمي — شاشات الدفعة 2 لفريق study-me (design/batch2-2026-11-08): منقذ الفصل، اسمعها، إضافات «أنا» و«الإعدادات»،
   شهاب AI العريض، «اشترك» من الموقع، والحالات الفاضية. متغيرات نظام التصميم فقط، والحركة transform/opacity، وRTL،
   والمظاهر الثلاثة (أسود خالص وليلي من المتغيرات، وفجر بقواعد [data-theme="dawn"] تحت). */

/* ===== منقذ الفصل: سطر الغياب الجمري (rs1) واللوح (rs2) ===== */
.att-risk .att-dots i { border-radius: var(--r-pill); }
.att-risk .att-n > b { color: var(--ember); }
.att-risk .att-dots i.on { background: var(--ember); }
.rs-row .lead { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-row); background: var(--ember-wash); color: var(--ember); }
.rs-row .rt b { display: inline-flex; align-items: center; gap: var(--space-2); }
.rs-sheet { display: flex; flex-direction: column; gap: var(--space-4); }
.rs-h { display: flex; align-items: center; gap: var(--space-3); }
.rs-h h2 { flex: 1; display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--t-title); color: var(--text); }
.rs-x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); cursor: pointer; flex: none; }
.rs-sub { margin: 0; font: var(--t-body); color: var(--text-2); }
.rs-nums { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-panel); background: var(--surface-2); box-shadow: var(--ring-line); overflow: hidden; }
.rs-nums > div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); }
.rs-nums > div + div { border-inline-start: 1px solid var(--line); }
.rs-nums b { font: var(--t-num-l); color: var(--text); }
.rs-nums b small { font: var(--t-caption); color: var(--text-2); }
.rs-nums span { font: var(--t-caption); color: var(--text-2); }
.rs-sec { display: flex; align-items: baseline; justify-content: space-between; }
.rs-sec h3 { margin: 0; font: var(--t-head); color: var(--text); }
.rs-sec span { font: var(--t-caption); color: var(--text-2); }
.rs-n { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: var(--t-label); }
.rs-plan .mz-tog.on { background: var(--moon); }
.rs-plan .mz-tog.on::after { background: var(--bg-base); transform: translateX(-20px); }
.rs-cap { margin: 0; text-align: center; font: var(--t-caption); color: var(--text-2); }
.rs-ta { width: 100%; min-height: 180px; padding: var(--space-3); border: 0; border-radius: var(--r-field); background: var(--surface-2); box-shadow: var(--ring-line); color: var(--text); font: var(--t-body); resize: vertical; }
.rs-ex { display: flex; flex-direction: column; gap: var(--space-3); }

/* ===== اسمعها: الشريط بستة عناصر (ls1)، الكبسولة والمشغّل (ls2) ===== */
/* ستة عناصر ما تطلع برّا الشاشة الضيقة (320 وخط كبير): الشريط بعرض الشاشة ناقص الحواف، والأزرار تنكمش بالتساوي */
.pdock:has(.dk-listen) { max-width: calc(100vw - 2 * var(--space-4)); }
.pdock:has(.dk-listen) .dk { width: 58px; flex: 0 1 58px; min-width: 0; }
.pdock:has(.dk-listen) .dk.dk-ai { width: 62px; flex-basis: 62px; }
.pdock:has(.dk-listen) .dk > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-listen.on { color: var(--moon); }
.ls-pill, .ls-player { position: fixed; z-index: 40; inset-inline: var(--space-4); opacity: 0; transform: translateY(16px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-sheet); }
.ls-pill.is-in, .ls-player.is-in { opacity: 1; transform: none; }
.ls-pill { bottom: calc(env(safe-area-inset-bottom) + 96px); display: flex; align-items: center; gap: var(--space-2); max-width: 420px; margin-inline: auto; padding: var(--space-2); border-radius: var(--r-pill); background: var(--glass-solid); box-shadow: var(--shadow-float); }
.ls-pill.is-under { opacity: 0; transform: translateY(16px); pointer-events: none; }
.ls-pill-main { flex: 1; display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 0 var(--space-2); border: 0; background: none; color: var(--text); text-align: start; cursor: pointer; }
.ls-wave { color: var(--moon); }
.ls-pt { display: flex; flex-direction: column; min-width: 0; }
.ls-pt b { font: var(--t-label); color: var(--text); }
.ls-pt small { font: var(--t-caption); color: var(--text-2); }
.ls-pp { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: var(--text); color: var(--bg-base); cursor: pointer; flex: none; }
.ls-player { bottom: calc(env(safe-area-inset-bottom) + var(--space-4)); max-width: 520px; margin-inline: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); border-radius: var(--r-sheet); background: var(--glass-solid); box-shadow: var(--shadow-sheet); }
.ls-ph { display: flex; align-items: center; gap: var(--space-3); }
.ls-ph .ls-pt { flex: 1; }
.ls-ph .ls-pt b { font: var(--t-title); }
.ls-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-sheet); color: var(--text); flex: none; }
.ls-x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); cursor: pointer; flex: none; }
.ls-bar { display: flex; align-items: center; gap: var(--space-3); font: var(--t-caption); color: var(--text-2); }
.ls-track { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.ls-track i { display: block; height: 100%; background: var(--moon); transform-origin: right center; transition: transform var(--dur-2) linear; }
.ls-ctl { display: flex; align-items: center; justify-content: space-between; }
.ls-ctl button { border: 0; background: none; color: var(--text); cursor: pointer; }
.ls-spd { min-width: 56px; height: 44px; padding: 0 var(--space-3); border-radius: var(--r-pill); background: var(--surface-sheet) !important; font: var(--t-label); }
.ls-sk, .ls-sl { width: 48px; height: 48px; display: grid; place-items: center; position: relative; }
.ls-sl.on { color: var(--moon); }
.ls-sl small { position: absolute; bottom: -6px; font: var(--t-micro); color: var(--moon); white-space: nowrap; }
.ls-big { width: 76px; height: 76px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--text) !important; color: var(--bg-base) !important; }
::highlight(ls-word) { background-color: var(--hl-y); color: var(--paper-ink); }
.ls-line { background: color-mix(in srgb, var(--paper-ink) 8%, transparent); border-radius: var(--radius-xs); }

/* ===== أنا: «وش استفدت هالشهر» (me-plus) و«حمّل التطبيق» و«ادعُ زميلك» (me-web) ===== */
.mx-plus { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-panel); background: var(--surface-2); box-shadow: var(--ring-line); }
.mx-plus .me-plus-h { display: flex; align-items: center; gap: var(--space-2); }
.mx-plus .me-plus-h b { font: var(--t-head); color: var(--text); }
.mx-renew { margin-inline-start: auto; font: var(--t-caption); color: var(--text-2); }
.mx-cap { margin: 0; font: var(--t-caption); color: var(--text-2); }
.mx-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.mx-nums > div { display: flex; flex-direction: column; gap: var(--space-1); }
.mx-nums b { font: var(--t-num-l); color: var(--text); }
.mx-nums small { font: var(--t-caption); color: var(--text-2); }
.mx-more { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1); font: var(--t-label); color: var(--text-2); text-decoration: none; }
.mx-inv { display: flex; flex-direction: column; gap: var(--space-4); }
.mx-inv .tp-link { display: inline-flex; align-items: center; gap: var(--space-2); border: 0; background: none; color: var(--text); font: var(--t-body); cursor: pointer; }

/* «اشترك» من الموقع (subscribe-web) */
.mx-sub { max-width: var(--content-wide); margin: 0 auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); }
.mx-top { display: flex; align-items: center; justify-content: space-between; }
.mx-brand { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--t-title); color: var(--text); }
.mx-who { font: var(--t-caption); color: var(--text-2); }
.mx-grid { display: grid; gap: var(--space-6); }
.mx-intro, .mx-buy { display: flex; flex-direction: column; gap: var(--space-4); }
.mx-h { margin: 0; font: var(--t-display); color: var(--text); }
.mx-p { margin: 0; font: var(--t-body); color: var(--text-2); }
.mx-sec { margin: 0; font: var(--t-head); color: var(--text); }
.mx-plan { text-align: start; }
.mx-plan .rt b { display: inline-flex; align-items: center; gap: var(--space-2); }
.mx-radio { width: 22px; height: 22px; border-radius: var(--r-pill); box-shadow: var(--ring-text3-2); flex: none; }
.mx-plan.on .mx-radio { box-shadow: var(--ring-on-7); }
.mx-price { display: flex; flex-direction: column; align-items: flex-end; }
.mx-price b { font: var(--t-head); color: var(--text); }
.mx-price small { font: var(--t-caption); color: var(--text-2); }
.mx-fine { display: flex; justify-content: center; gap: var(--space-4); margin: 0; font: var(--t-caption); color: var(--text-2); }
.mx-fine span { display: inline-flex; align-items: center; gap: var(--space-1); }
.mx-store { margin: 0; text-align: center; font: var(--t-caption); color: var(--text-3); }
@media (min-width: 900px) { .mx-grid { grid-template-columns: 1.1fr 1fr; align-items: start; } .mx-sub { padding: var(--space-8); } }

/* ===== الإعدادات: الصفوف الجديدة ===== */
.sx-rem .rt small { display: inline-flex; align-items: center; gap: var(--space-1); }
.sx-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--text-3); flex: none; }
.sx-dot.on { background: var(--semantic-success); }
.sx-try { flex: none; }
.sx-badge { min-width: 24px; height: 24px; padding: 0 var(--space-2); display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--rose); color: var(--on-rose); font: var(--t-caption); font-weight: 700; flex: none; }
.sx-rt, .sx-ram { display: flex; flex-direction: column; gap: var(--space-4); }
.sx-ck { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-pill); }
.sx-ck.ok { background: var(--success-bg); color: var(--success-fg); }
.sx-ck.warn { background: var(--warn-bg); color: var(--warn-fg); }
.sx-how, .sx-link { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; color: var(--text-2); font: var(--t-label); cursor: pointer; flex: none; }
.sx-link { text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.sx-li { color: var(--text-2); }

/* «أخفِ القمر»: القمر ونقاطه ولياليه تنشال، والمذاكرة تبقى */
html.mz-nomoon :is(.me-moon, .tp-moon, .td-nn-moon, .mz-moon-card, .mz-track, .mz-nightn, .nav-moon-n) { display: none !important; }

/* «علّمني التطبيق»: قصة بست بطاقات بشاشة كاملة */
.sx-teach { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; gap: var(--space-4); padding: calc(env(safe-area-inset-top) + var(--space-3)) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-4));
  background: var(--bg-base); opacity: 0; transform: translateY(24px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-sheet); }
.sx-teach.is-in { opacity: 1; transform: none; }
.sx-bars { display: flex; gap: var(--space-1); }
.sx-bars i { flex: 1; height: 3px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; position: relative; }
.sx-bars i::after { content: ''; position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-3) var(--ease-out); }
.sx-bars i.done::after, .sx-bars i.on::after { transform: scaleX(1); }
.sx-th { display: flex; align-items: center; justify-content: space-between; font: var(--t-caption); color: var(--text-2); }
.sx-th > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.sx-th b { color: var(--text); font: var(--t-label); }
.sx-skip { min-height: 44px; padding: 0 var(--space-3); border: 0; background: none; color: var(--text-2); font: var(--t-label); cursor: pointer; }
.sx-card { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); animation: sx-in var(--dur-3) var(--ease-out); }
@keyframes sx-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.sx-card h2 { margin: 0; font: var(--t-display); color: var(--text); outline: none; }
.sx-card p { margin: 0; font: var(--t-body); color: var(--text-2); }
.sx-tf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.sx-art { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-height: 240px; padding: var(--space-4); border-radius: var(--r-panel); background: var(--surface-2); box-shadow: var(--ring-line); overflow: hidden; }
.sx-a-top { display: flex; gap: var(--space-2); }
.sx-a-ib { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); }
.sx-a-ib.on { background: var(--text); color: var(--bg-base); box-shadow: var(--halo-moon-6); }
.sx-a-row { display: flex; align-items: center; gap: var(--space-3); font: var(--t-head); color: var(--text); }
.sx-a-ln { display: block; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); }
.sx-a-pill { align-self: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--r-pill); background: var(--surface-3); font: var(--t-label); color: var(--text); }
.sx-a-scan { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-field); box-shadow: var(--ring-moon-2); }
.sx-a-dock { margin-top: auto; display: flex; justify-content: space-around; padding: var(--space-2); border-radius: var(--r-dock); background: var(--surface-3); color: var(--text-2); }
.sx-a-dock .on { color: var(--moon); }
.sx-a-abs { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-row); background: var(--ember-wash); }
.sx-a-dots { display: flex; gap: var(--space-1); }
.sx-a-dots i { width: 14px; height: 14px; border-radius: var(--radius-xs); background: var(--surface-3); }
.sx-a-dots i.on { background: var(--ember); }
.sx-a-res { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-row); background: var(--surface-3); font: var(--t-label); color: var(--text); }
.sx-a-guide { align-self: center; margin: var(--space-4) 0; }
.sx-a-t { font: var(--t-timer); color: var(--text); }
.sx-art .ember-t { color: var(--ember); }

/* ===== شهاب AI العريض (coach-wide): من 768 الصفحة كلها، ومن 1180 لوح «من وين يجاوب» ===== */
@media (min-width: 768px) {
  html.coach-wide .cmd.is-th .cmd-panel.glass { top: 0; bottom: 0; left: 0; right: 0; width: auto; max-width: none; border-radius: var(--r-none); background: var(--bg-base); box-shadow: none; }
  html.coach-wide .cmd.is-th :is(.cmd-th, .cmd-in, .cmd-th-h) { width: min(100% - 2 * var(--space-6), 760px); margin-inline: auto; }
  html.coach-wide .cmd.is-th .cmd-in { margin-bottom: var(--space-6); }
}
@media (min-width: 1024px) {
  html.coach-wide .cmd.is-wide.is-th .cmd-panel.glass { right: calc(var(--side-w) + 2 * var(--side-gap)); }
}
@media (min-width: 1180px) {
  html.coach-wide .cmd.is-th .cmd-panel.glass { padding-left: 400px; }
  .cw-aside { position: absolute; top: var(--space-6); left: var(--space-6); width: 340px; display: flex; flex-direction: column; gap: var(--space-3); opacity: 0; transform: translateX(-12px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out); }
  .cw-aside.is-in { opacity: 1; transform: none; }
}
.cw-h { margin: var(--space-2) var(--space-2) 0; font: var(--t-caption); color: var(--text-2); }
.cw-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-row); background: var(--surface-3); color: var(--text-2); }
.cw-list .list-row.on { background: var(--surface-3); }
.cw-list .rt { flex: 1; }

/* صفوف ألواحي: العنوان وتحته الشرح، وزر الصف بلا خلفية المتصفح */
:is(.rs-plan, .sx-rt, .sx-ram, .cw-list, .mx-ben, .mx-plans, .mx-inv, .rs-row) .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: start; }
:is(.rs-plan, .sx-rt, .sx-ram, .cw-list, .mx-plans, .mz-list, .me-list) button.list-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
:is(.rs-plan, .sx-rt, .sx-ram, .cw-list, .mx-plans) .rt b { font: var(--t-body); font-weight: 600; color: var(--text); }
:is(.rs-plan, .sx-rt, .sx-ram, .cw-list, .mx-plans) .rt small { font: var(--t-caption); color: var(--text-2); }
.es .es-go { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--r-pill); background: var(--text); color: var(--bg-base); font: var(--t-button); text-decoration: none; }

/* ===== الحالات الفاضية: سما الفصل، فرقك، الشوط الثاني ===== */
.es { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-2); text-align: center; animation: es-in var(--dur-3) var(--ease-out); }
@keyframes es-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.es-h { margin: var(--space-4) 0 0; font: var(--t-title); color: var(--text); }
.es-sub { margin: 0; font: var(--t-body); color: var(--text-2); }
.es-go { margin-top: var(--space-4); }
.es-field { position: relative; width: 100%; height: 300px; }
.es-cons { position: absolute; inset-inline-end: var(--x); top: var(--y); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); opacity: 0.55; }
.es-cons span { font: var(--t-caption); color: var(--text-2); }
.es-moons { display: flex; justify-content: center; gap: var(--space-10); }
.es-moons > div { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.es-moons small { font: var(--t-caption); color: var(--text-2); }
.es-q { width: 132px; height: 132px; display: grid; place-items: center; border-radius: var(--r-pill); border: 2px dashed var(--text-3); color: var(--text-2); font: var(--t-title); }
.es-dots { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.es-dots i { width: 12px; height: 12px; border-radius: var(--r-pill); background: var(--surface-3); }
.es-dots i.on { background: var(--moon); }
.es-left { margin: 0; font: var(--t-body); color: var(--text-2); }
.es-arcbox { position: relative; width: min(100%, 340px); }
.es-arc { display: block; width: 100%; height: auto; overflow: visible; }
.es-arc path { fill: none; stroke-width: 3; stroke-linecap: round; }
.es-arc-on { stroke: var(--moon); }
.es-arc-off { stroke: var(--text-3); stroke-dasharray: 3 7; }
.es-arc-pt { fill: var(--moon); }
.es-l { position: absolute; font: var(--t-caption); color: var(--text-2); }
.es-l-mid { top: -28px; left: 50%; transform: translateX(-50%); }
.es-l-start { bottom: -6px; right: 6%; }
.es-l-end { bottom: -6px; left: 6%; }
.es-near { margin: var(--space-2) 0 0; font: var(--t-caption); color: var(--text-2); }

/* ===== فجر: الأسطح الفاتحة من ألواحها ===== */
:root[data-theme="dawn"] :is(.ls-pill, .ls-player) { background: var(--surface-sheet); }
:root[data-theme="dawn"] :is(.mx-plus, .rs-nums, .sx-art) { background: var(--surface); box-shadow: var(--shadow-card); }
:root[data-theme="dawn"] .sx-teach { background: var(--bg-base); }
:root[data-theme="dawn"] .rs-plan .mz-tog.on::after { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  :is(.ls-pill, .ls-player, .sx-teach, .cw-aside, .sx-bars i::after) { transition: none; }
  :is(.sx-card, .es) { animation: none; }
}
/* css/social.css */
/* الدفعة 2 «اجتماعي»: مادة الدفعة، قروب المشروع، الشلة (design-reference/batch2/b). */

/* ===== مشترك */
.soc .list-panel { margin: 0 0 var(--space-3); }
.soc .list-row { width: 100%; gap: var(--space-3); color: var(--text); text-decoration: none; text-align: start; background: none; border: 0; font: inherit; }
.soc .list-row.short { min-height: 64px; }
.soc .list-row > .lead { width: 40px; display: grid; place-items: center; flex: none; }
.soc .list-row > .lead.bare { background: none; }
.soc .rt { flex: 1; min-width: 0; }
.soc .rt b { display: flex; align-items: center; gap: var(--space-2); font: var(--t-body); font-weight: 500; line-height: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc .rt small { display: flex; align-items: center; gap: 6px; font: var(--t-caption); color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.soc .rt small.wrap { white-space: normal; display: block; }
.soc .ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.soc .chev { color: var(--text-3); flex: none; }
.soc .t2 { color: var(--text-2); }
.soc .moon-t { color: var(--moon); }
:root[data-theme="dawn"] .soc .moon-t { color: var(--moon-ink); }
.soc .num { font-feature-settings: "tnum"; }
.soc-sm { height: 40px; min-width: 64px; padding: 0 18px; flex: none; }
.soc .btn.full, .soc-update { width: 100%; }
.soc-grow { flex: 2; }
.soc-cap { font: var(--t-caption); color: var(--text-3); text-align: center; margin: var(--space-2) var(--space-2) 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.soc-gap, .list-panel.soc-gap { margin-top: var(--space-4); }
.soc-val { font: var(--t-label); color: var(--text-2); flex: none; }
.soc-link { display: block; margin: var(--space-4) auto 0; min-height: 44px; padding: 0 var(--space-4); background: none; border: 0; color: var(--text-2); font: var(--t-label); cursor: pointer; }
.soc-empty { text-align: center; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-2); }
.soc-empty b { font: var(--t-subtitle); color: var(--text); }
.soc-empty p { font: var(--t-label); margin: 0; }
.soc-empty .btn { margin-top: var(--space-3); min-width: 180px; }
.soc .sec-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 10px; }
.soc .sec-h h2 { font: var(--t-head); margin: 0; }
.soc .sec-h .lnk { position: relative; background: none; border: 0; padding: 0; font: 500 0.9375rem/1.25rem var(--font); color: var(--text-2); cursor: pointer; }
.soc .sec-h .lnk::after { content: ''; position: absolute; inset: calc(-1 * var(--space-3)) calc(-1 * var(--space-2)); }

/* صور الأعضاء: حرف على لون المادة الثابت بترتيبه */
.soc-avw { position: relative; display: inline-grid; flex: none; }
.soc-av { width: 36px; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center; font: 700 0.875rem/1 var(--font); color: var(--on-planet); background: var(--pi, var(--surface-3)); border: 2px solid var(--surface); }
.soc-av.sm { width: 34px; height: 34px; border-width: 0; }
.soc-av.xs { width: 24px; height: 24px; font: 700 0.6875rem/1 var(--font); border-width: 1.5px; }
.soc-av.me { background: var(--surface-3); color: var(--text); }
.soc-av.empty { background: transparent; border: 1.5px dashed var(--text-3); color: var(--text-3); }
.soc-avs { display: inline-flex; align-items: center; flex: none; }
.soc-avs .soc-avw + .soc-avw { margin-inline-start: -6px; }
.soc-avs .soc-av.xs { border-color: var(--surface); }
.soc-avs .soc-av.xs.empty { border-color: var(--text-3); }
.soc-avs .soc-avw:has(.xs) + .soc-avw { margin-inline-start: -3px; }
.soc-live { position: absolute; bottom: -1px; left: -1px; width: 11px; height: 11px; border-radius: var(--r-pill); background: var(--moon); border: 2px solid var(--surface); }
:root[data-theme="dawn"] .soc-live { background: var(--moon-ink); }

/* ===== مادة الدفعة: الشارة تحت الرأس، وتاريخ الموعد، والاقتراحات */
.soc-withw { margin: var(--space-3) 2px 0; }
.soc-with { display: inline-flex; align-items: center; gap: var(--space-2); height: 30px; border-radius: var(--r-pill); padding: 0 12px 0 4px; background: var(--surface-2); box-shadow: var(--rim); font: var(--t-caption); color: var(--text); }
.soc-with .soc-avs { padding-inline-start: 2px; }
.soc-with b { font-weight: 700; }
:root[data-theme="dawn"] .soc-with { background: var(--surface-3); }
.soc .soc-date { flex-direction: column; gap: 0; width: 44px; height: 46px; border-radius: var(--r-thumb); background: var(--surface-2); }
.soc .soc-date small { font: var(--t-micro); color: var(--text-2); }
.soc .soc-date b { font: 700 1.0625rem/1.25rem var(--font); }
:root[data-theme="dawn"] .soc .soc-date { background: var(--surface-3); }
.soc-by { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.soc-sugs .list-row.soft .rt b { color: var(--text-2); }
.soc .tag { height: 22px; border-radius: var(--r-chip); background: var(--surface-2); padding: 0 8px; display: inline-flex; align-items: center; gap: 2px; font: var(--t-caption); color: var(--text); flex: none; }
.soc .tag.soc-in { height: 28px; padding: 0 10px; color: var(--moon); background: var(--moon-wash); }
:root[data-theme="dawn"] .soc .tag.soc-in { color: var(--moon-ink); }
.soc .tag.soc-rose { color: var(--rose); background: none; outline: 1px solid var(--rose); outline-offset: -1px; }
.soc-extra { margin-top: var(--space-3); }

/* باب المشاركة (لوح) */
.soc-sheet h3 { font: var(--t-subtitle); margin: 0 4px; }
.soc-sh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.soc-sh-sub { font: var(--t-label); color: var(--text-2); margin: 2px 4px var(--space-3); }
.soc-x { width: 36px; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex: none; border: 0; cursor: pointer; }
.soc-sheet .list-panel { background: var(--surface-2); border-color: transparent; }
:root[data-theme="dawn"] :is(.soc-sheet .list-panel, .soc-x) { background: var(--surface-3); }
.soc-pick { align-items: flex-start; padding-block: 14px; cursor: pointer; }
.soc-pick .rt small { white-space: normal; display: block; }
.soc-pick.on::before { content: ''; position: absolute; inset: 4px 6px; border-radius: var(--r-field); box-shadow: var(--ring-on); pointer-events: none; }
.soc-radio { width: 22px; height: 22px; border-radius: var(--r-pill); outline: 1.6px solid var(--text-3); outline-offset: -1.6px; flex: none; display: grid; place-items: center; margin-top: 2px; }
.soc-radio.on { outline: 1.6px solid var(--text); outline-offset: -1.6px; }
.soc-radio.on::after { content: ''; width: 12px; height: 12px; border-radius: var(--r-pill); background: var(--text); }
.soc-linkbox { display: flex; align-items: center; gap: var(--space-2); min-height: 52px; border-radius: var(--r-field); background: var(--surface-2); padding: 0 8px 0 14px; margin-top: 14px; font: var(--t-label); direction: ltr; }
.soc-linkbox bdi, .soc-linkbox > span { flex: 1; color: var(--text-2); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-linkbox.off > span { display: flex; align-items: center; gap: 6px; direction: rtl; text-align: right; }
:root[data-theme="dawn"] .soc-linkbox { background: var(--surface-3); }
.soc-qr { display: grid; place-items: center; margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--r-field); background: var(--surface-2); animation: soc-in var(--dur-2) var(--ease-out); }
.soc-qr svg { width: 200px; height: 200px; }
.soc-btns { display: flex; gap: 10px; margin-top: var(--space-4); }
.soc-btns .btn { flex: 1; }
.soc-btns .btn.soc-grow { flex: 1.65; }
.soc-sheet .soc-ask .rt small.wrap, .soc .soc-ask .rt small.wrap { white-space: normal; }

/* صفحة الدعوة */
.soc-inv { min-height: calc(100dvh - 200px); display: flex; flex-direction: column; }
.soc-inv-top { text-align: center; padding-top: 30px; }
.soc-inv-top .planet, .soc-inv-moon { margin: 0 auto; }
.soc-inv-moon { display: inline-grid; }
.soc-inv-k { font: var(--t-label); color: var(--text-2); margin-top: 18px; }
.soc-inv h1 { font: var(--t-title); margin: 2px 0 0; }
.soc-inv-sub { font: var(--t-label); color: var(--text-2); margin-top: 4px; }
.soc-inv-who { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font: var(--t-label); color: var(--text-2); }
.soc-inv-who b { color: var(--text); }
.soc-inv-who .soc-avs .soc-avw + .soc-avw, .soc-dl-k .soc-avs .soc-avw + .soc-avw { margin-inline-start: -2px; }
.soc .soc-inv-rows { margin-top: var(--space-5); }
.soc-inv-bottom { margin-top: auto; padding-top: var(--space-5); }

/* ===== صفحات (قروب المشروع، قمرنا، وش فاضين) */
.soc-page { padding-bottom: var(--space-8); animation: soc-in var(--dur-3) var(--ease-out); }
.soc-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin: 4px 4px 16px; }
.soc-ph h1 { font: var(--t-title); margin: 0; }
.soc-sub { font: var(--t-label); color: var(--text-2); margin-top: 2px; }
.soc-glass { background: var(--glass-solid); box-shadow: var(--glass-rim); }
.soc-card { border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--rim); }
.soc-dl { padding: 18px; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.soc-dl:active { transform: scale(var(--press-scale)); }
.soc-dl-k { display: flex; justify-content: space-between; align-items: center; font: var(--t-label); color: var(--text-2); }
.soc-dl-big { display: flex; align-items: baseline; gap: var(--space-2); margin-top: 4px; }
.soc-dl-big b { font: var(--t-num-l); }
.soc-dl-big span { font: var(--t-head); }
.soc-dl-big.none span { color: var(--text-2); }
.soc-dl-when { font: var(--t-caption); color: var(--text-2); margin-top: 2px; }
.soc-dl-prog { display: flex; align-items: center; gap: var(--space-3); margin-top: 14px; font: var(--t-caption); color: var(--text-2); }
.soc-dl-prog .bar { flex: 1; height: 6px; }
.soc-dl-prog b { color: var(--text); }
.soc .soc-sech { margin-top: 22px; }
.soc-task .rt b { font-weight: 500; }
.soc-task.done .rt b { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }
.soc-ok { width: 28px; height: 28px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--moon-wash); color: var(--moon); flex: none; }
:root[data-theme="dawn"] .soc-ok { color: var(--moon-ink); }
.soc-update { margin-top: var(--space-3); height: 52px; gap: var(--space-2); }
.soc-msg { border-radius: var(--r-field); background: var(--surface-2); padding: 14px 16px; font: var(--t-body); line-height: 1.75rem; white-space: pre-line; }
:root[data-theme="dawn"] .soc-msg { background: var(--surface-3); }
.soc-msg b { font-weight: 700; }
.soc-fields { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.soc-field { display: flex; flex-direction: column; gap: 6px; font: var(--t-label); color: var(--text-2); }
.soc-field :is(input, select) { min-height: 48px; border-radius: var(--r-field); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); padding: 0 var(--space-3); font: var(--t-body); }
.soc-del { margin-top: var(--space-2); color: var(--ember); }

/* قمرنا */
.soc-qm { position: relative; height: 228px; display: grid; place-items: center; }
.soc-glow { position: absolute; width: 260px; height: 260px; border-radius: var(--r-pill); background: var(--glow-moon); opacity: .45; pointer-events: none; }
.soc-orbit { position: absolute; width: 200px; height: 200px; overflow: visible; }
.soc-orbit .o { fill: none; stroke: var(--text-3); stroke-dasharray: 2 5; stroke-width: 1; }
.soc-orbit .p { fill: var(--moon); }
.soc-orbit .pe { fill: var(--sky-0); stroke: var(--text-3); stroke-width: 1.5; }
:root[data-theme="dawn"] .soc-orbit .p { fill: var(--moon-ink); }
.soc-qm .moon { position: relative; z-index: 1; }
.soc-qm-t { text-align: center; margin: -6px 0 var(--space-5); }
.soc-qm-t .n { font: var(--t-label); }
.soc-qm-t p { font: var(--t-label); color: var(--text-2); margin: 6px 0 0; }
.soc-yalla { height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font: 700 0.875rem/1.25rem var(--font); display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; flex: none; transition: transform var(--dur-1) var(--ease-out); }
.soc-yalla:active, .soc-sm:active { transform: scale(var(--press-scale)); }

/* وش فاضين سوا؟ */
.soc-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.soc-chip { height: 36px; border-radius: var(--r-pill); padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); color: var(--text); border: 0; font: var(--t-label); font-weight: 700; cursor: pointer; }
.soc-chip.on { outline: 1px solid var(--text); outline-offset: -1px; background: var(--surface); }
.soc-wk { padding: 14px 12px 12px; }
.soc-wk-grid { display: grid; grid-template-columns: 38px repeat(5, 1fr); gap: 0 6px; }
.soc-wk-grid .dh { font: var(--t-caption); color: var(--text-2); text-align: center; padding-bottom: var(--space-2); }
.soc-wk-times { display: flex; flex-direction: column; justify-content: space-between; height: 220px; }
.soc-wk-times .tm { font: var(--t-micro); color: var(--text-3); text-align: center; }
.soc-wk-col { position: relative; height: 220px; border-radius: var(--r-thumb); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.soc-wk-col i { position: absolute; inset-inline: 3px; border-radius: var(--r-chip); background: var(--surface-3); }
.soc-wk-col i.free { background: var(--moon-wash); outline: 1.5px solid var(--moon); outline-offset: -1.5px; }
.soc-wk-col i.best::after { content: ''; position: absolute; top: 6px; left: 50%; margin-left: -3px; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--moon); }
:root[data-theme="dawn"] .soc-wk-col i.free { outline: 1.5px solid var(--moon-ink); outline-offset: -1.5px; }
.soc-wk-leg { display: flex; gap: 14px; margin-top: 10px; font: var(--t-caption); color: var(--text-2); }
.soc-wk-leg span { display: inline-flex; align-items: center; gap: 6px; }
.soc-wk-leg i { width: 12px; height: 12px; border-radius: var(--r-kbd); background: var(--surface-3); }
.soc-wk-leg i.free { background: var(--moon-wash); outline: 1.5px solid var(--moon); outline-offset: -1.5px; }

/* قسم الشلة في ذاكر */
.soc-shilla { margin-top: var(--space-4); }
.soc-shilla:empty { display: none; }
.soc-shilla .list-row.hi .rt b { font-weight: 700; }

@keyframes soc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .soc-page, .soc-qr { animation: none; } }