/* Media Publish — design system.
   RTL-first, dark by default, one accent variable the user can retint live. */

/* ── خطّ الواجهة: IBM Plex Sans Arabic بأوزانه السبعة ──────────────────────
   عائلةٌ واحدة تحمل التسلسل كلّه (١٠٠…٧٠٠) بدل عائلتين تتناوبان على العنوان
   والمتن. وهذا **تبسيطٌ لا تقليل**: التمييز يصير بالوزن لا بتبديل الشكل، وهو
   ما يجعل الشاشة تُقرأ نظاماً واحداً. ومعها IBM Plex Mono للأرقام والتوقيتات
   ورموز الألوان — الوجه اللاتيني من العائلة نفسها، فلا يبدو دخيلاً بينها.

   محلّية لا من fonts.googleapis.com: سياسة المحتوى عندنا `font-src 'self'`،
   وإبقاؤها كذلك يعني ألّا يتسرّب زائرٌ إلى طرفٍ ثالث لمجرّد فتح صفحة الدخول.
   ومقسَّمة بمدى المحارف (عربي · لاتيني · لاتيني موسَّع) فلا يُنزّل المتصفّح
   إلا ما يرسمه فعلاً.

   والترخيص SIL OFL — والقاعدة نفسها التي اختير بها Zain: المنتج مستقلّ، فلا
   يحمل خطّاً مملوكاً لمؤسسةٍ أخرى. وZain يبقى لعلامة «نبض» وحدها لأن الشارة
   مرسومةٌ منه مساراتٍ في `tools/brand.py`. */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:100;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-100-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:100;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-100-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:100;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-100-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:200;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-200-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:200;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-200-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:200;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-200-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:300;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-300-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:300;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:300;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-300-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:400;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-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(/static/fonts/IBMPlexSansArabic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-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(/static/fonts/IBMPlexSansArabic-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(/static/fonts/IBMPlexSansArabic-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-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(/static/fonts/IBMPlexSansArabic-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(/static/fonts/IBMPlexSansArabic-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-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(/static/fonts/IBMPlexSansArabic-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(/static/fonts/IBMPlexSansArabic-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/IBMPlexSansArabic-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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/IBMPlexMono-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 Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/IBMPlexMono-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}

/* Zain للوردمارك وحده — والشارة مبنيّة منه، فتبديله يكسر العلامة لا يجدّدها. */
@font-face{font-family:Zain;src:url(/static/fonts/Zain-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Zain;src:url(/static/fonts/Zain-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Alexandria;src:url(/static/fonts/Alexandria-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Alexandria;src:url(/static/fonts/Alexandria-Bold.ttf) format('truetype');font-weight:700;font-display:swap}

:root{
  --accent:#22C08A;
  /* الأسطح الممتلئة تُشتقّ من اللون لا تساويه: نصٌّ أسود على أخضر نعناعي
     يقرأ خشناً ورخيصاً، والأبيض عليه لا يقرأ أصلاً (٢٫٢:١). فالمزج بثلث
     أسود-أخضر يُنزل اللمعان حتى يمرّ الأبيض عند ٤٫٧:١، ويبقى الاشتقاق —
     لا قيمة ثابتة — لأن اللون يغيّره كل عضو من ملفه الشخصي: أي لون يختاره
     يُعتّم بالقاعدة نفسها فيبقى نصّ الأزرار مقروءاً بلا استثناء.
     و`--accent` الأصلي يبقى كما هو للحدود وحلقات التركيز والتظليل. */
  --accent-solid:color-mix(in srgb, var(--accent) 65%, #04150F);
  --accent-ink:#FFFFFF;
  --bg:#0D1117;
  --bg-2:#151B24;
  --surface:#1A212B;
  --surface-2:#222A36;
  --line:#2C3542;
  --line-2:#3B4756;
  --line-3:#4C5A6B;
  --surface-3:#28313E;
  --ink:#E9EDF2;
  --ink-2:#AEB8C4;
  --muted:#7C8896;
  --danger:#E5484D;
  --warn:#E0A33E;
  --ok:#3DBE8B;
  --info:#5B9DE0;
  --r:10px;
  /* خطّا الواجهة مفتوحا الترخيص (SIL OFL): Alexandria للمتن وZain للعناوين.
     هذا قرار ترخيصي لا جمالي — المنتج مستقلّ، فلا يجوز أن يحمل خطّاً مملوكاً
     لمؤسسة أخرى مهما كانت صلاحية من بناه فيها. وخطوط القوالب التي تُحرق على
     الفيديو شيء آخر تماماً: تأتي من أصول كل مؤسسة على حدة، فيبقى الترخيص
     مسألة إعداد لدى المشترك لا التزاماً مثبَّتاً في المنتج. */
  --body:"IBM Plex Sans Arabic",Alexandria,"Segoe UI",system-ui,sans-serif;
  --display:"IBM Plex Sans Arabic",Alexandria,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* الوردمارك وحده — لا يُستعمل في أي مكانٍ آخر. */
  --brand:Zain,"IBM Plex Sans Arabic",sans-serif;
  /* ── مفردات الحركة ────────────────────────────────────────────────────
     منحنيان لا عشرة، فالواجهة تُقرأ يداً واحدة.

     `--e-out` للاستجابة الفورية: يخرج بسرعة ثم يهدأ — ما يُحسّ به الإصبع
     لحظة الضغط. و`--e-settle` منحنى الألواح في iOS: نابضٌ مخمَّدٌ تخميداً
     حرجاً، يبلغ هدفه بسرعة ويستقرّ بلا تجاوز. ولا ارتداد في هذا المنتج:
     التجاوز يليق بما قذفه المستخدم بيده (بطاقةٌ دُفعت، لوحٌ سُحب)، أمّا قائمةٌ
     ظهرت من زرّ فارتدادُها زينةٌ تُشتّت من يعمل ثماني ساعات.

     والأزمنة ثلاثة: ضغطةٌ تُحسّ (١١٠)، تبدّلُ حالةٍ صغير (١٨٠)، ومسافةٌ
     تُقطَع أو سطحٌ يظهر (٢٦٠). */
  /* ── الزجاج ────────────────────────────────────────────────────────────
     مادّةٌ لا لون: تُضبّب ما تحتها وتُشبعه قليلاً، وتحمل حافّةً عليا فاتحة
     كأنّ ضوءاً يلمس حرفها. وتُصرف على **الطبقة العائمة** وحدها — الشريط
     العلوي، القوائم، النوافذ، الأزرار — لا على كل بطاقة: زجاجٌ فوق زجاج
     يُفقد النصّ أرضيّته، وهي القاعدة الوحيدة التي لا تُخرَق هنا. */
  --glass:color-mix(in srgb,var(--surface) 62%,transparent);
  --glass-2:color-mix(in srgb,var(--surface-2) 58%,transparent);
  --glass-blur:blur(22px) saturate(180%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.07);
  --e-out:cubic-bezier(.2,.8,.2,1);
  --e-settle:cubic-bezier(.32,.72,0,1);
  --t-press:110ms;
  --t-quick:180ms;
  --t-move:260ms;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  /* رفعٌ خافت يحلّ محلّ الحدّ: يفصل بلا أن يرسم خطّاً. */
  --lift:0 1px 2px rgba(0,0,0,.28), 0 6px 18px -12px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  /* في الفاتح تُرفع نسبة السطح وتُخفّف الحافّة: زجاجٌ شفّافٌ على أرضٍ فاتحة
     يبتلع النصّ. */
  --glass:color-mix(in srgb,#FFFFFF 76%,transparent);
  --glass-2:color-mix(in srgb,#FFFFFF 70%,transparent);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.9);
  --bg:#F2F4F7; --bg-2:#E9ECF1; --surface:#FFFFFF; --surface-2:#F5F7FA;
  --line:#DEE3EA; --line-2:#C7CFDA; --line-3:#AEB9C7; --surface-3:#EDF1F6; --ink:#161B22; --ink-2:#414B58; --muted:#6B7684;
  --accent-ink:#FFFFFF; --shadow:0 8px 24px rgba(16,24,40,.10);
  --lift:0 1px 2px rgba(16,24,40,.06), 0 8px 20px -14px rgba(16,24,40,.28);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:14px;line-height:1.7;
  direction:rtl;text-align:right;-webkit-font-smoothing:antialiased;
}
/* التتبّع (letter-spacing) يتبع الحجم: النص الكبير يحتاج تضييقاً لأن الحروف
   تتباعد بصرياً كلما كبرت، والصغير يحتاج توسيعاً طفيفاً ليُقرأ. قيمة واحدة
   لكل المقاسات تكون خاطئة في أحدها حتماً. */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0}
h3,h4{font-weight:600}
h1{font-size:1.35rem;line-height:1.2;letter-spacing:-.014em}
h2{font-size:1.15rem;line-height:1.25;letter-spacing:-.01em}
h3{font-size:1rem;line-height:1.35;letter-spacing:-.006em}
h4{font-size:.9rem;line-height:1.4;letter-spacing:-.002em;font-weight:600}
.display{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.08;letter-spacing:-.022em}
.eyebrow{font-size:.688rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
a{color:var(--accent);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  transition:outline-offset var(--t-press) var(--e-out)}
/* الإزاحة تبدأ أوسع ثم تنكمش إلى مكانها: الحلقة تصل، لا تومض. */
@media(prefers-reduced-motion:no-preference){
  :focus-visible{animation:ring-in var(--t-quick) var(--e-settle)}
  @keyframes ring-in{from{outline-offset:6px}to{outline-offset:2px}}
}

/* ---------------- shell ---------------- */
.shell{display:grid;grid-template-columns:244px 1fr;min-height:100vh}
.side{grid-column:1;grid-row:1}
.main{grid-column:2;grid-row:1}
/* نقطة الانكسار عند ٧٨٠ لا ٩٠٠: عند عرض ٩٠٠ يبقى للمحتوى ٦٥٦ بكسل بعد
   القائمة — أوسع من أن نطويها فوقه ونجبر القارئ على التمرير قبل أن يرى شيئاً. */
@media(max-width:780px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{grid-column:1;grid-row:1}
  .main{grid-column:1;grid-row:2}
}
.side{
  background:var(--bg-2);border-inline-end:1px solid var(--line);
  padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px;
}
/* على الجوّال تختفي القائمة الجانبية تماماً ويحلّ محلّها شريط الوجهات السفلي:
   تكديسها فوق المحتوى كان يضع ثلاثة عشر رابطاً بين المستخدم وشاشته. */
@media(max-width:780px){.side{display:none}}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px 18px}
/* الشارة: صورتان تتبادلان بحسب السمة. السبب أن الملفّ يحمل لونَ حقله في
   داخله — و`currentColor` لا يعبر إلى داخل `<img>`. البديل (تضمين الـSVG في
   الصفحة) يكرّر مسارات الحروف في كل صفحة بلا كاش. */
.markwrap{display:block;flex:none;line-height:0}
.markwrap .mark{width:34px;height:34px;display:block;border-radius:8px}
.markwrap.lg .mark{width:64px;height:64px;border-radius:14px}
.markwrap .on-light{display:none}
:root[data-theme="light"] .markwrap .on-dark{display:none}
:root[data-theme="light"] .markwrap .on-light{display:block}
.brand b{font-family:var(--brand);font-size:22px;letter-spacing:-.01em}
.brand small{color:var(--muted);font-size:11px;display:block;margin-top:-4px}
.navlink{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  color:var(--ink-2);cursor:pointer;position:relative;border:0;background:none;
  width:100%;text-align:right;
}
.navlink{transition:background var(--t-quick) var(--e-out),color var(--t-quick) var(--e-out),transform var(--t-press) var(--e-out)}
.navlink:hover{background:var(--surface);color:var(--ink)}
.navlink:active{transform:scale(.985)}
/* الشريط الجانبي للبند النشط ينمو من مركزه بدل أن يظهر دفعةً — حركةٌ صغيرة
   تقول «انتقلتَ» في اللحظة التي ينتقل فيها المحتوى. */
.navlink::before{transform:scaleY(0);transform-origin:center;
  transition:transform var(--t-move) var(--e-settle)}
.navlink.on::before{transform:scaleY(1)}
.navlink.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink)}
.navlink.on::before{content:"";position:absolute;inset-inline-start:-7px;top:8px;bottom:8px;width:3px;background:var(--accent);border-radius:2px}
.navlink svg{width:15px;height:15px;flex:none;opacity:.75}
.navgroup{margin-top:6px}
.navsub{padding-inline-start:22px;display:flex;flex-direction:column;gap:2px}
.navsub .navlink{padding:7px 12px;font-size:13px}
.nav-sep{height:1px;background:var(--line);margin:10px 6px}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;gap:14px;padding:12px 20px;
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg-2) 72%,transparent);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.topbar h1{font-size:19px}
.topbar .sub{color:var(--muted);font-size:12px;margin-top:-2px}
.topbar .spacer{flex:1}
.iconbtn{
  width:32px;height:32px;display:grid;place-items:center;border-radius:8px;
  background:transparent;border:1px solid transparent;cursor:pointer;color:var(--muted);
  transition:background .14s ease,color .14s ease,transform .1s ease-out;
}
.iconbtn:active{transform:scale(.94)}
.iconbtn:hover{background:var(--surface);color:var(--ink)}
.iconbtn svg{width:16px;height:16px}
.badge-dot{position:relative}
.badge-dot[data-n]:not([data-n="0"])::after{
  content:attr(data-n);position:absolute;top:2px;inset-inline-start:2px;
  background:var(--danger);color:#fff;border-radius:9px;font-size:10px;
  min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px;font-family:var(--mono);
}
/* فراغ سفلي يكفي زرّ البلاغ العائم: آخر صفّ في أي صفحة يجب أن يبقى قابلاً
   للضغط، لا محجوباً خلف زر ثابت. */
.content{padding:24px 24px 88px;max-width:1180px;width:100%;margin:0 auto;flex:1}

/* impersonation */
.impersonate{
  background:color-mix(in srgb,var(--warn) 18%,var(--bg));
  border-bottom:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  color:var(--warn);padding:8px 20px;display:flex;align-items:center;gap:12px;font-size:13px;
}
.impersonate .spacer{flex:1}

/* ══════════════════════════ تنقّل الجوّال: شريطٌ سفليّ ولوحٌ ينزلق ═════════
   الشريط في متناول الإبهام لا في أعلى الشاشة، ومادّته شفّافةٌ يمرّ المحتوى
   تحتها فلا تقتطع شريطاً ميّتاً من ارتفاعٍ نادر أصلاً. */
.tabbar{display:none}
@media(max-width:780px){
  .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;inset-inline:0;bottom:0;z-index:80;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bg-2) 82%,transparent);
    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  }
  /* المحتوى يفسح للشريط، وزرّ البلاغ والرسائل يعلوانه. */
  .content{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .report-fab{bottom:calc(76px + env(safe-area-inset-bottom))}
  #toasts{bottom:calc(128px + env(safe-area-inset-bottom))}
}
.tabbar-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 2px 5px;border:0;border-radius:10px;background:none;cursor:pointer;
  color:var(--muted);font-size:10.5px;font-weight:500;line-height:1.2;
  /* هدفُ لمسٍ لا يقلّ عن ٤٤ بكسلاً مهما صغر النصّ. */
  min-height:46px;
  transition:color .16s ease,background .16s ease,transform .12s ease-out;
}
.tabbar-item svg{width:19px;height:19px}
.tabbar-item:active{transform:scale(.93)}
.tabbar-item.on{color:var(--accent)}
.tabbar-item.on svg{opacity:1}

/* اللوح: يدخل من الأسفل ويخرج إليه — المسار نفسه في الاتجاهين. */
.scrim{
  position:fixed;inset:0;z-index:90;background:rgba(3,6,10,.5);
  opacity:0;transition:opacity .26s cubic-bezier(.32,.72,0,1);
}
.scrim.on{opacity:1}
.sheet{
  position:fixed;inset-inline:0;bottom:0;z-index:91;
  max-height:82vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border-radius:18px 18px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.35);
  padding:0 12px calc(16px + env(safe-area-inset-bottom));
  /* منحنى iOS للألواح: خروجٌ سريع ثم استقرارٌ هادئ بلا تجاوز. */
  transition:transform .34s cubic-bezier(.32,.72,0,1);
  touch-action:none;
}
.sheet-grip{
  height:22px;display:grid;place-items:center;cursor:grab;position:sticky;top:0;
  background:var(--surface);margin:0 -12px;padding-top:8px;
}
.sheet-grip::after{content:"";width:38px;height:4px;border-radius:999px;background:var(--line-2)}
.sheet-nav h4{color:var(--muted);font-size:11.5px;font-weight:600;padding:10px 6px 6px}
.sheet-link{
  display:flex;align-items:center;gap:11px;width:100%;padding:13px 10px;
  border:0;background:none;border-radius:10px;cursor:pointer;color:var(--ink);
  font-size:14.5px;text-align:right;
}
.sheet-link:active{background:var(--surface-2)}
.sheet-link svg{width:17px;height:17px;opacity:.7;flex:none}
.sheet-link span{flex:1}
.sheet-link em{font-style:normal;color:var(--muted);font-size:11.5px}
body.sheet-open{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  /* الحركة المخفَّضة ليست «بلا ردّ»: تلاشٍ قصير بدل انزلاق. */
  .sheet{transition:opacity .18s ease;transform:none !important}
  .scrim{transition:opacity .18s ease}
}
@media(prefers-reduced-transparency:reduce){
  .tabbar{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---------------- primitives ---------------- */
/* ── التبسيط: الحدّ وحدةُ معنى لا زينة ────────────────────────────────────
   البطاقة على أرضٍ أغمق منها **تُقرأ منفصلةً بلا حدّ**. والحدّ المرسوم حولها
   ثم حول كل أكورديون داخلها ثم حول كل حقل داخله يعطي ثلاثة إطارات متداخلة
   تقول الشيء نفسه ثلاث مرات — وهي الكثافة التي تجعل الشاشة تبدو أثقل من
   منافسها بلا أن تحمل معلومةً أكثر.

   القاعدة الآن: **السطح يفصل، والظلّ يرفع، والحدّ للحالة وحدها** (تحديد،
   تركيز، خطأ). والمساحة تحلّ محلّ الخطوط. */
.card{background:var(--surface);border:1px solid transparent;border-radius:var(--r);
  padding:20px;box-shadow:var(--lift)}
.card + .card{margin-top:16px}
.card h3{font-size:16px;margin-bottom:4px}
.card .hint{color:var(--muted);font-size:12.5px;margin:0 0 14px}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.spacer{flex:1}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 15px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--glass-2);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge);
  color:var(--ink);cursor:pointer;font-size:13.5px;white-space:nowrap;
  transition:background var(--t-quick) var(--e-out),border-color var(--t-quick) var(--e-out),
             box-shadow var(--t-quick) var(--e-out),transform var(--t-press) var(--e-out);
}
.btn:hover{border-color:var(--line-3);background:var(--surface-3)}
/* الاستجابة عند الضغط لا عند الإفلات — انتظار `click` يجعل الزر يبدو ميتاً. */
.btn:active{transform:scale(.972)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.primary{
  background:linear-gradient(180deg,color-mix(in srgb,#fff 12%,var(--accent-solid)),var(--accent-solid));
  border-color:color-mix(in srgb,var(--accent) 55%,var(--accent-solid));
  color:var(--accent-ink);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.18);
}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn svg{width:14px;height:14px;opacity:.9}

label.f{display:block;margin-bottom:12px}
label.f > span{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:5px}
label.f > .note{color:var(--muted);font-size:11.5px;margin-top:4px}
/* القائمة صريحة عمداً: `input` وحدها تصيب `range` و`color` و`checkbox`
   فتفسدها. وثمنُ ذلك أنّ نوعاً يسقط منها يظهر بمظهر المتصفّح الخام —
   وهو ما وقع لـ`search` و`date`: حقلٌ أبيضُ بلا حشوة في صفحةٍ داكنة. */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=search],input[type=date],input[type=time],
input[type=tel],select,textarea{
  width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
textarea{min-height:84px;resize:vertical;line-height:1.7}
input[type=search]::-webkit-search-cancel-button{filter:invert(1);opacity:.55;cursor:pointer}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=color]{width:38px;height:30px;padding:2px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg-2);cursor:pointer}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}

.chip{
  padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--glass-2);box-shadow:var(--glass-edge);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  cursor:pointer;font-size:12.5px;user-select:none;
  transition:background var(--t-quick) var(--e-out),border-color var(--t-quick) var(--e-out),
             color var(--t-quick) var(--e-out),transform var(--t-press) var(--e-out);
}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--accent-ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px}

.pill{padding:3px 10px;border-radius:999px;font-size:11.5px;border:1px solid transparent;white-space:nowrap}
.pill.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.pill.err{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}
.pill.mut{background:var(--surface-2);color:var(--muted)}
.pill.info{background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:12px;font-weight:600}
tbody tr{transition:background var(--t-quick) var(--e-out)}
tbody tr:hover{background:var(--surface-2)}
.tw{overflow-x:auto}

.stat{background:var(--surface);border:1px solid transparent;border-radius:var(--r);
  padding:18px;box-shadow:var(--lift)}
.stat .k{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:8px}
.stat .v{font-family:var(--display);font-size:30px;font-weight:700;margin-top:6px;line-height:1}
.stat .d{color:var(--muted);font-size:11.5px;margin-top:2px}

.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty h4{color:var(--ink-2);margin-bottom:6px;font-size:15px}

/* الملاحظة الاعتيادية شرحٌ لا نداء: شريطها محايد. واللكنة تبقى للفعل
   الأساسي وللحالة — ولونٌ يُصرف على كل ملاحظة لا يعود يعني شيئاً حين يقع ما
   يستحقّه فعلاً. `.note.tip` لمن أراد النداء صراحةً. */
.note{border-inline-start:3px solid var(--line-2);background:var(--bg-2);
  padding:13px 15px;border-radius:0 var(--r) var(--r) 0;font-size:13px;color:var(--ink-2)}
.note.tip{border-inline-start-color:var(--accent);background:var(--surface)}
/* ملاحظةٌ تحت حقل ليست لوحة: خلفيّتها كانت `--bg-2` وهي **خلفية الحقل
   نفسها**، فيقرأها المحرّر حقلاً فارغاً ثانياً ويحاول الكتابة فيه. الشرح
   يُقال بلا صندوق: نصٌّ هادئ وخطٌّ رفيع يربطه بحقله. */
label.f .note{background:none;padding:5px 0 0 9px;border-radius:0;
  border-inline-start-width:2px;font-size:11.5px;color:var(--muted);line-height:1.6}
label.f .note.warn,label.f .note.err{padding-inline-start:9px}
.note.warn{border-inline-start-color:var(--warn);color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.note.err{border-inline-start-color:var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--surface))}
.note.ok{border-inline-start-color:var(--ok)}

/* modal */
/* النافذة تتجسّد لا تظهر: الطبقة تتضبّب والسطح يكبر قليلاً من ٩٦٪ إلى حجمه
   وهو يتّضح. مادّةٌ وصلت، لا صورةٌ بدّلت شفافيّتها. */
.backdrop{position:fixed;inset:0;background:rgba(3,6,10,.62);display:grid;place-items:center;z-index:100;padding:20px;
  animation:scrim-in var(--t-move) var(--e-out) both;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
@keyframes scrim-in{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);width:min(560px,100%);max-height:88vh;overflow:auto;
  animation:modal-in var(--t-move) var(--e-settle) both;
  background:var(--glass);backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow),var(--glass-edge)}
@keyframes modal-in{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal header{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal header h3{font-size:17px}
.modal .body{padding:18px 20px}
.modal footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-start}
.modal.wide{width:min(940px,100%)}

/* dropdown */
/* القائمة تكبر **من زرّها**: `--ox/--oy` تُحسبان من مستطيل الزرّ في
   `mountMenu`، فتخرج القائمة من النقطة التي ضُغطت لا من مركزها. والعلاقة
   المكانية بين السبب والنتيجة تُرى بلا أن تُقرأ. */
.menu{position:absolute;top:44px;inset-inline-start:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:230px;z-index:60;overflow:hidden;
  background:var(--glass);backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow),var(--glass-edge);
  transform-origin:var(--ox,50%) var(--oy,0);
  animation:menu-in var(--t-quick) var(--e-settle) both}
@keyframes menu-in{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:none}}
.menu button,.menu a{display:flex;width:100%;gap:9px;align-items:center;padding:9px 13px;background:none;border:0;cursor:pointer;color:var(--ink);font-size:13.5px;text-align:right;
  transition:background var(--t-press) var(--e-out)}
.menu button:hover,.menu a:hover{background:var(--surface-2)}
.menu button:active,.menu a:active{background:var(--surface-3)}
.menu .sep{height:1px;background:var(--line)}

/* toast */
#toasts{position:fixed;bottom:18px;inset-inline-start:18px;display:flex;flex-direction:column;gap:8px;z-index:300}
.toast{background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:8px;padding:11px 15px;box-shadow:var(--shadow);max-width:400px;font-size:13px;
  animation:slide var(--t-move) var(--e-settle);
  background:var(--glass);backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow),var(--glass-edge)}
.toast.err{border-inline-start-color:var(--danger)}
.toast.warn{border-inline-start-color:var(--warn)}
@keyframes slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ── الحركة المخفَّضة: بابٌ واحد ─────────────────────────────────────────
   «مخفَّضة» لا تعني «بلا ردّ»: من أطفأ الحركة يحتاج أن يعرف أن شيئاً تغيّر
   كما يحتاجه غيره. فالانتقال والتكبير والدوران تسقط، ويبقى تلاشٍ قصير —
   وتبقى كلُّ تبدّلات اللون والحالة كما هي لأنها تحمل معنىً لا زينة. */
/* من طلب تقليل الشفافية يريد نصّاً على أرضٍ ثابتة لا مادّةً تتنفّس. */
@media(prefers-reduced-transparency:reduce){
  .topbar,.menu,.modal,.toast,.btn,.chip,.tabbar{
    background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .topbar,.tabbar{background:var(--bg-2)}
  .btn,.chip{background:var(--surface-2)}
}
@media(prefers-reduced-motion:reduce){
  .toast,.modal,.backdrop,.menu{animation:none}
  .tab-ind{transition:opacity var(--t-press) linear}
  .acc > summary .caret,.navlink::before{transition:none}
  @supports selector(::details-content){
    .acc::details-content{transition:opacity 120ms linear,content-visibility 120ms allow-discrete}
  }
  :focus-visible{animation:none}
  .btn:active,.chip:active,.tab:active,.iconbtn:active,.navlink:active{transform:none}
}

/* report button */
.report-fab{position:fixed;bottom:18px;inset-inline-end:18px;z-index:200}
/* الرسائل فوق زرّ البلاغ لا تحته: عنصران في الركن نفسه أحدهما يحجب الآخر. */
#toasts{inset-inline-start:auto;inset-inline-end:18px;bottom:70px}

/* ---------------- editor ---------------- */
.editor{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:20px;align-items:start}
@media(max-width:1000px){.editor{grid-template-columns:1fr}}
.stage{position:sticky;top:78px}

/* ---------------------------------------------------------------------------
   لوحة صفحة المشروع محدودةٌ بارتفاع الشاشة لا بعرض عمودها.

   العمود الأيسر `1fr`، واللوحة رأسية (٩:١٦). فعلى شاشةٍ عريضة يصير عرض العمود
   تسعمئة بكسل، ويصير ارتفاع اللوحة ألفاً وستّمئة — أطول من الشاشة بثلاثة
   أضعاف. المحرّر عندها لا يرى أعلى الريل وأسفله معاً، فيمرّر الصفحة صعوداً
   ونزولاً مع كل تعديل موضع.

   والحلّ عرضٌ مشتقٌّ من الارتفاع المتاح لا من عرض العمود:

       العرض = min(عرض العمود، الارتفاع المتاح × نسبة اللوحة)

   لماذا لا `max-height` وحدها؟ لأن صندوقاً كتليّاً بعرضٍ تلقائي يملأ حاويته
   ثم تحدّد `aspect-ratio` ارتفاعه؛ و`max-height` تقصّ الارتفاع ولا تعيد حساب
   العرض — فتخرج لوحةٌ مقصوصة لا لوحةٌ أصغر.

   و`--ar` تكتبها `syncAspectFrame` من نسبة الريل نفسها لا من ٩:١٦ مفترضة:
   القالب قد يكون ١:١ أو ٤:٥ أو ١٦:٩، وثبتُ النسبة هنا يكسر الثلاثة. */
.stage .canvas-wrap{
  width:min(100%, calc((100dvh - var(--stage-chrome, 168px)) * var(--ar, 0.5625)));
  margin-inline:auto}
@media(max-width:1000px){
  /* بعمودٍ واحد لم تعد اللوحة تزاحم لوحة التحكم على الشاشة، والعرض الكامل
     أنفع من ارتفاعٍ محجوز لشيء تحتها. */
  .stage .canvas-wrap{width:100%}
}

.canvas-wrap{background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative;aspect-ratio:9/16}
.canvas{position:absolute;inset:0;transform-origin:top right}
.canvas video,.canvas img.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.layer{position:absolute;inset:0;pointer-events:none}
.layer .el{position:absolute;pointer-events:auto;cursor:move;display:flex;align-items:center;justify-content:flex-end;white-space:pre}
.layer .el.sel{outline:2px solid var(--accent);outline-offset:2px}
.layer .guides{position:absolute;inset:0;pointer-events:none;opacity:.55}
.player{display:flex;align-items:center;gap:10px;margin-top:10px}
.player .time{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.scrub{flex:1;accent-color:var(--accent)}

.tabs{display:flex;gap:5px;flex-wrap:wrap;position:sticky;top:62px;background:var(--bg);padding:8px 0;z-index:20}
.tab{padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-2);cursor:pointer;font-size:12.5px;white-space:nowrap;
  transition:background var(--t-quick) var(--e-out),color var(--t-quick) var(--e-out),
             border-color var(--t-quick) var(--e-out),transform var(--t-press) var(--e-out)}
.tab:active{transform:scale(.96)}
.tab.on{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--accent-ink);font-weight:600}

/* ── المؤشّر المسافر ───────────────────────────────────────────────────────
   التبويبة المختارة كانت تتبدّل لوناً: البند القديم يُطفأ والجديد يُشعل في
   الإطار نفسه، فلا شيء يربط بينهما. والعين تفقد المكان فتبحث عنه من جديد.

   والمؤشّر الواحد الذي **ينتقل** يحمل الانتباه معه — هو نفسه الشيء الذي
   تحرّك، فلا إطفاء ولا إشعال. وهذا فرقٌ يُحَسّ ولا يُشرَح. */
.tabs.slider{position:relative}
.tabs.slider .tab{background:transparent;border-color:transparent;color:var(--ink-2);position:relative;z-index:1}
.tabs.slider .tab:hover{color:var(--ink)}
.tabs.slider .tab.on{background:transparent;border-color:transparent;color:var(--accent-ink)}
.tab-ind{
  /* `left/top:0` صراحةً: بلا مرساة يجلس العنصر المطلق في «موضعه الساكن»،
     وهو في اتجاهٍ من اليمين إلى اليسار الحافّةُ اليمنى — فتُزيحه `translate`
     الموجبة خارج الشريط كلّه. وهذا ما وقع: قرصٌ أخضر يسبح بجانب التبويبات. */
  position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:var(--accent-solid);
  pointer-events:none;opacity:0;
  transition:transform var(--t-move) var(--e-settle),width var(--t-move) var(--e-settle),
             height var(--t-move) var(--e-settle),opacity var(--t-quick) var(--e-out);
}
.tab-ind.ready{opacity:1}
/* مجموعةٌ كل أدواتها غير ممنوحة: تبقى ظاهرة ليقرأ المحرّر سببها، وتُقرأ
   مقفلةً قبل أن يضغطها. */
.tab.locked{opacity:.55}

.acc{border:1px solid transparent;border-radius:var(--r);background:var(--surface);
  margin-bottom:12px;overflow:hidden;box-shadow:var(--lift)}
.acc > summary{padding:12px 15px;cursor:pointer;display:flex;align-items:center;gap:10px;list-style:none;user-select:none}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary b{font-family:var(--display);font-size:15px;font-weight:600}
.acc > summary .sum{color:var(--muted);font-size:12px;margin-inline-start:auto;font-family:var(--mono)}
.acc > summary .caret{color:var(--muted);opacity:.75}
/* الفاصل يظهر حين يُفتح القسم فقط — هناك يفصل رأساً عن محتوى، وهو معنى. */
.acc > summary{transition:background var(--t-quick) var(--e-out)}
.acc > summary:hover{background:var(--surface-2)}
.acc[open] > summary{border-bottom:1px solid var(--line)}
/* السهم يدور مع الفتح فيصير مؤشّر حالةٍ لا زخرفة. */
.acc > summary .caret{transition:transform var(--t-move) var(--e-settle)}
.acc[open] > summary .caret{transform:rotate(-90deg)}
/* الارتفاع يُحرَّك حيث يدعمه المتصفّح: `::details-content` مع
   `interpolate-size` تعطي فتحاً وإغلاقاً على المسار نفسه بلا سطر جافاسكربت.
   وما لا يدعمها يبقى على السلوك الفوري — تحسينٌ تدريجي لا اشتراط. */
@supports selector(::details-content){
  :root{interpolate-size:allow-keywords}
  .acc::details-content{
    block-size:0;overflow:clip;opacity:0;
    transition:block-size var(--t-move) var(--e-settle),opacity var(--t-quick) var(--e-out),
               content-visibility var(--t-move) allow-discrete;
  }
  .acc[open]::details-content{block-size:auto;opacity:1}
}
.acc .inner{padding:16px}
.acc.locked > summary{opacity:.6;cursor:not-allowed}

.field-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.stepper button{width:28px;height:30px;background:var(--surface-2);border:0;cursor:pointer;color:var(--ink)}
.stepper button:hover{background:var(--line)}
.stepper input{width:56px;text-align:center;border:0;background:transparent;padding:5px 0;font-family:var(--mono)}
.eye{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);cursor:pointer;background:var(--surface-2);color:var(--muted)}
.eye.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.seg button{padding:6px 12px;background:var(--surface-2);border:0;cursor:pointer;color:var(--ink-2);font-size:12.5px}
.seg button.on{background:var(--accent-solid);color:var(--accent-ink);font-weight:600}

.cap-row{border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:7px;background:var(--bg-2)}
.cap-row.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg-2))}
.cap-row .t{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.cap-row .t input{width:74px;padding:3px 6px;font-size:11.5px}
.cap-row textarea{min-height:38px;margin-top:6px;font-size:13px}

.savestate{font-size:12px;color:var(--muted);font-family:var(--mono)}
.savestate.dirty{color:var(--warn)}
.savestate.saved{color:var(--ok)}

.matrix{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.matrix figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.matrix img{width:100%;display:block;aspect-ratio:9/16;object-fit:cover;background:#000}
/* لقطة معرض القوالب: SVG مضمّن لا صورة — نفس المقاس ونفس النسبة. */
.matrix > figure > div > svg{width:100%;display:block;aspect-ratio:9/16;background:#000}
.matrix figcaption{padding:9px 11px;font-size:12.5px;display:flex;align-items:center;gap:8px}

.skel{background:linear-gradient(90deg,var(--surface),var(--surface-2),var(--surface));background-size:200% 100%;animation:sk 1.1s infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}


/* ---------------- avatar ---------------- */
.avatar{
  display:grid;place-items:center;flex:none;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 18%,var(--surface-2));
  color:var(--accent);font-family:var(--display);font-weight:700;
  line-height:1;user-select:none;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.sm{width:28px;height:28px;font-size:12px}
.avatar.md{width:40px;height:40px;font-size:16px}
.avatar.lg{width:56px;height:56px;font-size:21px}

/* ---------------- page header ---------------- */
/* رأس موحّد لكل صفحة: هوية الصفحة يميناً وأفعالها يساراً، بمقاس ثابت
   لا يتغيّر من صفحة لأخرى — الاتساق هو ما يجعل التنقّل قابلاً للتوقّع. */
.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.page-head .t{min-width:0}
.page-head h2{margin-bottom:2px}
.page-head p{color:var(--muted);font-size:12.5px;margin:0}
.page-head .acts{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------------- definition rows ---------------- */
/* صفوف «تسمية ← قيمة» بدل شبكة بطاقات لكل حقل: القراءة أسرع والمسح البصري
   عمودي واحد. */
/* ---------------------------------------------------------- لوحة المنصّة
   ثلاثة أنماط لا أكثر، وكلّها امتدادٌ لما في الورقة: صفّ قائمة، وزوجُ
   «تسمية/قيمة»، وحقلٌ في نموذج. لوحةٌ جديدة لا تستحقّ لغةً بصرية جديدة. */
.kvs{display:flex;flex-wrap:wrap;gap:18px}
.kvs .kv{display:flex;flex-direction:column;gap:2px}
.kvs .kv .k{color:var(--muted);font-size:12px}
.kvs .kv b{font-size:16px}
.listrow{gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.listrow:last-child{border-bottom:0}
.fld{display:flex;flex-direction:column;gap:5px;padding:7px 0}
.fld > span{color:var(--muted);font-size:12.5px}

.rows{display:flex;flex-direction:column}
.rows .r{display:flex;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.rows .r:last-child{border-bottom:0}
.rows .r > .k{color:var(--muted);font-size:12.5px;width:120px;flex:none}
.rows .r > .v{flex:1;min-width:0;font-size:13.5px}
.rows .r > .a{margin-inline-start:auto}
@media(max-width:560px){
  .rows .r{flex-direction:column;align-items:stretch;gap:6px}
  .rows .r > .k{width:auto}
}

/* ---------------- segmented control ---------------- */
.segmented{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;padding:2px;gap:2px}
.segmented button{padding:5px 13px;border:0;border-radius:7px;background:transparent;
  color:var(--muted);cursor:pointer;font-size:12.5px;transition:background .14s ease,color .14s ease}
.segmented button.on{background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.18)}

/* ---------------- accessibility preferences ---------------- */
/* حركة أقل لا تعني بلا تغذية راجعة — تعني تلاشياً بدل انزلاق، وبلا تجاوز. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn:active,.iconbtn:active{transform:none}
}
@media (prefers-reduced-transparency: reduce){
  .topbar{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none}
  .backdrop{background:rgba(3,6,10,.92)}
}
@media (prefers-contrast: more){
  :root{--line:#4A5666;--line-2:#67748A;--muted:#98A4B4}
  .btn,.card,.modal,.menu{border-color:var(--line-2)}
}

/* ---------------- الرادار ---------------- */
/* بطاقة الرادار: صورة فوق، ثم عنوان وسطر «لماذا هو رائج»، ثم أسبابه، والفعل
   الأساسي في الأسفل دائماً — الترتيب نفسه في كل بطاقة مهما اختلف المصدر،
   فالمسح البصري لعشرين بطاقة يبقى ممكناً. */
.radar-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.rcard .thumb{aspect-ratio:16/9;background:var(--surface-2);position:relative;overflow:hidden}
.rcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rcard .thumb .ph{width:100%;height:100%;display:grid;place-items:center;color:var(--muted);
  font-size:12px;text-align:center;padding:10px}
.rcard .thumb .src{position:absolute;top:8px;inset-inline-start:8px;background:rgba(3,6,10,.72);
  color:#fff;border-radius:999px;padding:3px 9px;font-size:11px}
.rcard .b{padding:13px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.rcard h4{font-size:14.5px;line-height:1.35;margin:0}
.rcard .why{color:var(--ink-2);font-size:12.5px;line-height:1.5}
.rcard .rmeta{color:var(--muted);font-size:11.5px;display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;font-family:var(--mono)}
.rcard .acts{margin-top:auto;display:flex;gap:8px;align-items:center;padding-top:4px}
/* زرّ «+» مربّع بلا كلمة: الفعل الثانوي بجانب «ما القصة؟» — يأخذ حجم أيقونة
   لا حجم جملة، فلا يزاحم القراءةَ التي هي غرض الرادار. */
.rcard .rcard-add{width:34px;min-width:34px;padding:0;display:grid;place-items:center}
.rcard .rcard-add svg{width:16px;height:16px}

/* مؤشّر الدرجة: شريط هادئ لا رقم صارخ — الدرجة ترتيب نسبي لا حكم مطلق،
   والرقم يبقى متاحاً في التلميح لمن يريده. */
.score{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);
  font-family:var(--mono)}
.score .track{width:52px;height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.score .fill{height:100%;background:var(--accent);border-radius:999px}

.radar-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.srcline{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.tabrow{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);
  border-radius:10px;padding:13px 14px;background:var(--surface);margin-bottom:10px}
.tabrow .hd{display:flex;align-items:center;gap:9px}
.tabrow .hd input[type=text]{max-width:220px}
/* منتقي الدولة عنصر في شريط لا حقل نموذج: `select` في هذه الواجهة عرضه كامل
   افتراضياً، وهنا يجب أن يأخذ قدر نصّه. */
.radar-bar select{width:auto;min-width:150px}

/* ---------------- الرئيسية: اختصارات ---------------- */
/* الصفحة الأولى سؤالها واحد: «ماذا تريد أن تفعل؟». فالاختصارات هي المحتوى،
   لا زينة فوقه — ولذلك تأتي أولاً وتأخذ الوزن البصري، والأرقام تنزل تحتها
   إلى صفّ واحد خفيف. وكل بطاقة تحمل سطر سببها: بطاقة تظهر بلا سبب تدرّب
   المستخدم على تجاهل المكان كلّه. */
.shortcuts{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  margin-bottom:22px}
.sc{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:right;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:border-color .14s ease,background .14s ease,transform .1s ease-out}
.sc:hover{border-color:var(--line-3);background:var(--surface-2)}
.sc:active{transform:scale(.985)}
.sc .ic{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;
  background:var(--surface-2);color:var(--ink-2)}
.sc .ic svg{width:16px;height:16px}
.sc .t{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.sc .t b{font-family:var(--display);font-size:14px;font-weight:700;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc .t span{color:var(--muted);font-size:11.5px;line-height:1.5}
.sc.key{background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
.sc.key:hover{background:color-mix(in srgb,var(--accent) 15%,var(--surface))}
.sc.key .ic{background:var(--accent-solid);color:var(--accent-ink)}
.sc.alert{border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.sc.alert .ic{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.sc.due .ic{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}

/* الأرقام مرجع لا عنوان: صفّ واحد خفيف بدل أربع بطاقات بأرقام ٣٠ بكسل. */
.tally{display:flex;flex-wrap:wrap;gap:12px 30px;padding:14px 16px}
.tally .n{display:flex;flex-direction:column;gap:1px}
.tally .n b{font-family:var(--display);font-size:19px;font-weight:700;line-height:1.15}
.tally .n span{color:var(--muted);font-size:11.5px}

/* صفّ مشروع في «أحدث المشاريع» */
.plist{display:flex;flex-direction:column}
.plist button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 4px;
  background:none;border:0;border-top:1px solid var(--line);cursor:pointer;
  color:var(--ink);text-align:right;font-size:13px}
.plist button:first-child{border-top:0}
.plist button:hover{background:var(--surface-2)}
.plist .nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.plist .mt{color:var(--muted);font-size:11.5px;white-space:nowrap}
@media(max-width:560px){.plist .mt.when{display:none}}

/* نتائج البحث في التفريغات: صفٌّ لكل مقطع مطابق — الزمن أولاً ثم النصّ.
   الزمن بخطّ أحادي وبعرض ثابت فتصطفّ الطوابع رأسياً وتُقرأ كعمود. */
.hits{display:flex;flex-direction:column}
.hit{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:right;
  padding:9px 6px;background:none;border:0;border-top:1px solid var(--line);
  cursor:pointer;color:var(--ink);font-size:13px;line-height:1.75}
.hit:first-child{border-top:0}
.hit:hover{background:var(--surface-2)}
.hit .at{flex:none;min-width:46px;font-family:var(--mono);font-size:11.5px;
  color:var(--muted);padding-top:3px}
.hit .snip{flex:1;min-width:0}
/* التظليل بخلفية لا بلون خطّ: العربية تُقرأ بالكتلة، ولونٌ وحده يضيع في سطر. */
.hit .hl{background:color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:3px;padding:1px 2px;font-weight:700}

/* ═══════════════════════════════ مصمّم القالب — تخطيط ثابت بلا تمرير ═══
   الشكوى التي وُلد منها هذا التخطيط: «لا أريد النزول لأسفل القائمة لتعديل شيء
   ثم أعود للأعلى لأشاهد ما عدّلته». الجواب بنيوي لا تجميلي: الصفحة كلها بارتفاع
   الشاشة، والتمرير يقع **داخل عمودَي اللوحات** وحدهما، فاللوحة (المعاينة) لا
   تغادر مرأى العين أبداً مهما طال ما يعدّله المدير.

   الأعمدة من اليمين (RTL): العناصر وخصائصها · اللوحة · الأقسام العامة. الأقرب
   إلى بداية القراءة هو الأكثر لمساً. */
body.designing{overflow:hidden}
body.designing .shell{min-height:0;height:100dvh}
body.designing .main{height:100dvh;overflow:hidden}
body.designing .content{padding:0;max-width:none;min-height:0;overflow:hidden}

.dsg{display:flex;flex-direction:column;gap:0;height:100%;min-height:0}
.dsg-body{flex:1;min-height:0;display:grid;gap:0;
  grid-template-columns:minmax(300px,330px) minmax(0,1fr) minmax(280px,320px)}
.dsg-col{min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 12px 64px;
  background:var(--bg-2);display:flex;flex-direction:column;gap:10px}
.dsg-col.right{border-inline-start:1px solid var(--line)}
.dsg-col.left{border-inline-end:1px solid var(--line)}
/* بين ١٠٥٠ و١٤٢٠ نضيّق العمودين قبل أن نضيّق اللوحة: اللوحة هي موضوع الشاشة،
   وعمودُ لوحاتٍ أعرض بعشرين بكسلاً لا يساوي معاينةً أضيق بأربعين. */
@media(max-width:1420px){
  .dsg-body{grid-template-columns:minmax(268px,290px) minmax(0,1fr) minmax(248px,272px)}
  .dsg-col{padding:10px 9px 60px}
}
/* تحت ١٠٥٠ بكسل يعود التخطيط إلى عمود واحد يتمرّر: عمودان بعرض ٣٠٠ لا يتركان
   للّوحة ما يكفي، ومعاينةٌ بعرض ١٢٠ بكسل ليست معاينة. */
@media(max-width:1050px){
  body.designing{overflow:auto}
  body.designing .main,body.designing .shell{height:auto}
  body.designing .content{overflow:visible}
  .dsg{height:auto}
  .dsg-body{grid-template-columns:1fr}
  .dsg-col{overflow:visible;padding-bottom:12px}
  /* اللوحة تلتصق أعلى الصفحة بارتفاعٍ صريح: بلا ارتفاع ينهار صفّ الشبكة على
     محتواه فتصير المعاينة مئة بكسل. */
  .dsg-stage{position:sticky;top:0;z-index:5;background:var(--bg);
    height:min(62vh,560px);border-bottom:1px solid var(--line)}
}

/* شريط الأدوات: صفٌّ واحد يحمل كل ما لا يخصّ عنصراً بعينه. */
.dsg-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:7px 10px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.dsg-bar .nm{width:150px;padding:6px 10px;font-size:13px}
.dsg-bar .sep{width:1px;height:22px;background:var(--line);flex:none}
@media(max-width:1520px){.dsg-bar .hide-sm{display:none}}

.dsg-stage{min-width:0;min-height:0;display:grid;gap:8px;
  grid-template-rows:minmax(0,1fr) auto;padding:12px;background:var(--bg)}
.dsg-stage .canvas-wrap{aspect-ratio:auto;align-self:center;justify-self:center}

/* طبقة التحرير فوق اللوحة: مقابض ومربّعات إمساك وخطوط محاذاة. مرسومة بإحداثيات
   اللوحة نفسها ومقيسة بمقياسها، فما تراه العين فوق العنصر هو رقم الخادم لا
   تقديرٌ ثانٍ. */
.dsg-ov{position:absolute;inset:0;transform-origin:top right;pointer-events:none;
  user-select:none;-webkit-user-select:none}
.dsg-hit{position:absolute;pointer-events:auto;cursor:grab;touch-action:none}
.dsg-hit.drag{cursor:grabbing}
.dsg-hit:hover{outline:1px dashed color-mix(in srgb,var(--accent) 60%,transparent)}
.dsg-sel{position:absolute;pointer-events:none;outline:2px solid var(--accent)}
.dsg-sel.out{outline-color:var(--warn)}
/* التحديد المتعدّد: كل عنصر بإطاره، والرفاق أخفّ من الرئيس، وإطار الإحاطة
   المتقطّع حوله كلّه هو ما تُمسك منه المقابض. */
.dsg-sel.sec{outline-style:dashed;opacity:.75}
.dsg-bb{position:absolute;pointer-events:none;
  outline:2px dashed color-mix(in srgb,var(--accent) 70%,transparent)}
.dsg-back{position:absolute;inset:0;pointer-events:auto;touch-action:none}
.dsg-marq{position:absolute;pointer-events:none;
  border:1.5px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}
.dsg-hit.on{cursor:move}
.dsg-h{position:absolute;pointer-events:auto;background:var(--accent);
  border:1px solid #fff;border-radius:2px;touch-action:none}
.dsg-g{position:absolute;background:var(--accent);pointer-events:none;opacity:.9}
.dsg-edit{position:absolute;z-index:8;padding:6px 8px;border-radius:6px;
  border:1px solid var(--accent);background:var(--surface);color:var(--ink);
  font-size:13px;line-height:1.6;resize:none;min-height:34px;box-shadow:var(--shadow)}

/* صفوف لوحة العناصر: عين للإظهار، واسم، وملخّص حيّ. */
.dsg-rows{display:flex;flex-direction:column;gap:2px}
.dsg-row{display:flex;align-items:center;gap:8px;width:100%;text-align:right;
  padding:7px 9px;border-radius:8px;border:1px solid transparent;background:none;
  color:var(--ink);cursor:pointer;font-size:13px}
.dsg-row:hover{background:var(--surface)}
/* الرئيس في تحديدٍ متعدّد يُعلَّم بشريطٍ جانبي: لوحة الخصائص المشتركة تكتب في
   الكلّ، لكن المغنطة أثناء السحب تُحسب عليه هو. */
.dsg-row.lead{box-shadow:inset 3px 0 0 var(--accent)}
.dsg-row.on{background:color-mix(in srgb,var(--accent) 15%,transparent);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.dsg-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsg-row .mt{color:var(--muted);font-size:11px;font-family:var(--mono);flex:none}
.dsg-row .ey{width:24px;height:24px;flex:none;display:grid;place-items:center;
  border-radius:6px;border:0;background:none;color:var(--muted);cursor:pointer}
.dsg-row .ey:hover{background:var(--surface-2);color:var(--ink)}
.dsg-row .ey.on{color:var(--accent)}
.dsg-row .ey svg{width:14px;height:14px}
.dsg-row.bad .nm{color:var(--warn)}

/* لوحةٌ منسدلة تُركَّب على `body` لا داخل العمود: العمود يتمرّر بـ`overflow`
   فيقصّ أي منسدلة تخرج عنه، وقائمةُ ألوانٍ مقصوصة أسوأ من غيابها. */
.dsg-pop{position:fixed;z-index:400;background:var(--surface);
  border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow);
  padding:8px;min-width:210px;max-width:280px;max-height:60vh;overflow:auto}
.dsg-pop .it{display:flex;align-items:center;gap:9px;width:100%;text-align:right;
  padding:7px 9px;border:0;border-radius:7px;background:none;color:var(--ink);
  cursor:pointer;font-size:13px}
.dsg-pop .it:hover{background:var(--surface-2)}
.dsg-pop .it.on{background:color-mix(in srgb,var(--accent) 16%,transparent);font-weight:600}
.dsg-pop .sw{width:15px;height:15px;border-radius:4px;flex:none;
  border:1px solid var(--line-2)}
.dsg-pop .sep{height:1px;background:var(--line);margin:6px 2px}
.dsg-pick{display:flex;align-items:center;gap:8px;width:100%;text-align:right;
  padding:7px 10px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--ink);cursor:pointer;font-size:13px}
.dsg-pick:hover{border-color:var(--line-3)}
.dsg-pick .sw{width:15px;height:15px;border-radius:4px;flex:none;border:1px solid var(--line-2)}
.dsg-pick .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsg-pick .cv{color:var(--muted);font-size:11px;font-family:var(--mono)}

/* شريط ملاحظات المحرّك تحت اللوحة: يبقى ظاهراً دائماً ولا يزيح المعاينة —
   ارتفاعه محدود وله تمريره. */
.dsg-warn{max-height:84px;overflow:auto;background:color-mix(in srgb,var(--warn) 14%,var(--bg-2));
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  border-radius:9px;padding:7px 10px;font-size:11.5px;line-height:1.65;color:var(--warn)}

.dsg-sec{border:1px solid var(--line);border-radius:10px;background:var(--surface);
  overflow:hidden}
.dsg-sec > summary{padding:9px 12px;cursor:pointer;display:flex;align-items:center;
  gap:9px;list-style:none;user-select:none;font-size:13.5px}
.dsg-sec > summary::-webkit-details-marker{display:none}
.dsg-sec > summary b{font-family:var(--display);font-size:14px}
.dsg-sec > summary .sum{color:var(--muted);font-size:11.5px;font-family:var(--mono);
  margin-inline-start:auto}
.dsg-sec[open] > summary{border-bottom:1px solid var(--line)}
.dsg-sec .inner{padding:12px}
.dsg-sec .inner label.f{margin-bottom:9px}
.dsg-ttl{font-size:11px;letter-spacing:.04em;color:var(--muted);font-weight:600;
  padding:2px 4px 0}

/* ── معاينة إصدارٍ سابق (نافذة «الإصدارات») ──
   نفس `.canvas-wrap` بعرضٍ محدود: `paintLayout` يقيس `wrap.clientWidth` ويصغّر
   اللوحة إليه، فحاويةٌ بلا عرضٍ صريح داخل نافذةٍ عريضة تُخرج معاينةً بحجم
   الشاشة. ونسبة الأبعاد تُضبط من القالب نفسه في JS لأنها ليست ٩:١٦ دائماً. */
.dsg-vpv-wrap { width: min(300px, 62vw); margin-inline: auto; }

/* ================================================ مستندات الطباعة
   العقد والفاتورة يُطبعان من المتصفّح إلى PDF. الجذر `#printroot` مخفيّ على
   الشاشة تماماً ولا يظهر إلا في الطباعة، والصفحة كلها تُخفى مقابله — فما
   يخرج على الورق هو المستند وحده بلا شريطٍ جانبي ولا أزرار. */
#printroot{display:none}
.doc{max-width:190mm;margin:0 auto;padding:14mm 12mm;color:#12171E;background:#fff;
  font-family:var(--body);font-size:11.5pt;line-height:1.8}
.doc .mono{font-family:var(--mono)}
.doc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  border-bottom:2px solid #12171E;padding-bottom:10px}
.doc-mark{width:52mm;height:auto;display:block}
.doc-issuer{text-align:left;font-size:9.5pt;color:#5A6672;line-height:1.5}
.doc-title{display:flex;align-items:baseline;justify-content:space-between;margin:14px 0 4px}
.doc-title h1{font-family:var(--display);font-size:22pt;margin:0;letter-spacing:-.01em}
.doc-title .big{font-size:12pt;color:#25706A}
.doc-meta{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px;margin:12px 0 18px;
  border-top:1px solid #D0D6DC;border-bottom:1px solid #D0D6DC;padding:9px 0}
.doc-meta .m{display:flex;gap:8px;font-size:10.5pt}
.doc-meta .m span{color:#5A6672;min-width:6.5em}
.doc-table{width:100%;border-collapse:collapse;margin:6px 0 10px;font-size:10.5pt}
.doc-table th{text-align:right;font-weight:600;color:#5A6672;font-size:9.5pt;
  border-bottom:1px solid #12171E;padding:6px 4px}
.doc-table td{padding:7px 4px;border-bottom:1px solid #E4E8EC;vertical-align:top}
.doc-table .num{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-sums{margin-inline-start:auto;max-width:78mm}
.doc-sums .sl{display:flex;justify-content:space-between;gap:20px;padding:4px 0;font-size:10.5pt}
.doc-sums .sl.strong{border-top:2px solid #12171E;margin-top:4px;padding-top:7px;font-size:13pt}
.doc-sums .fx{margin-top:8px;font-size:9.5pt;color:#5A6672;text-align:left}
.doc-note{margin-top:16px;padding:9px 11px;background:#F2F4F6;border-radius:3px;font-size:10pt}
.doc-foot{margin-top:18px;padding-top:9px;border-top:1px solid #D0D6DC;
  font-size:9.5pt;color:#5A6672}
.doc .clause{margin:14px 0;break-inside:avoid}
.doc .clause h3{font-family:var(--display);font-size:12.5pt;margin:0 0 3px}
.doc .clause p{margin:0;font-size:10.5pt}
.doc .sign{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px;break-inside:avoid}
.doc .sign .sb .k{font-size:9.5pt;color:#5A6672}
.doc .sign .sb .line{height:1px;background:#12171E;margin:26px 0 6px}
@media print{
  @page{size:A4;margin:0}
  body>*{display:none!important}
  body>#printroot{display:block!important}
  body{background:#fff!important}
}

/* ================================================ «نبضة» — المساعد العائم
   الكائن هو شارة «نبض» وقد فُتحت لها عينان، ونبضتُها فمها. لم تُستورد تميمة
   من خارج الهوية: العلامة هي التي دبّت فيها الحياة. ولذلك تتصرّف النبضة كما
   يتصرّف القلب — تهدأ في السكون، وتتسارع حين تفكّر، وتستقيم حين تعتذر. */
.nb-host{position:fixed;inset-inline-start:18px;bottom:18px;z-index:60;
  display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px}
@media (max-width:640px){ .nb-host{inset-inline-start:12px;bottom:12px} }

.nb-creature{position:relative;width:56px;height:56px;padding:0;border:0;
  background:none;cursor:pointer;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));
  transition:transform .18s cubic-bezier(.34,1.4,.64,1)}
.nb-creature:hover{transform:translateY(-3px) scale(1.04)}
.nb-creature:active{transform:translateY(-1px) scale(.97)}
.nb-creature:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:14px}
.nb-face{width:100%;height:100%;display:block}
.nb-field{fill:#12171E}
:root[data-theme="light"] .nb-field{fill:#12171E}
.nb-eye{fill:#FFFFFF;transform:translate(calc(var(--ex,0)*1px),calc(var(--ey,0)*1px));
  transition:transform .28s cubic-bezier(.22,1,.36,1)}
.nb-creature.blink .nb-eye{transform:translate(calc(var(--ex,0)*1px),calc(var(--ey,0)*1px)) scaleY(.12);
  transform-origin:center 42px;transition:transform .08s linear}
.nb-pulse{stroke:#4FA79E;stroke-width:5.5;
  animation:nb-beat 2.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes nb-beat{
  0%,72%,100%{opacity:.9;transform:scaleY(1)}
  78%{opacity:1;transform:scaleY(1.35)}
  86%{transform:scaleY(.9)}
}
.nb-pulse{transform-box:fill-box;transform-origin:center}
/* يفكّر: النبضة تتسارع. يبتهج: تعلو. يعتذر: تستقيم خطّاً. */
.nb-creature[data-mood="think"] .nb-pulse{animation-duration:.7s}
.nb-creature[data-mood="happy"] .nb-pulse{stroke:#5FC4B8;animation-duration:1.1s}
.nb-creature[data-mood="flat"] .nb-pulse{animation:none;opacity:.55}
.nb-creature.nudge{animation:nb-nudge .9s cubic-bezier(.36,.07,.19,.97)}
@keyframes nb-nudge{0%,100%{transform:none}20%{transform:rotate(-7deg)}
  45%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}}
.nb-dot{position:absolute;top:-2px;inset-inline-end:-2px;width:13px;height:13px;
  border-radius:50%;background:var(--danger);border:2px solid var(--bg)}

.nb-panel{width:min(360px,calc(100vw - 36px));max-height:min(70vh,560px);
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);animation:nb-in .22s cubic-bezier(.22,1,.36,1)}
@keyframes nb-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
.nb-panel>header{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.nb-panel>header b{font-family:var(--display);font-size:16px}
.nb-sub{color:var(--muted);font-size:11.5px}
.nb-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.nb-msg{max-width:92%}
.nb-msg.user{align-self:flex-start}
.nb-msg.bot{align-self:flex-end}
.nb-txt{padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.75;
  white-space:pre-wrap}
.nb-msg.bot .nb-txt{background:var(--surface-2);border:1px solid var(--line)}
.nb-msg.user .nb-txt{background:var(--accent);color:var(--accent-ink)}
.nb-src{font-size:10.5px;color:var(--muted);margin-top:4px;padding-inline:4px}
.nb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.nb-chips .chip{font-size:12px;padding:5px 9px}
.nb-ask{display:flex;gap:7px;padding:10px;border-top:1px solid var(--line);
  background:var(--surface-2)}
.nb-input{flex:1;min-width:0}
.nb-typing{display:flex;gap:4px;align-self:flex-end;padding:12px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.nb-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:nb-type 1.1s ease-in-out infinite}
.nb-typing i:nth-child(2){animation-delay:.16s}
.nb-typing i:nth-child(3){animation-delay:.32s}
@keyframes nb-type{0%,60%,100%{opacity:.3;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-4px)}}

@media (prefers-reduced-motion: reduce){
  .nb-pulse,.nb-creature.nudge,.nb-typing i{animation:none!important}
  .nb-creature,.nb-eye{transition:none!important}
  .nb-panel{animation:none}
}
@media print{ .nb-host{display:none!important} }

/* خيط الحالة في صفحة الدعم — نفس فقاعات المساعد كي يقرأ المستخدم الشيء
   نفسه في المكانين، لا تصميمين لمحادثةٍ واحدة. */
.nb-thread{display:flex;flex-direction:column;gap:9px;margin:11px 0 4px;
  padding:11px;background:var(--bg-2);border-radius:10px}
.nb-thread .nb-msg{max-width:88%}
.nb-ctx{margin-top:10px;font-size:12.5px}
.nb-ctx summary{cursor:pointer;color:var(--muted);padding:4px 0}
.nb-ctx .kvs{margin-top:6px}