/* ══════════════════════════════════════════════════════════════════════
   sawab-noble.css — «صُوَّاب · حِجْر»
   الطبقة الأخيرة فوق كل الأنماط. فكرتها: الحجر المنحوت لا الزجاج المتوهّج.
   • الأسطح حجرٌ رملي مطفأ بحافةٍ علوية مضاءة كأنها منحوتة، بلا ضبابية ولا وهج.
   • البصمة: «تاج الحِجْر» — الدرج النبطي الذي يتوّج واجهات مدافن الحِجْر،
     يتوّج بطاقة الدخول وبطاقة المؤشر الرئيسي ويعلّم البند النشط في القائمة.
   • خطٌّ واحد رسمي لكل الواجهة: IBM Plex Sans Arabic — خطّ «كود المنصات»
     الموحّد للمنصات الحكومية، بأوزانه الأربعة 400 · 500 · 600 · 700.
   • لا حركة دائمة: لحظة دخول واحدة مدروسة، ثم سكون.
   تُطبَّق على الشاشة وحدها — الطباعة الرسمية (PDF) تبقى كما هي.
   حذف هذا الملف وسطر تحميله يُرجع الواجهة السابقة تمامًا.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexSansArabic-400-arabic.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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/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(fonts/IBMPlexSansArabic-500-arabic.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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/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(fonts/IBMPlexSansArabic-600-arabic.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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/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(fonts/IBMPlexSansArabic-700-arabic.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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/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}

@media screen{

/* ══════════ الخطّ الرسمي على كل عنصر ══════════ */
/* html نفسه أيضًا: خطّه الأساسي يُقاس به وإن لم يحمل نصًّا، فكان يستدعي «علم» على الشاشة */
html,html body,html body *{font-family:var(--nb-font)!important}
html body :is(pre,code,kbd,samp,.cmd,.fp,.rep-f,.rep-sign .h,.token-out .val){font-family:ui-monospace,"Cascadia Mono",Consolas,monospace!important}

/* ══════════ الرموز · ليل الحِجْر ══════════
   بازلت الحرّة للأرضية · حجر رملي للأسطح · ذهب الهيئة للفعل
   نخيل الواحة للقبول · سماء العُلا للإسناد · مغرة الحِجْر للإعادة */
:root{
  --nb-basalt:#0F0D0B;
  --nb-stone:#18140F;
  --nb-stone-2:#201B15;
  --nb-gold:#D4B27B;
  --nb-gold-2:#BA9863;
  --nb-sand:#F2E8D8;
  /* الذهب والحبر بأرقامهما لِـ rgba(): كل تظليلٍ وحدٍّ وحلقةٍ يُشتقّ منهما، فتبديل الهوية يبدّلها كلها */
  --nb-gold-rgb:212,178,123;
  --nb-ink-rgb:242,232,216;
  --nb-on-gold:#1B150D;
  --nb-gold-hover:#DEBF8C;
  --nb-amber:#DDA862;
  --nb-rail-ink:#FBF4E8;
  --nb-rail-ink-2:#D9CDBA;
  --nb-gate-bg:var(--nb-basalt);
  /* «علم» ليس في قائمة الشاشة: لا يرسم فيها حرفًا (الرموز التي يفتقدها Plex يرسمها خط النظام)،
     وكان المتصفح ينزّل ملفاته في كل زيارة ليتأكد من ذلك. الطباعة تبقى عليه بقاعدة elm-apply. */
  --nb-font:"IBM Plex Sans Arabic","Tajawal","Segoe UI",Tahoma,sans-serif;
  --nb-display:var(--nb-font);
  --nb-ease:cubic-bezier(.2,.8,.2,1);
  --nb-carve:inset 0 1px 0 rgba(255,236,205,.055),inset 0 -1px 0 rgba(0,0,0,.35);
  --nb-lift:0 1px 0 rgba(0,0,0,.5),0 28px 56px -38px rgba(0,0,0,.95);

  --canvas:var(--nb-basalt);
  --panel:var(--nb-stone);
  --panel-solid:var(--nb-stone);
  --soft:var(--nb-stone-2);
  --seg-bg:#14110D;
  --field-bg:#13100D;
  --thead-bg:#1A1611;
  --row-hover:rgba(var(--nb-gold-rgb),.045);
  --track:rgba(var(--nb-ink-rgb),.07);
  --head-bg:rgba(15,13,11,.84);

  --ink:var(--nb-sand);
  --ink-2:#CDBFAB;
  --ink-3:#978A79;
  --line:rgba(var(--nb-ink-rgb),.075);
  --line-strong:rgba(var(--nb-ink-rgb),.13);

  --gold:var(--nb-gold);
  --gold-deep:var(--nb-gold-2);
  --gold-tint:rgba(var(--nb-gold-rgb),.075);
  --gold-line:rgba(var(--nb-gold-rgb),.26);
  --gold-ring:rgba(var(--nb-gold-rgb),.22);

  --rail-bg:#0B0908;
  --rail-active:rgba(var(--nb-gold-rgb),.07);

  --ok:#A3BF92;  --ok-tint:rgba(163,191,146,.09);  --ok-line:rgba(163,191,146,.26);
  --bad:#DB8E6B; --bad-tint:rgba(219,142,107,.09); --bad-line:rgba(219,142,107,.26);

  --c1:#A3BF92; --c2:#93ACC8; --c3:#DB8E6B; --c4:#8C8173; --seq:var(--nb-gold);
  --gem-gold:var(--nb-gold); --gem-jade:var(--c1); --gem-sapph:var(--c2); --gem-amber:var(--nb-amber);
  --lx-gold-grad:var(--nb-gold);
  --lx-glow:var(--nb-carve),var(--nb-lift);
  --hero-bg:var(--nb-stone);
  --hero-bg-solid:var(--nb-stone);
  --hero-line:rgba(var(--nb-gold-rgb),.24);
  --r-lg:14px; --r-sm:10px;
}

/* ══════════ نهار الحِجْر · بيج المجتمع وبنّي إكمة ══════════ */
html[data-theme="light"]{
  --nb-stone:#FFFFFF;
  --nb-stone-2:#FBF8F3;
  /* ذهبٌ أعمق للنهار: يقرأ نصًّا صغيرًا بتباين 4.5:1 على الورق، والأزرار عليه بنصٍّ أبيض */
  --nb-gold:#85642F;
  --nb-gold-2:#6E522A;
  --nb-gold-rgb:133,100,47;
  --nb-on-gold:#FFFFFF;
  --nb-gold-hover:#94713A;
  /* طبقة index.html تضبط هذه مباشرةً في النهار فتغلب :root — تُثبَّت هنا */
  --gold:var(--nb-gold);
  --gold-deep:var(--nb-gold-2);
  --nb-ink-rgb:61,57,54;
  --nb-amber:#C08A3A;
  --nb-gate-bg:#F3EDE4;
  --nb-carve:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(61,57,54,.05);
  --nb-lift:0 1px 2px rgba(61,57,54,.05),0 22px 44px -34px rgba(61,57,54,.45);

  --canvas:#F8F4EF;
  --seg-bg:#FFFFFF;
  --field-bg:#FFFFFF;
  --thead-bg:#F5EFE6;
  --row-hover:#FBF6EE;
  --track:#ECE4D8;
  --head-bg:rgba(248,244,239,.88);

  --ink:#2A2522;
  --ink-2:#5A514A;
  --ink-3:#6E645B;
  --line:rgba(var(--nb-ink-rgb),.09);
  --line-strong:rgba(var(--nb-ink-rgb),.16);

  --gold-tint:rgba(var(--nb-gold-rgb),.08);
  --gold-line:rgba(var(--nb-gold-rgb),.32);
  --gold-ring:rgba(var(--nb-gold-rgb),.22);

  --rail-active:rgba(var(--nb-gold-rgb),.09);

  --ok:#4A6B3D;  --ok-tint:rgba(74,107,61,.08);  --ok-line:rgba(74,107,61,.24);
  --bad:#B05636; --bad-tint:rgba(176,86,54,.07); --bad-line:rgba(176,86,54,.24);

  /* ألوان الحالة تُكتب نصًّا أيضًا («مقبول» · «مُعاد» · «مُسند») فتبلغ 4.5:1 على الورق */
  --c1:#4F7343; --c2:#4E6E95; --c3:#A9532F; --c4:#8F8478; --seq:var(--nb-gold);
  --gate-ink-3:var(--ink-3); --rail-ink-3:var(--ink-3);
  --gem-gold:var(--nb-gold); --gem-jade:var(--c1); --gem-sapph:var(--c2); --gem-amber:var(--nb-amber);
  --lx-gold-grad:var(--nb-gold);
  --hero-line:rgba(var(--nb-gold-rgb),.30);
}

/* ══════════ تاج الحِجْر — قناعان: حشوة الحجر وخطّه الذهبي ══════════
   الشكل 240×48: درجٌ صاعد خمس درجات، سطحٌ، ودرجٌ نازل. الخط القاعدي عند y=44. */
:root{
  --nb-crown-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48'%3E%3Cpath d='M0 44H40V36H56V28H72V20H88V12H104V4H136V12H152V20H168V28H184V36H200V44H240V48H0Z'/%3E%3C/svg%3E");
  --nb-crown-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48'%3E%3Cpath d='M0 44.6H40.6V36.6H56.6V28.6H72.6V20.6H88.6V12.6H104.6V4.6H135.4V12.6H151.4V20.6H167.4V28.6H183.4V36.6H199.4V44.6H240' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
  --nb-step:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 9V6H3V3H5V0H9V3H11V6H14V9Z'/%3E%3C/svg%3E");
}

/* ══════════ الأرضية: بازلت ساكن وضوء قمرٍ واحد ══════════ */
body{background:var(--canvas)!important;background-image:none!important}
#app::before{
  animation:none!important;inset:0;
  background:
    radial-gradient(55% 45% at 100% 0%,rgba(var(--nb-gold-rgb),.075),transparent 70%),
    radial-gradient(40% 35% at 0% 100%,rgba(var(--nb-gold-rgb),.035),transparent 70%);
}
html[data-theme="light"] #app::before{opacity:1;background:radial-gradient(60% 45% at 100% 0%,rgba(var(--nb-gold-rgb),.10),transparent 70%)}
#app::after{opacity:.035}
.appbg{opacity:.5}

/* ══════════ الشريط الجانبي: عمود من البازلت ══════════ */
html:not([data-theme="light"]) #app>.rail{
  background:var(--rail-bg)!important;
  border-inline-start:1px solid rgba(var(--nb-gold-rgb),.12)!important;
}
.rail::before{background:radial-gradient(90% 100% at 60% 0%,rgba(var(--nb-gold-rgb),.09),transparent 70%)}
.brand{border-bottom-color:rgba(var(--nb-gold-rgb),.10)}
.brand .mark{filter:none;border-radius:9px}
.brand h1{
  font-family:var(--nb-display)!important;font-weight:600;font-size:18px;letter-spacing:0;
  background:none;color:var(--nb-rail-ink);-webkit-text-fill-color:currentColor;
}
html[data-theme="light"] .brand h1{color:var(--ink)}
.brand p{color:rgba(var(--nb-gold-rgb),.85)}
.nav a{position:relative;border-radius:10px;border:1px solid transparent}
.nav a:hover{transform:none;background:rgba(var(--nb-ink-rgb),.04);border-color:transparent}
.nav a.on,
html:not([data-theme="light"]) .nav a.on,
html[data-theme="light"] .nav a.on{
  background:var(--rail-active);border-color:rgba(var(--nb-gold-rgb),.16);box-shadow:none;color:var(--nb-rail-ink);
}
/* البند النشط: درجةٌ من تاج الحِجْر بدل الشريط المتوهّج */
.nav a.on::before{
  content:"";position:absolute;top:50%;bottom:auto;inset-inline-end:12px;inset-inline-start:auto;
  width:14px;height:9px;margin-top:-5px;border-radius:0;box-shadow:none;
  background:var(--nb-gold);-webkit-mask:var(--nb-step) center/contain no-repeat;mask:var(--nb-step) center/contain no-repeat;
}
.nav a .ic{background:transparent!important;box-shadow:none!important;border-radius:7px}
.nav a.on .ic{color:var(--nb-gold)!important;background:transparent!important}
html[data-theme="light"] .nav a.on{color:var(--ink);border-color:rgba(var(--nb-gold-rgb),.24)}
.nav .sep{letter-spacing:.02em;color:rgba(var(--nb-gold-rgb),.55)}
html[data-theme="light"] .nav .sep{color:var(--gold-deep)}
.me{border-top-color:rgba(var(--nb-gold-rgb),.10)}
.me .nm{font-family:var(--nb-display)!important;font-weight:600}
.me .p-role{background:transparent!important;color:var(--nb-gold)!important;border:1px solid rgba(var(--nb-gold-rgb),.35)!important;font-weight:600}

/* ══════════ الترويسة: سطرٌ هادئ وعنوانٌ كوفي ══════════ */
.head{
  background:var(--head-bg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)!important;border-image:none!important;
}
.head h2{
  font-family:var(--nb-display)!important;font-weight:700;font-size:27px;letter-spacing:0;line-height:1.35;
  background:none;color:var(--ink);-webkit-text-fill-color:currentColor;
}
.head p{color:var(--ink-3)}

/* ══════════ الأزرار والمقاطع: ذهبٌ مصمت، بلا وهج ══════════ */
.seg{background:var(--seg-bg);border:1px solid var(--line-strong);backdrop-filter:none}
.seg button{color:var(--ink-2)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--lx-gold-grad);color:var(--nb-on-gold);box-shadow:inset 0 1px 0 rgba(255,250,240,.35)}
.btn:not(.ghost){
  background:var(--lx-gold-grad);color:var(--nb-on-gold);border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,250,240,.35),0 1px 0 rgba(0,0,0,.25);
}
.btn:not(.ghost):hover{transform:none;filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,250,240,.4),0 10px 22px -14px rgba(var(--nb-gold-rgb),.6)}
.btn.ghost{backdrop-filter:none;border-color:var(--line-strong);color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--gold-line);color:var(--ink);background:var(--gold-tint)}
html:not([data-theme="light"]) .rail .btn.ghost{border-color:rgba(var(--nb-ink-rgb),.14);color:var(--nb-rail-ink-2)}
html:not([data-theme="light"]) .rail .btn.ghost:hover{border-color:rgba(var(--nb-gold-rgb),.4);color:var(--nb-rail-ink);background:rgba(var(--nb-gold-rgb),.08)}

/* ══════════ البطاقات: حجرٌ منحوت ══════════ */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--nb-carve),var(--nb-lift);
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  transition:border-color .3s var(--nb-ease),box-shadow .3s var(--nb-ease);
}
.card::before,.card::after{display:none}
.card:hover{border-color:var(--line-strong)}
.card h3{font-family:var(--nb-display)!important;font-weight:600;font-size:18px;letter-spacing:0}
.card > .tablebtn{backdrop-filter:none}

/* ══════════ البطل: بطاقة المؤشر الرئيسي يتوّجها التاج ══════════ */
.card.hero{
  --cw:200px;
  overflow:visible;margin-top:calc(var(--cw) * .19);
  background:
    radial-gradient(70% 120% at 100% 0%,rgba(var(--nb-gold-rgb),.07),transparent 65%),
    var(--panel);
  border-color:var(--hero-line);
}
.card.hero::before,.card.hero::after{
  display:block!important;content:"";position:absolute;z-index:3;pointer-events:none;
  inset:auto;left:calc(50% - var(--cw) / 2);top:calc(var(--cw) * -.1833 - 1px);
  width:var(--cw);height:calc(var(--cw) * .2);padding:0;border:0;border-radius:0;transform:none;
  animation:none;opacity:1;box-shadow:none;
}
.card.hero::after{background:var(--panel);-webkit-mask:var(--nb-crown-fill) 0 0/100% 100% no-repeat;mask:var(--nb-crown-fill) 0 0/100% 100% no-repeat}
.card.hero::before{z-index:4;background:var(--nb-gold);-webkit-mask:var(--nb-crown-line) 0 0/100% 100% no-repeat;mask:var(--nb-crown-line) 0 0/100% 100% no-repeat}
.card.hero .big,.card.hero .big *{font-family:var(--nb-display)!important;font-weight:600;letter-spacing:0}
.card.hero .big b{background:none;-webkit-text-fill-color:currentColor;color:var(--nb-gold)}
#gauge::before{animation:none;opacity:.45;filter:blur(14px)}
#gauge svg{filter:none}
#gauge text:first-of-type{font-family:var(--nb-display)!important;font-weight:600}
.stack{height:8px;gap:2px}
.stack i{box-shadow:none}
.stack i::after{display:none}
.keys span{background:transparent;border-color:var(--line)}

/* ══════════ البلاطات: رقمٌ كوفي على حجرٍ مطفأ ══════════ */
#tiles .card.tile::before,#tiles .card.tile::after{display:none}
.card.tile:hover{transform:none;box-shadow:var(--nb-carve),var(--nb-lift);border-color:color-mix(in srgb,var(--gem) 35%,var(--line))}
.tile .k{color:var(--ink-2);font-size:13.5px}
.tile .lx-ic{
  width:30px;height:30px;border-radius:8px;box-shadow:none;
  background:transparent;border:1px solid color-mix(in srgb,var(--gem) 28%,transparent);
  color:color-mix(in srgb,var(--gem) 85%,var(--ink));
}
.tile .lx-ic svg{width:15px;height:15px;stroke-width:1.6}
.tile .v *{font-family:var(--nb-display)!important}
.tile .v{
  font-family:var(--nb-display)!important;font-weight:600;font-size:42px;letter-spacing:0;line-height:1.2;
  background:none;-webkit-text-fill-color:currentColor;color:var(--ink);
}
.tile .lx-meter{height:3px;margin-top:16px}
.tile .lx-meter i{box-shadow:none;background:var(--gem)}
.tile .lx-pct{color:color-mix(in srgb,var(--gem) 85%,var(--ink))}

/* ══════════ الرسوم والجداول ══════════ */
svg .bar{filter:none}
svg .bar:hover{filter:brightness(1.12)}
.bar-row .tr i{background:var(--nb-gold);box-shadow:none}
.scroll{border-radius:12px;border-color:var(--line);background:transparent}
thead th{
  background:var(--thead-bg)!important;color:var(--ink-3);font-weight:600;letter-spacing:0;
  border-bottom:1px solid var(--line-strong);backdrop-filter:none!important;
}
html[data-theme="light"] thead th{color:var(--ink-3)}
tbody tr:hover td:first-child{box-shadow:inset -2px 0 0 var(--nb-gold)}
td{font-variant-numeric:tabular-nums}
#tip{backdrop-filter:none;background:var(--nb-stone-2);box-shadow:0 20px 40px -20px rgba(0,0,0,.8),0 0 0 1px var(--line-strong)}

/* ══════════ الشارات والتنبيهات والحقول ══════════ */
.pill{backdrop-filter:none}
.p-ok,.p-bad,.p-sys{box-shadow:none}
.alert{background:var(--gold-tint);border-color:var(--gold-line);box-shadow:none;backdrop-filter:none}
.alert .ic{background:transparent;color:var(--nb-gold);border:1px solid var(--gold-line);box-shadow:none}
.filterbar{background:var(--panel);backdrop-filter:none;box-shadow:var(--nb-carve),var(--nb-lift);border-color:var(--line)}
.empty .ic{filter:none}
.empty b,tr.empty-row b{font-family:var(--nb-display)!important;font-weight:600}
input[type=text],input[type=password],input[type=search],input[type=date],select{background-color:var(--field-bg)}
input:focus,select:focus{border-color:var(--nb-gold);box-shadow:0 0 0 3px var(--gold-ring)}
::selection{background:rgba(var(--nb-gold-rgb),.32)}
*{scrollbar-color:rgba(var(--nb-gold-rgb),.22) transparent}
::-webkit-scrollbar-thumb{background:rgba(var(--nb-gold-rgb),.25)}
.nav a:focus-visible,.seg button:focus-visible,.btn:focus-visible,a:focus-visible,button:focus-visible,select:focus-visible{
  outline:2px solid var(--nb-gold);outline-offset:2px;box-shadow:none
}
.wz-head h3,.wz-pane h4{font-family:var(--nb-display)!important;font-weight:600}

/* ══════════ دخول المشاهد: صعودٌ قصير واحد ══════════ */
.lx-enter .card{animation:nb-rise .55s var(--nb-ease) backwards}
@keyframes nb-rise{from{opacity:0;transform:translateY(8px)}}

/* ══════════════════════════════════════════════════════════════════════
   بوابة الدخول — واجهة مدفنٍ نبطي: بطاقة الدخول بابٌ يعلوه التاج
   ══════════════════════════════════════════════════════════════════════ */
.gate{background:var(--nb-gate-bg)}
html[data-theme="light"] .gate{background:var(--nb-gate-bg)}
.gate::after{opacity:.12}
.gate-bg .sun,.gate-bg .arc,.gate-bg::after,.gate-bg .lines{animation:none!important}
.gate-bg::after{opacity:.5}
.gate-top,.gate-aside>*,.gate-foot{animation-duration:.6s!important}
.gate-top .chip{backdrop-filter:none}

.gate .gate-word h1{
  font-family:var(--nb-display)!important;font-weight:700;letter-spacing:0;line-height:1.3;
  font-size:clamp(34px,3.4vw,52px);
  animation:none;filter:none;background:none;-webkit-text-fill-color:currentColor;color:var(--nb-sand);
}
html[data-theme="light"] .gate .gate-word h1{color:#2A2522}
.gate .gate-word .tagpro{border-color:var(--gold-line);color:var(--nb-gold)}
.gate .gate-head,.gate .gate-head *{font-family:var(--nb-display)!important;font-weight:600;line-height:1.55}
.gate .gate-head b{color:var(--nb-gold);background:none;-webkit-text-fill-color:currentColor}
.gate .gs-v,.gate .alula-ar{font-family:var(--nb-display)!important;font-weight:600}
.gate-stats{backdrop-filter:none}

.gate-main{
  --cw:220px;
  position:relative;overflow:visible!important;
  margin-top:calc(var(--cw) * .2);
  background:var(--nb-stone)!important;
  border:1px solid rgba(var(--nb-gold-rgb),.22)!important;
  border-radius:4px 4px 14px 14px!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:var(--nb-carve),0 50px 90px -50px #000!important;
  animation:nb-rise .7s .1s var(--nb-ease) backwards!important;
}
html[data-theme="light"] .gate-main{border-color:rgba(var(--nb-gold-rgb),.30)!important;box-shadow:var(--nb-carve),0 40px 80px -46px rgba(61,57,54,.5)!important}
/* حشوة التاج بلون البطاقة، فوقها خطّه الذهبي يُرسم عند الدخول */
.gate-main::before{
  content:""!important;display:block!important;position:absolute!important;z-index:2;pointer-events:none;
  inset:auto!important;left:calc(50% - var(--cw) / 2)!important;top:calc(var(--cw) * -.1833 - 1px)!important;
  width:var(--cw)!important;height:calc(var(--cw) * .2)!important;
  padding:0!important;border:0!important;border-radius:0!important;opacity:1!important;animation:none!important;
  background:var(--nb-stone)!important;
  -webkit-mask:var(--nb-crown-fill) 0 0/100% 100% no-repeat!important;mask:var(--nb-crown-fill) 0 0/100% 100% no-repeat!important;
  -webkit-mask-composite:source-over!important;mask-composite:add!important;
}
.gate-main .lx-cf{
  position:absolute;z-index:3;pointer-events:none;
  inset:auto;left:calc(50% - var(--cw) / 2);top:calc(var(--cw) * -.1833 - 1px);
  width:var(--cw);height:calc(var(--cw) * .2);
  background:var(--nb-gold)!important;
  -webkit-mask:var(--nb-crown-line) 0 0/100% 100% no-repeat;mask:var(--nb-crown-line) 0 0/100% 100% no-repeat;
  clip-path:inset(0 50% 0 50%);
  animation:nb-crown 1.1s .45s var(--nb-ease) forwards;
}
@keyframes nb-crown{to{clip-path:inset(0 0 0 0)}}
.gate-main::after{display:none!important}
.gate-main .gate-kicker{color:var(--nb-gold);letter-spacing:.32em}
.gate-main h2{
  font-family:var(--nb-display)!important;font-weight:600;letter-spacing:0;
  background:none!important;-webkit-text-fill-color:currentColor;color:var(--ink);
}
.gate-main .btn::after{display:none}
.gate-main .btn{min-height:52px;border-radius:10px}

/* ══════════════════════════════════════════════════════════════════════
   السجل التفصيلي — ملفّ قضية لكل تقرير
   ترويسة بهوية التقرير وحالته الأخيرة، وتحتها جدول إجراءاته المرقَّم.
   ══════════════════════════════════════════════════════════════════════ */
.lg-all{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.lg-list{display:grid;gap:14px;margin-top:6px}
.lg-case{
  border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;
  background:var(--panel);box-shadow:var(--nb-carve);
  transition:border-color .2s var(--nb-ease);
}
.lg-case:hover{border-color:var(--gold-line)}
.lg-case.picked{border-color:var(--nb-gold);box-shadow:0 0 0 1px var(--nb-gold),var(--nb-carve)}

.lg-hd{
  display:flex;align-items:center;gap:22px;padding:12px 18px;
  background:var(--thead-bg);border-bottom:1px solid var(--line-strong);
}
.lg-pick{display:flex;align-items:center;gap:10px;flex:none;cursor:pointer}
.lg-n{
  min-width:30px;height:30px;padding:0 6px;border-radius:8px;display:grid;place-items:center;
  font-size:13px;font-weight:600;color:var(--ink-3);border:1px solid var(--line-strong);font-variant-numeric:tabular-nums;
}
.lg-meta{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 34px;margin:0;flex:1;min-width:0}
.lg-f{min-width:0}
.lg-f dt{font-size:12.5px;color:var(--ink-3);margin:0 0 3px}
.lg-f dd{margin:0;font-size:15px;font-weight:600;color:var(--ink);line-height:1.45}
.lg-id dd.mono,.lg-id dd{
  font-family:var(--nb-display)!important;font-size:19px;letter-spacing:.02em;color:var(--nb-gold);
  font-variant-numeric:tabular-nums;direction:ltr;text-align:right;
}
.lg-form{max-width:340px}
.lg-sub{font-weight:400;color:var(--ink-3);font-size:13.5px}

.lg-oc{
  --oc:var(--ink-3);
  flex:none;margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:7px 14px;border-radius:9px;border:1px solid color-mix(in srgb,var(--oc) 40%,transparent);
  background:color-mix(in srgb,var(--oc) 10%,transparent);
}
.lg-oc-k{font-size:11.5px;color:var(--ink-3)}
.lg-oc b{font-size:14.5px;font-weight:700;color:var(--oc)}
.oc-ok{--oc:var(--c1)} .oc-bad{--oc:var(--c3)} .oc-asg{--oc:var(--c2)} .oc-oth{--oc:var(--c4)}

.lg-body{overflow-x:auto}
table.lg-acts{width:100%;border-collapse:collapse;table-layout:fixed;min-width:820px}
table.lg-acts thead th{
  background:transparent!important;color:var(--ink-3);font-size:12.5px;font-weight:600;
  text-align:start;padding:8px 16px;border-bottom:1px solid var(--line);position:static;
}
table.lg-acts td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14.5px}
table.lg-acts tbody tr:last-child td{border-bottom:0}
table.lg-acts tbody tr:hover td{background:var(--row-hover)}
table.lg-acts tbody tr:hover td:first-child{box-shadow:none}
table.lg-acts tr.lg-latest td{background:color-mix(in srgb,var(--nb-gold) 4%,transparent)}
table.lg-acts .lg-seq{width:52px;text-align:center}
table.lg-acts th:nth-child(2){width:27%}
table.lg-acts th:nth-child(3){width:17%}
table.lg-acts th:nth-child(4){width:132px}
table.lg-acts th:nth-child(5){width:118px}
td.lg-seq{color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
td.lg-act{font-weight:600;color:var(--ink)}
td.lg-act .alab-t{display:inline;white-space:normal;overflow:visible}
td.lg-act .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:8px;vertical-align:middle}
td.lg-act .rnd,td.lg-act .amd,td.lg-act .rty{margin-inline-start:8px;vertical-align:middle}
td.lg-who{color:var(--ink-2)}
td.lg-at{white-space:nowrap}
.lg-d,.lg-t{display:block;direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
.lg-d{font-size:14px;color:var(--ink);font-weight:600}
.lg-t{font-size:13px;color:var(--ink-3);margin-top:2px}
td.lg-st .pill{font-size:12.5px;white-space:nowrap}
td.lg-det{color:var(--ink-2);line-height:1.75}
td.lg-det .dt-l{margin:0 0 6px}
td.lg-det .dt-l:last-child{margin-bottom:0}
td.lg-det .dt-k{
  display:inline-block;margin-inline-end:8px;padding:1px 8px;border-radius:6px;font-size:12px;
  color:var(--ink-3);border:1px solid var(--line-strong);vertical-align:1px;
}
td.lg-det .dt-none{color:var(--ink-3)}
.lg-more{display:flex;justify-content:center;padding:8px 0 4px}
.lg-empty{padding:40px 16px;text-align:center;color:var(--ink-3);border:1px dashed var(--line-strong);border-radius:12px}

/* التكيّف بعرض البطاقة نفسها لا بعرض الشاشة: كان جدول الإجراءات أعرض من
   البطاقة على 1024px فيختفي عمود السبب والملاحظة خلف تمريرٍ جانبي بلا أيّ إشارة. */
.lg-case{container-type:inline-size}
.lg-body{overflow-x:visible}
table.lg-acts{min-width:0}
/* أضيق من 880px: التفاصيل تنزل سطرًا كاملًا تحت إجرائها بدل عمودٍ سادس */
@container (max-width:880px){
  table.lg-acts{table-layout:auto}
  table.lg-acts thead tr,table.lg-acts tbody tr{
    display:grid;grid-template-columns:44px minmax(0,1.5fr) minmax(0,1fr) 112px 118px;align-items:start
  }
  table.lg-acts th,table.lg-acts td{display:block;width:auto!important}
  table.lg-acts th:nth-child(6){display:none}
  table.lg-acts tbody tr{border-bottom:1px solid var(--line)}
  table.lg-acts tbody tr:last-child{border-bottom:0}
  table.lg-acts td{border-bottom:0}
  table.lg-acts td.lg-det{grid-column:2 / -1;padding-top:0}
  table.lg-acts td.lg-det:has(> .dt-none:only-child){display:none}
}
/* أضيق من 560px: كل إجراء كتلةٌ متتابعة الأسطر */
@container (max-width:560px){
  table.lg-acts thead{display:none}
  table.lg-acts tbody tr{grid-template-columns:36px minmax(0,1fr);padding:10px 4px}
  table.lg-acts td{padding:3px 10px}
  table.lg-acts td.lg-seq{grid-row:span 5;padding-top:4px}
  table.lg-acts td.lg-det{grid-column:2}
  td.lg-at .lg-d,td.lg-at .lg-t{display:inline;margin:0 0 0 8px}
}
@media (max-width:760px){
  .lg-hd{flex-wrap:wrap;gap:12px;padding:12px 14px}
  .lg-meta{gap:8px 22px;flex-basis:100%;order:3}
  .lg-oc{order:2}
}

/* ══════════════════════════════════════════════════════════════════════
   النظام الرسمي — سلّمٌ واحد للأحجام والمسافات بدل 23 حجمًا متفرّقًا
   ثمانية أحجام فقط: 12.5 · 14 · 15 · 17 · 19 · 24 · 30 · 42
   • أرقام ثابتة جدولية (لا عدّاد ولا تدرّج) · عناوين متوازنة الأسطر
   • لا تباعد حروف في النص العربي · ردّ التفاعل ≤ 150ms
   التقرير التنفيذي (#v-report) مستثنى: وثيقةٌ لها سلّمها للطباعة.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --t-cap:12.5px; --t-sm:14px; --t-base:15px; --t-md:17px;
  --t-lg:19px; --t-xl:24px; --t-2xl:30px; --t-3xl:42px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --lx-gold-grad:var(--nb-gold);
}

/* ── الأساس ── */
body{font-size:var(--t-base);line-height:1.65}
#app h2,#app h3,#gate h1,#gate h2,.lg-f dd{text-wrap:balance}
#app p,#app .hint,#gate p,td.lg-det{text-wrap:pretty}
#app td,#app th,#app dd,#app .v,#app .pill,#app .seg button,#app .lg-n{font-variant-numeric:tabular-nums}

/* الأرقام المرجعية (رقم التقرير · الوقت) بخطّ الهوية وأرقام جدولية، لا بخطّ برمجي.
   الخط الثابت يبقى لما يُنسخ حرفيًا: الأوامر والرموز والبصمات. */
#app .mono:not(.cmd):not(.fp):not(.rep-f){font-family:var(--nb-font)!important;font-variant-numeric:tabular-nums;font-weight:600}

/* ── العناوين ── */
#app .head h2{font-size:var(--t-2xl);line-height:1.3}
#app .head p{font-size:var(--t-sm);margin-top:var(--sp-1)}
#app .card h3{font-size:var(--t-lg);line-height:1.4;margin:0 0 var(--sp-1)}
#app .card .hint,#app .hint{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 var(--sp-6)}
#app .card.hero .big{font-size:var(--t-2xl);line-height:1.35}
#app .card.hero .sub,#app #hero-sub{font-size:var(--t-sm)}
#app .tile .v{font-size:var(--t-3xl)}
#app .tile .k{font-size:var(--t-sm)}
#app .tile .d{font-size:var(--t-cap)}
#app .tile .lx-pct{font-size:var(--t-cap)}

/* ── القائمة الجانبية ── */
#app .brand h1{font-size:var(--t-md);line-height:1.35;white-space:nowrap}
#app .brand p{font-size:var(--t-cap)}
#app .nav a{font-size:var(--t-base);min-height:44px}
#app .nav .sep{font-size:var(--t-cap);letter-spacing:0}
#app .me .nm{font-size:var(--t-md)}
#app .build-line{font-size:var(--t-cap);letter-spacing:0;color:var(--ink-3)}
#app .credit-line,#app .cp-k,#app .cp-n{font-size:var(--t-cap)}

/* ── الأزرار والحقول ── */
#app .btn,#gate .btn{font-size:var(--t-base);letter-spacing:0}
#app .btn.sm,#app .btn.ghost.sm,#app .tablebtn{font-size:var(--t-sm)}
#app .seg button{font-size:var(--t-sm)}
#app input,#app select,#gate input{font-size:var(--t-base)}
#app label,#gate .field label{font-size:var(--t-sm)}

/* ── الجداول والشارات ── */
#app th{font-size:var(--t-cap)}
#app td{font-size:var(--t-base)}
#app .th-sub{font-size:var(--t-cap)}
#app .pill,#app .rnd,#app .amd,#app .rty,#app .keys span{font-size:var(--t-cap)}
#app .alert p,#app .alert b{font-size:var(--t-base)}
#app svg .lbl,#app svg .val,#app svg .axis{font-size:var(--t-cap)}

/* ── السجل التفصيلي ── */
#app .lg-f dt,#app .lg-oc-k,#app .lg-n,#app .dt-k{font-size:var(--t-cap)}
#app .lg-f dd{font-size:var(--t-base)}
#app .lg-id dd{font-size:var(--t-lg);letter-spacing:0}
#app .lg-oc b{font-size:var(--t-sm)}
#app .lg-t,#app .lg-sub{font-size:var(--t-sm)}
#app .lg-d,#app td.lg-act,#app td.lg-det,#app td.lg-who{font-size:var(--t-base)}

/* ── بوابة الدخول ── */
#gate .gate-main h2{font-size:var(--t-2xl)}
#gate .gate-head{font-size:var(--t-2xl)}
#gate .gate-desc{font-size:var(--t-md);line-height:1.8}
#gate .alula-ar{font-size:var(--t-xl)}
#gate .gs-v{font-size:var(--t-xl);letter-spacing:0}
#gate .gs-k,#gate .gate-note,#gate .heritage-caption,#gate .gate-kick{font-size:var(--t-sm)}
#gate .gate-kicker,#gate .alula-en,#gate .tagpro,#gate .chip,#gate .cp-k{font-size:var(--t-cap)}
#gate .feat .t{font-size:var(--t-base)}
#gate .feat .d,#gate .cp-n,#gate li{font-size:var(--t-sm)}

/* ── المسافات: إيقاعٌ واحد بين البطاقات والأقسام ── */
#app .grid{gap:var(--sp-5)}
#app [data-view] > section + section,#app [data-view] > * + section{margin-top:var(--sp-5)}
#app .card{padding:var(--sp-6)}
#app .card.hero{padding:var(--sp-8)}
#app .card.tile{padding:var(--sp-5) var(--sp-6)}

/* ── أسطح مصمتة: لا تدرّج ولا وهج ── */
#app::before{display:none}
.card.hero{background:var(--panel)}
.seg button.on,.btn:not(.ghost),.me .p-role{background:var(--nb-gold)}
/* بقايا طبقة «الليل» القديمة في index.html كانت تغلب الذهب بتحديدٍ أعلى:
   أزرار بتدرّجٍ رمادي باهت، وحلقة تركيز كريمية، وأعمدة بنّية. نفس المحدِّد هنا يعيد الرموز. */
html:not([data-theme="light"]) .btn:not(.ghost){background:var(--nb-gold);color:var(--nb-on-gold);border-color:transparent;box-shadow:none}
html:not([data-theme="light"]) .btn:not(.ghost):hover{background:var(--nb-gold-hover)}
html:not([data-theme="light"]) .seg button.on{background:var(--nb-gold);color:var(--nb-on-gold)}
html:not([data-theme="light"]) .bar-row .tr i{background:var(--nb-gold)}
html:not([data-theme="light"]) .bar-row .tr i.alt{background:var(--c4)}
html:not([data-theme="light"]) .cols div,html:not([data-theme="light"]) .spark i{background:var(--nb-gold)}
html:not([data-theme="light"]) .tile.accent{background:var(--nb-stone-2);border-color:var(--gold-line)}
html:not([data-theme="light"]) :is(input,select,button,a):focus-visible{outline:2px solid var(--nb-gold);outline-offset:2px}
/* زر الدخول: ذهبٌ مصمت كبقية الأزرار، بلا تدرّجٍ معدني ولا وهج */
.gate-main #in-go{background:var(--nb-gold);box-shadow:none;letter-spacing:0;color:var(--nb-on-gold)}
.gate-main #in-go:hover{background:var(--nb-gold-hover);transform:none;filter:none}
html[data-theme="light"] .gate-main #in-go:hover{background:var(--nb-gold-2);color:#FFFFFF}
.tile .lx-meter i{transition:none}
#gauge::before{display:none}

/* ── ردّ التفاعل ≤ 150ms ── */
.card,.lg-case,.nav a,.seg button,.btn,input,select,table tbody tr{transition-duration:.15s!important}
.lx-enter .card{animation:nb-rise .2s ease-out backwards}

/* النص العربي بلا تباعد حروف — التباعد يفكّ وصل الحروف؛ يبقى للشارات اللاتينية وحدها */
#gate .gate-kick,#gate .heritage-caption,#gate label,#gate .field label,#app label,#app .tile .k,#app .k,#app p{letter-spacing:0}
/* سطر الإسناد اللاتيني في القائمة: سطرٌ واحد بتباعدٍ معتدل */
#app .credit-line .cp-k{letter-spacing:.14em;white-space:nowrap}
#app .credit-line .cp-n{letter-spacing:.02em;white-space:nowrap}

/* ══════════ أدوات السجل: بحثٌ · تصفيةٌ بالحالة · ترتيب ══════════ */
#app .lg-tools{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-3)}
#app .lg-tools > *{min-width:0}
#app .lg-search{position:relative;display:flex;align-items:center;gap:var(--sp-3)}
#app .lg-search input[type=search]{flex:1;min-width:0;min-height:46px;padding:10px 16px;padding-inline-end:44px;font-size:var(--t-base);
  background:var(--field-bg);border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--ink)}
#app .lg-search input[type=search]:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-ring);outline:none}
#app .lg-kbd{position:absolute;inset-inline-end:calc(var(--lg-cw,150px) + 26px);top:50%;transform:translateY(-50%);
  min-width:22px;padding:1px 6px;text-align:center;font-size:12px;color:var(--ink-3);border:1px solid var(--line-strong);border-radius:5px;background:var(--soft)}
#app .lg-search input:focus ~ .lg-kbd,#app .lg-search input:not(:placeholder-shown) ~ .lg-kbd{display:none}
#app .lg-count{flex:none;width:var(--lg-cw,150px);font-size:var(--t-sm);font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:end}
#app .lg-filters{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
#app .lg-st{flex-wrap:wrap}
#app .lg-st button{display:inline-flex;align-items:center;gap:7px}
#app .lg-cn{display:inline-block;min-width:22px;padding:0 6px;border-radius:999px;font-size:var(--t-cap);font-weight:600;
  font-variant-numeric:tabular-nums;background:rgba(var(--nb-ink-rgb),.07);color:inherit}
#app .lg-st button.on .lg-cn{background:rgba(255,255,255,.22)}
#app .lg-sort{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--t-sm);color:var(--ink-2)}
#app .lg-sort select{min-height:40px;padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--field-bg);color:var(--ink);font-size:var(--t-sm)}
/* عنوان اليوم: فاصلٌ بين أيام السجل بعدد تقاريره */
#app .lg-day{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-2);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--gold-line);font-size:var(--t-sm);font-weight:700;color:var(--ink)}
#app .lg-day:first-child{margin-top:0}
#app .lg-day-n{font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
#app #log mark{background:rgba(var(--nb-gold-rgb),.20);color:inherit;border-radius:3px;padding:0 1px;box-shadow:0 1px 0 rgba(var(--nb-gold-rgb),.55)}
#app .lg-empty{display:grid;justify-items:center;gap:var(--sp-2);padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--ink-2)}
#app .lg-empty b{font-size:var(--t-md);color:var(--ink)}
@media (max-width:760px){
  #app .lg-search{flex-direction:column;align-items:stretch}
  #app .lg-search input[type=search]{width:100%;flex:none}
  #app .lg-count{width:auto;text-align:start}
  #app .lg-kbd{display:none}
  #app .lg-filters{flex-direction:column;align-items:stretch}
  #app .lg-st{width:100%;overflow-x:auto;flex-wrap:nowrap}
  #app .lg-st button{flex:none}
  #app .lg-sort{justify-content:space-between}
  #app .lg-sort select{flex:1}
}

/* ══════════ نافذة تحديث الإضافة: حجر المنصة وذهبها، لا برتقالي ولا بنّي محمرّ ══════════ */
#ext-banner .ext-modal{background:rgba(10,9,7,.74);backdrop-filter:none}
html[data-theme="light"] #ext-banner .ext-modal{background:rgba(42,37,34,.42)}
#ext-banner .ext-m-card{
  width:min(480px,100%);background:var(--nb-stone);border:1px solid var(--gold-line);
  border-radius:var(--r-lg);padding:28px var(--sp-6) var(--sp-6);
  box-shadow:var(--nb-carve),0 32px 72px -24px rgba(0,0,0,.85)
}
html[data-theme="light"] #ext-banner .ext-m-card{box-shadow:var(--nb-carve),0 32px 72px -28px rgba(61,57,54,.45)}
/* أيقونة التحديث بالذهب بدل رمز التحذير البرتقالي */
#ext-banner .ext-m-ic{
  position:relative;width:52px;height:52px;margin:0 auto var(--sp-4);border-radius:14px;
  font-size:0;color:transparent;background:var(--gold-tint);border:1px solid var(--gold-line)
}
#ext-banner .ext-m-ic::before{
  content:"";position:absolute;inset:14px;background:var(--nb-gold);
  -webkit-mask:var(--nb-ic-update) center/contain no-repeat;mask:var(--nb-ic-update) center/contain no-repeat
}
#ext-banner{--nb-ic-update:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E")}
#ext-banner .ext-m-card h3{color:var(--ink);font-size:var(--t-lg);font-weight:700;margin:0 0 var(--sp-2)}
#ext-banner .ext-m-sub{color:var(--ink-2);font-size:var(--t-sm);margin:0 0 var(--sp-5)}
#ext-banner .ext-m-sub b{color:var(--nb-gold);font-weight:600;font-variant-numeric:tabular-nums}
/* قائمة الأجهزة: بئرٌ هادئ، والإصدار شارة محايدة بنقطة حالة */
#ext-banner .ext-m-list{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);margin:0 0 var(--sp-5)}
#ext-banner .ext-m-list li{align-items:center;padding:12px 14px;color:var(--ink);font-size:var(--t-sm)}
#ext-banner .ext-m-list li + li{border-top:1px solid var(--line)}
#ext-banner .ext-m-list li b{
  display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--ink-2);font-size:var(--t-cap);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap
}
#ext-banner .ext-m-list li b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bad)}
#ext-banner .ext-m-steps{color:var(--ink-2);font-size:var(--t-sm);line-height:1.9;margin:0 0 var(--sp-6)}
#ext-banner .ext-m-steps li::marker{color:var(--nb-gold);font-weight:600}
/* نهارًا: الذهب العميق للنص الصغير ليبلغ تباين 4.5:1 على الأبيض */
html[data-theme="light"] #ext-banner .ext-m-sub b,html[data-theme="light"] #ext-banner .ext-m-steps li::marker{color:var(--nb-gold-2)}
#ext-banner .ext-m-steps code{
  background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:1px 7px;
  color:var(--ink);font-size:13px
}
#ext-banner .ext-m-act{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:var(--sp-3)}
#ext-banner .ext-m-act .btn{width:100%;min-height:48px;justify-content:center}
/* حالة الإضافة في جدول الأجهزة: لون الحالة الرسمي بدل البرتقالي */
#tk-list .tk-old{color:var(--bad);font-weight:600}

/* ══════════ الجوال ══════════ */
@media (max-width:760px){
  #app .card{padding:var(--sp-5) var(--sp-4)}
  #app .card.hero{padding:var(--sp-6) var(--sp-4)}
  #app .card.hero .big{font-size:var(--t-xl)}
  #app .head h2{font-size:var(--t-xl)}
  #app .tile .v{font-size:var(--t-2xl)}
  #gate .gate-head{font-size:var(--t-xl)}
  .tile .v{font-size:34px}
  .card.hero{--cw:150px}
  .gate-main{--cw:170px}
  .gate-main h2{font-size:30px!important}
  .nav a.on::before{inset-inline-end:10px}
}

/* ══════════ تقليل الحركة ══════════ */
@media (prefers-reduced-motion:reduce){
  .gate-main .lx-cf{animation:none;clip-path:none}
  .gate-main,.lx-enter .card{animation:none!important}
}

}