/*
  لوحة Digital-8K — «رَفّ التحكّم».

  الأصل: هوية التطبيق نفسها لا محاكاةٌ لها. الخطُّ ملفّاتُ التطبيق ذاتها
  (`Digital8K` = Bai Jamjuree لاتينيّ + Almarai عربيّ مدموجَين)، والذهبُ
  مقيسٌ من `brand/digital8k-logo.png` لا مختارٌ بالعين:
  ظلّ #744F27 · أساس #BE8430 · وسط #E0AC57 · بريق #FDE59F.

  والمفردةُ التي تحكم الشكل: **رفُّ بثّ**، لا لوحةُ SaaS. لذلك:
  رفٌّ رأسيّ ثابت بحافةٍ ذهبية تعلّم الوحدة العاملة · رقمٌ واحد كبير يقود
  الملخّص وبقيّتُه دفترٌ مضغوط · جداولُ بأرقامٍ جدولية تصطفّ عمودياً كسجلّ
  إرسال. لا بطاقاتٌ متطابقة، ولا تدرّجاتٌ للزينة، ولا ظلٌّ رماديّ تحت كل شيء.
*/

/* ══════════════════════════════ الخطّ ══════════════════════════════ */

@font-face {
  font-family: "Digital8K";
  src: url("/brand/digital8k_regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Digital8K";
  src: url("/brand/digital8k_medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Digital8K";
  src: url("/brand/digital8k_semibold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Digital8K";
  src: url("/brand/digital8k_bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Digital8K";
  src: url("/brand/digital8k_bold_italic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* بطاقةُ «رابط التطبيق» في الملخّص: الرابطُ عريضٌ بلون الحبر الذهبي وزرُّ نسخٍ بجانبه */
.release-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.release-link .mono { font-weight: 600; color: var(--gold-ink); word-break: break-all; }

/* ══════════════════════════════ الرموز ══════════════════════════════ */

:root {
  /* القيَم من `ui/skin/Skins.kt` حرفياً — لا تُقرَّب ولا تُستبدل */
  --ink: #040405;
  --panel: #0B0B0D;
  --panel-2: #131316;
  --gold: #E0AC57;
  --gold-sheen: #FDE59F;
  --gold-base: #BE8430;
  --gold-shadow: #744F27;
  --on-gold: #150F05;
  --text: #F6F1E6;
  --text-2: #BCAE95;
  /*
    ⚠️ `#7C7361` قيمةُ التطبيق (`textMuted` في `Skins.kt`) وتصلح هناك: نصٌّ
    كبير يُقرأ من أربعة أمتار. أما رأسُ الجدول هنا فـ12px، وقياسُ التباين
    أعطى **4.2:1** — تحت 4.5. رُفعت درجةً واحدة إلى 5.19 وبقيت في العائلة
    نفسها. **الشاشتان تختلفان في المسافة والحجم، فلا تُنسخ القيمة نسخاً.**
  */
  --muted: #8C8271;
  --live: #D63A2E;
  --ok: #4CE08B;

  /*
    ⚠️ الذهبُ دورَان لا لون واحد.

    `#E0AC57` معدنٌ جميل كـ**حشو** (زرّ · حافة · شارة)، لكنه كـ**حرف** على
    أرضيةٍ فاتحة تباينُه 1.9:1 — أي غير مقروء. ولذلك رمزان:
    `--gold` وعائلتُه للحشو، و`--gold-ink` للنصّ والخطوط. في الوضع الداكن هما
    نفسُ اللون؛ وفي الفاتح ينزل `--gold-ink` إلى ظلّ الشعار `#8A5E22`
    (بين ظلّه #744F27 وأساسه #BE8430) فيبلغ 5.9:1 — والقيمةُ من الشعار لا
    من مزاج.
  */
  --gold-ink: #E0AC57;
  --hero-gradient: linear-gradient(160deg, #FDE59F, #E0AC57 46%, #BE8430);

  /* تظليلُ المرور: فاتحٌ على داكن، وداكنٌ على فاتح */
  --hover: rgba(246, 241, 230, 0.035);
  --hover-strong: rgba(246, 241, 230, 0.05);
  --row-hover: rgba(246, 241, 230, 0.03);

  /* وهجُ الذهب خلف بطاقة الدخول وحلقةِ التركيز */
  --gold-wash: rgba(224, 172, 87, 0.10);
  --gold-ring: rgba(224, 172, 87, 0.14);

  /* الحدُّ الشعريّ هو الظلّ هنا: الظلال لا تُرى على أسودٍ بهذا العمق */
  --line: rgba(224, 172, 87, 0.22);
  --line-strong: rgba(224, 172, 87, 0.45);
  --line-soft: rgba(246, 241, 230, 0.07);

  /*
    ثلاثةُ أنصافِ أقطار لا واحد — الانحناءُ يرمز للوزن:
    الرفُّ صفر (عتاد) · اللوح 12 (سطح) · الزرّ 8 (فعل). نفس منطق التطبيق.
  */
  --r-panel: 12px;
  --r-btn: 8px;
  --rail-w: 232px;

  /*
    اتجاهُ تلاشي الوحدة العاملة يتبع اللغة: الرفُّ يمينَ الشاشة في العربية
    فيتلاشى يساراً، ويسارَها في الإنجليزية فيتلاشى يميناً. قيمةٌ واحدة تُبدَّل
    بدل قاعدتَين متكرّرتَين.
  */
  --fade-to: left;
}

[dir="ltr"] { --fade-to: right; }

* { box-sizing: border-box; }

/*
  `hidden` يجب أن يغلب أي `display` نكتبه: السمة تعمل بأولوية ورقة المتصفّح
  وهي أدنى من أي صنف، فبقيت شاشةُ الدخول مرسومةً فوق اللوحة بعد نجاح الدخول.
*/
[hidden] { display: none !important; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font-family: "Digital8K", "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /*
    كلُّ رقمٍ في اللوحة جدوليُّ العرض. هذا ليس تجميلاً: أعمدةُ «٣ / ٥» و
    «١٩٢.١٦٨.١٠٠.٤» و«01:12» لا تُقرأ مسحاً إن رقص عرضُ الخانة بين الصفوف.
  */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: .2px; }
h1 { font-size: 21px; }
h2 { font-size: 15px; }
p { margin: 0; }
.muted { color: var(--text-2); }
.small { font-size: 12.5px; }
.lede { max-width: 66ch; margin-block: 4px 14px; }

::selection { background: rgba(224,172,87,0.28); color: var(--text); }

/* التركيز مرئيّ دائماً — تُدار اللوحة بلوحة المفاتيح كثيراً */
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ══════════════════════════ شاشة الدخول ══════════════════════════ */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  padding: 24px;
  /*
    هالةٌ ذهبية واحدة خلف البطاقة — الموضعُ الوحيد في اللوحة كلّها الذي فيه
    تدرّج. شاشةٌ فارغة تحتمله؛ وشاشةُ عملٍ مليئةٌ بالبيانات لا تحتمله.
  */
  background:
    radial-gradient(60% 42% at 50% 34%, var(--gold-wash), transparent 70%),
    var(--ink);
}

.login-card {
  width: min(420px, 100%);
  padding: 34px 30px 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: grid;
  gap: 13px;
}

.brand { text-align: center; display: grid; gap: 2px; justify-items: center; margin-bottom: 10px; }
.brand-lockup { width: 190px; max-width: 78%; height: auto; display: block; }
.brand-sub {
  color: var(--text-2);
  font-size: 13px;
  /* خطٌّ شعريّ قصير تحت السطر — يفصل العلامةَ عن الحقول بلا مسافةٍ ميّتة */
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  width: 128px;
}

.login-foot { color: var(--muted); font-size: 12px; letter-spacing: .4px; }

/* ══════════════════════════ الهيكل ══════════════════════════ */

#shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100vh;
}

/* ─────────────────────────── الرفّ ─────────────────────────── */

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-inline-end: 1px solid var(--line);   /* الفاصل مع المسرح، لا حافة النافذة */
  /* زوايا صفر: الرفُّ عتادٌ مثبَّت بالحافة، لا بطاقةٌ تطفو */
  border-radius: 0;
}

.rail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.rail-mark { width: 34px; height: 34px; object-fit: contain; }
.rail-word {
  font-weight: 700;
  font-style: italic;      /* المائل للعرض لا للمتن — نفس قاعدة التطبيق */
  font-size: 16px;
  letter-spacing: .3px;
}

.rail-nav { display: flex; flex-direction: column; padding: 10px 0; overflow-y: auto; }

.rail-nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  font: inherit;
  font-size: 14px;
  color: var(--text-2);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-align: start;
  transition: color .14s ease, background-color .14s ease;
}
.rail-nav button svg {
  width: 19px; height: 19px; flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;       /* نفس سُمك أيقونات التطبيق: 2/24 */
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-nav button:hover { color: var(--text); background: var(--hover); }

/*
  الوحدةُ العاملة: حافةٌ ذهبية مصمتة على طرف الرفّ + نصٌّ فاتح.
  الحافةُ هي الدلالة، لا خلفيةٌ ملوّنة — «مضاءة» لا «مختارة».
*/
.rail-nav button.on {
  color: var(--text);
  background: linear-gradient(to var(--fade-to), var(--gold-wash), transparent 70%);
}
.rail-nav button.on::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 6px; bottom: 6px;
  width: 3px;
  background: linear-gradient(to bottom, var(--gold-sheen), var(--gold), var(--gold-base));
}
.rail-nav button.on svg { color: var(--gold-ink); }

.rail-foot {
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rail-user { color: var(--text-2); font-size: 13px; }

/* ─────────────────────────── المسرح ─────────────────────────── */

.stage { min-width: 0; padding: 0 26px 40px; }

.stage-head {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 22px 0 16px;
  margin-bottom: 4px;
  background: linear-gradient(to bottom, var(--ink) 72%, transparent);
  border-bottom: 1px solid var(--line-soft);
}

.view { display: grid; gap: 16px; padding-top: 16px; }

/*
  عنصرُ الشبكة لا ينكمش تحت محتواه الأدنى ما لم يُقَل له ذلك.

  `min-width` الافتراضية لعنصر grid/flex هي `auto` أي «لا تصغر عن min-content».
  فعلى 375px بقي لوحُ الإشارة **572px** وخرجت الصفحة أفقياً — وعطلٌ كهذا لا
  يظهر في العرض الواسع فيمرّ صامتاً. `min-width: 0` تفكّ القيد، وهي القاعدة
  لا الاستثناء في أي تخطيطٍ يجب أن ينكمش.
*/
.view > *, .panel,
#shell > *, .rail, .rail-head, .rail-nav, .rail-foot, .table-wrap { min-width: 0; }

/* ─────────────────────────── الألواح ─────────────────────────── */

.panel {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-panel);
  padding: 18px;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* ═══════════════════════════ الجداول ═══════════════════════════ */

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th {
  text-align: start;
  padding: 0 12px 9px;
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }

/* حافةٌ ذهبية عند المرور — نفس لغة «الوحدة المضاءة» في الرفّ */
tbody tr { position: relative; transition: background-color .12s ease; }
tbody tr:hover { background: var(--row-hover); }
tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 -1px var(--gold-ink); }

.mono { letter-spacing: .4px; }

/* شارةُ حالة: نقطةٌ ونصّ — أوضحُ من لونٍ وحده لمن لا يميّز الألوان */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line-soft);
  color: var(--text-2);
  white-space: nowrap;
}
.tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.tag.ok { color: var(--ok); border-color: rgba(76,224,139,0.28); }
.tag.warn { color: var(--gold-ink); border-color: var(--line-strong); }
.tag.bad { color: var(--live); border-color: rgba(214,58,46,0.35); }

/* ═══════════════════════════ الحقول ═══════════════════════════ */

label { display: block; color: var(--text-2); font-size: 12.5px; }

input, textarea, select {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-btn);
  transition: border-color .14s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:hover, textarea:hover { border-color: var(--line); }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px var(--gold-ring);
}
textarea { resize: vertical; min-height: 78px; }

input[type="checkbox"] {
  width: auto; margin: 0 0 0 8px;
  accent-color: var(--gold);
  vertical-align: -2px;
}
label.check { display: flex; align-items: center; color: var(--text); font-size: 13.5px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.row-end {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}

.search { max-width: 300px; margin: 0; }

/* ═══════════════════════════ الأزرار ═══════════════════════════ */

.btn {
  padding: 9px 18px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.btn:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.btn:active { transform: translateY(1px); }

/*
  الزرُّ الرئيسي وحده يحمل تدرّجَ الشعار الثلاثيّ + برقَ حافةٍ بسُمك بكسل.
  هذا هو الموضعُ الذي يستحقّ الذهبَ مصمتاً — وواحدٌ لكل شاشة.
*/
.btn.primary {
  color: var(--on-gold);
  background: linear-gradient(160deg, var(--gold-sheen), var(--gold) 45%, var(--gold-base));
  border-color: var(--gold-base);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn.primary:hover { color: var(--on-gold); filter: brightness(1.06); }

.btn.ghost { background: transparent; color: var(--text-2); }
.btn.ghost:hover { color: var(--gold-ink); }
.btn.small { padding: 5px 11px; font-size: 12.5px; }
.btn.danger { color: var(--live); border-color: rgba(214,58,46,0.4); }
.btn.danger:hover { color: #fff; background: var(--live); border-color: var(--live); }

/* حقلٌ بزرّ داخلي — إظهار كلمة المرور */
.field-with-action { position: relative; display: block; }
.field-with-action input { padding-inline-start: 70px; }
.reveal {
  position: absolute;
  inset-inline-start: 6px;
  top: calc(50% + 3px);
  transform: translateY(-50%);
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  cursor: pointer;
}
.reveal:hover { color: var(--gold-ink); border-color: var(--gold-ink); }
.reveal[aria-pressed="true"] { color: var(--gold-ink); border-color: var(--gold-ink); }

#caps-hint { margin: -4px 0 2px; color: var(--gold-ink); }
.error { color: var(--live); font-size: 13px; text-align: center; }

/* ═══════════════════════ مخرجات وحالات ═══════════════════════ */

.output {
  margin: 14px 0 0;
  padding: 14px;
  max-height: 320px;
  overflow: auto;
  background: var(--ink);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-btn);
  color: var(--gold-ink);
  font-size: 13px;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-all;
}

.status {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line-soft);
  font-size: 13px;
}
.status.ok { color: var(--ok); border-color: rgba(76,224,139,0.3); }
.status.bad { color: var(--live); border-color: rgba(214,58,46,0.35); }

/* حالةٌ فارغة: دعوةٌ للفعل لا اعتذار */
.empty { padding: 26px 4px; color: var(--muted); font-size: 13.5px; text-align: center; }

.toast {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  z-index: 50;
  padding: 11px 20px;
  background: var(--panel-2);
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--text);
}

/* ═══════════════════════════ الاستجابة ═══════════════════════════ */

@media (max-width: 900px) {
  #shell { grid-template-columns: 1fr; }

  /* الرفُّ ينقلب شريطاً أفقياً قابلاً للسحب — لا يُخفى خلف زرّ */
  .rail {
    position: static;
    height: auto;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
  }
  .rail-nav { flex-direction: row; overflow-x: auto; padding: 0 8px; }
  .rail-nav button { padding: 12px 12px; white-space: nowrap; }
  .rail-nav button.on { background: none; }
  .rail-nav button.on::before {
    inset-inline-start: 8px;
    inset-inline-end: 8px;
    top: auto; bottom: 0;
    width: auto; height: 2px;
  }
  .rail-nav button span { display: none; }        /* أيقونات فقط في العرض الضيّق */
  .rail-nav button.on span { display: inline; }   /* إلا العامل: اسمُه يبقى */
  .rail-head { justify-content: space-between; }

  .stage { padding: 0 14px 32px; }
  .board { grid-template-columns: 1fr; }
  .search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ═══════════════════ مجموعات محرّر العلامة ═══════════════════ */

.fieldgroup {
  margin: 0 0 14px;
  padding: 4px 14px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-panel);
}
.fieldgroup legend {
  padding: 0 8px;
  color: var(--gold-ink);
  font-size: 12.5px;
  font-weight: 600;
}
#brand-form { display: block; }

/*
  ⚠️ القيَم التقنية تُقرأ بترتيبها الحقيقي — وإلا قرأ الأدمن عنواناً غير الموجود.

  الماك `46:EC:7E:47:37:09` كان يُعرض في العربية `EC:7E:47:37:09:46`: مجموعةُ
  الأرقام الأولى ضعيفةُ الاتجاه (EN) فتُعاد ترتيباً في فقرةٍ RTL وتقفز إلى
  الطرف الآخر. والعطلُ صامتٌ تماماً — النصُّ يبدو ماكاً سليماً وهو ليس الماك.
  ونفسُه يصيب الـIP والكود والمضيف والإصدار.

  فالاتجاهُ يُفرض على المحتوى، والمحاذاةُ تبقى تابعةً للّغة كي لا ينكسر العمود.
*/
td.mono, td[dir="ltr"] { direction: ltr; }
[dir="rtl"] td.mono, [dir="rtl"] td[dir="ltr"] { text-align: right; }
[dir="ltr"] td.mono, [dir="ltr"] td[dir="ltr"] { text-align: left; }

/* ═══════════════════════ مبدّل اللغة ═══════════════════════ */

.rail-foot { position: relative; flex-wrap: wrap; }
.foot-actions { display: flex; align-items: center; gap: 8px; }

/*
  زرُّ اللغة ذهبيٌّ دائماً — الوحيد بين أيقونات الرفّ.

  أمرُ المالك، وله سببٌ وظيفيّ يسنده: مَن فتح اللوحة بلغةٍ لا يقرأها لا يبحث
  عن كلمة «اللغة» بل عن الشيء اللامع الذي يشبه كرةً أرضية. فاللونُ هنا دلالةٌ
  لا زينة، ولذلك لا يُصرف الذهبُ على أيقونةٍ أخرى في الرفّ.
*/
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.lang-btn svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: var(--gold-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lang-btn:hover { border-color: var(--gold-ink); background: var(--gold-wash); }
.lang-btn[aria-expanded="true"] { border-color: var(--gold-ink); background: var(--gold-wash); }

.lang-menu {
  position: absolute;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 14px;
  z-index: 20;
  min-width: 148px;
  padding: 5px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  display: grid;
  gap: 2px;
}
.lang-item {
  padding: 8px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-2);
  background: none;
  border: 0;
  border-radius: var(--r-btn);
  cursor: pointer;
  text-align: start;
}
.lang-item:hover { color: var(--text); background: var(--hover-strong); }
.lang-item.on { color: var(--gold-ink); }
.lang-item.on::after { content: " ●"; font-size: 9px; vertical-align: middle; }

@media (max-width: 900px) {
  .lang-menu { inset-block-end: auto; inset-block-start: calc(100% + 6px); }
}

/* ─────────────── مبدّل اللغة في شاشة الدخول ─────────────── */

.login-langs { display: flex; gap: 8px; justify-content: center; }
.lang-chip {
  padding: 5px 14px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
.lang-chip:hover { color: var(--gold-ink); border-color: var(--line); }
.lang-chip.on { color: var(--gold-ink); border-color: var(--gold-ink); }

/* ═══════════════════════════ الوضع النهاري ═══════════════════════════ */

/*
  ليس قلباً للألوان.

  «أسود وذهبي» مقلوباً يعطي أبيضَ وذهبياً — وذهبُ الشعار على أبيضَ لا يُقرأ.
  فالنهاريّ يحتفظ بالذهب **حشواً** (الزرّ الرئيسي · حافةُ الوحدة العاملة ·
  شارةُ التركيز) ويُنزله إلى ظلّ الشعار **حرفاً**. والأرضيةُ ورقٌ دافئ لا
  أبيضٌ صافٍ — نفس قاعدة التطبيق مقلوبةً: «لا أبيض صافٍ على أسود صافٍ» تعني
  هنا «لا أسود صافٍ على أبيض صافٍ».

  والعلاقاتُ محفوظة: اللوحُ أفتحُ من الأرضية كما هو أفتحُ منها في الداكن،
  فيبقى «يرتفع» عنها بنفس المنطق.
*/
[data-theme="light"] {
  --ink: #EFE9DC;          /* ورقٌ دافئ — أرضية */
  --panel: #FBF7EF;        /* اللوحُ أفتح: يرتفع عن الأرضية */
  --panel-2: #F2EBDD;      /* الحقولُ أغمق قليلاً: تنخفض داخل اللوح */

  --gold-ink: #8A5E22;     /* من عائلة الشعار — 5.9:1 على اللوح */
  --on-gold: #1C1206;

  --text: #1C1710;         /* أسودٌ دافئ لا #000 */
  --text-2: #5B4F3B;
  /*
    ⚠️ `--muted` مقيسٌ لا مذوَّق: أوّلُ قيمة (#8A7E68) أعطت رأسَ الجدول
    **3.73:1** — تحت حدّ 4.5 للنصّ الصغير (12px). و#6E6350 يعطي 5.51 على
    اللوح و4.87 على الأرضية، فيمرّ في الموضعَين. القياسُ من الصفحة نفسها.
  */
  --muted: #6E6350;

  --live: #B32A20;         /* الأحمر يُغمَّق ليبلغ التباين على الورق */
  --ok: #1C7A45;

  --line: rgba(138, 94, 34, 0.28);
  --line-strong: rgba(138, 94, 34, 0.55);
  --line-soft: rgba(28, 23, 16, 0.10);

  --hover: rgba(28, 23, 16, 0.04);
  --hover-strong: rgba(28, 23, 16, 0.06);
  --row-hover: rgba(28, 23, 16, 0.035);

  --gold-wash: rgba(224, 172, 87, 0.20);
  --gold-ring: rgba(138, 94, 34, 0.18);

  /* الرقمُ البطل بدرجات الشعار الغامقة — الفاتحةُ منها تختفي على الورق */
  --hero-gradient: linear-gradient(160deg, #C08A34, #8A5E22 70%, #744F27);

  color-scheme: light;
}

/* الشارات الملوّنة: حدودُها تتبع لونها فتُحسب من الرمز لا مكتوبةً بيدها */
[data-theme="light"] .tag.ok { border-color: rgba(28, 122, 69, 0.35); }
[data-theme="light"] .tag.bad { border-color: rgba(179, 42, 32, 0.35); }
[data-theme="light"] .status.ok { border-color: rgba(28, 122, 69, 0.38); }
[data-theme="light"] .status.bad { border-color: rgba(179, 42, 32, 0.38); }

/* المخرجات: لوحٌ غائرٌ داكنُ الحرف بدل أسودَ مصمت */
[data-theme="light"] .output { background: var(--panel-2); }

/*
  ⚠️ الشعارُ يحتاج أرضيتَه.

  الأسدُ ذهبٌ معدنيّ صُمّم ليُقرأ على أسود: ظلالُه ولمعتُه كلاهما يعتمد على
  خلفيةٍ داكنة. وعلى الورق الفاتح تسقط اللمعةُ في الأرضية ويبهت الحرفُ الذهبي
  فيبدو الشعار منطفئاً — وهو ما رآه المالك (2026-09-10).

  فالعلاجُ **لوحٌ أسود تحته** لا تعديلُ الشعار: نفس ما يفعله أيُّ نظامِ علامةٍ
  جادّ حين تنقلب الأرضية. واللوحُ بلون `#040405` — أرضيةُ الوضع الليلي نفسها،
  فالشعارُ يقف دائماً على الأسود الذي صُمّم له مهما كان وضعُ اللوحة.
*/
[data-theme="light"] .rail-mark {
  box-sizing: content-box;
  padding: 5px;
  background: #040405;
  border-radius: 10px;
}

[data-theme="light"] .brand-lockup {
  box-sizing: content-box;
  padding: 20px 24px;
  background: #040405;
  border-radius: 16px;
  /* حدٌّ ذهبيّ شعريّ يربط اللوح بالبطاقة فلا يبدو صورةً ملصوقة */
  border: 1px solid rgba(224, 172, 87, 0.30);
}

/* ═══════════════════════════ مبدّل الوضع ═══════════════════════════ */

/*
  زرُّ الوضع محايدُ اللون عمداً.

  الذهبُ في الرفّ محفوظٌ لزرّ اللغة وحده — لأن مَن لا يقرأ اللغة يبحث عن
  الشيء اللامع. والشمسُ والهلال يُعرفان بشكلهما في كل لغة، فلا يحتاجان لوناً.
*/
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
.theme-btn svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-btn:hover { color: var(--text); border-color: var(--line); }

/* ═══════════════════════════ الحساب ═══════════════════════════ */

/*
  زرُّ الحساب في رأس المسرح — الزاويةُ البعيدة عن الرفّ.

  في العربية الرفُّ يميناً فالحسابُ يساراً، وفي الإنجليزية ينقلبان معاً؛
  `inline-end` تحسمها بلا قاعدتَين. وحرفُ الاسم دائرةً بتدرّج الشعار: الذهبُ
  المصمت هنا دلالةُ «هذا أنت» — كالزرّ الرئيسي، موضعٌ واحدٌ في الشاشة يستحقّه.
*/
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.profile { position: relative; flex: none; }

.profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
  padding-inline-end: 11px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.profile-btn:hover, .profile-btn[aria-expanded="true"] { border-color: var(--gold-ink); background: var(--gold-wash); }
.profile-btn svg {
  width: 14px; height: 14px;
  fill: none; stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .14s ease;
}
.profile-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.profile-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  font-style: italic;              /* المائل للعرض — حرفُ العلامة لا متن */
  color: var(--on-gold);
  background: linear-gradient(160deg, var(--gold-sheen), var(--gold) 45%, var(--gold-base));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  direction: ltr;
}
.avatar.big { width: 44px; height: 44px; font-size: 19px; }

.profile-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: min(380px, calc(100vw - 28px));
  padding: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  display: grid;
  gap: 4px;
}
.profile-head { display: flex; align-items: center; gap: 12px; padding: 2px 4px 12px; }
.profile-id { min-width: 0; }
.profile-who { font-weight: 700; font-size: 15px; direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; }

/* البطاقةُ لا تفيض عن الشاشة: تتمرّر داخلياً إن ضاق الارتفاع */
.profile-menu { max-height: calc(100vh - 92px); overflow-y: auto; }

/* تبويبان بنفس لغة الرفّ: العاملُ ذهبيُّ الحرف وتحته خطٌّ بتدرّج الشعار */
.profile-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 12px; border-bottom: 1px solid var(--line-soft); }
.profile-tabs button {
  position: relative;
  padding: 9px 6px 10px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-2);
  background: none; border: 0; cursor: pointer;
  transition: color .14s ease;
}
.profile-tabs button:hover { color: var(--text); }
.profile-tabs button.on { color: var(--gold-ink); }
.profile-tabs button.on::after {
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: linear-gradient(to right, var(--gold-sheen), var(--gold), var(--gold-base));
}

.profile-form { display: grid; gap: 9px; padding: 0 2px; }
.profile-form[hidden] { display: none; }
.profile-form label { margin: 0; }
.profile-form .rule { margin: -2px 0 0; }
.profile-form .error { text-align: start; margin: 0; }
.profile-form .row-end { margin-top: 2px; }

@media (max-width: 900px) {
  .profile-name { display: none; }
  .profile-btn { padding-inline-end: 8px; }
}

/* ═══════════════════════════ الرؤى ═══════════════════════════ */

/*
  ألوانُ الرسوم مقيسةٌ لا مذوَّقة (مُدقِّق dataviz على سطح البطاقة):
  الذهبُ لونُ السلسلة الواحدة وحالةِ «بانتظار»؛ الأخضرُ للرسم درجةٌ أغمق من
  رمز `--ok` (الفاتحُ `#4CE08B` يلتبس بالذهب عند عمى الألوان: ΔE 5.9 — و`#1FA157`
  يعطي 9.0 فوق الهدف 8). الرماديُّ دورُ «منتهٍ»: خافتٌ عمداً. وفي النهاريّ
  ينزل الذهبُ إلى أساس الشعار `#BE8430` ليبلغ 3:1 على الورق.
*/
:root {
  --viz-gold: #E0AC57;
  --viz-good: #1FA157;
  --viz-bad: #D63A2E;
  --viz-off: #8C8271;
  --viz-wash: rgba(224, 172, 87, 0.12);
}
[data-theme="light"] {
  --viz-gold: #BE8430;
  --viz-good: #1C7A45;
  --viz-bad: #B32A20;
  --viz-off: #6E6350;
  --viz-wash: rgba(190, 132, 48, 0.14);
}

/* ── الشبكة: رسمٌ عريض وقائمةٌ بجانبه */
.insight-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 16px; }
.insight-grid > .panel { min-width: 0; }

/* ── الحلقة */
.donut-wrap { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 18px; align-items: center; }
/* أرقامٌ فقط داخل الحلقة، فاتجاهُها ثابتٌ كي لا تنقلب مراسي الوسوم مع اللغة */
.donut { width: 100%; height: auto; display: block; direction: ltr; overflow: visible; }
.donut .seg { transition: opacity .12s ease; cursor: default; }
.donut:hover .seg { opacity: .55; }
.donut .seg:hover { opacity: 1; }
.donut .leader { stroke: var(--line); stroke-width: 1; }
.donut .dot { stroke: var(--panel); stroke-width: 2; }
.donut .pct { fill: var(--text-2); font-size: 12px; font-family: inherit; }
.donut .center-k { fill: var(--muted); font-size: 12px; }
.donut .center-v { fill: var(--text); font-size: 30px; font-weight: 700; font-variant-numeric: normal; }

.legend-list { display: grid; gap: 10px; }
.legend-row { display: grid; grid-template-columns: 10px 1fr auto auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 5px; align-items: center; font-size: 13px; }
.legend-row .sw { width: 10px; height: 10px; border-radius: 3px; }
.legend-row .k { color: var(--text); }
.legend-row .v { color: var(--text); font-weight: 600; }
.legend-row .n { color: var(--muted); font-size: 12px; min-width: 2.4em; text-align: end; }
.legend-row .track { grid-column: 2 / -1; }

/* مسارُ حصّة: الحشوةُ من درجة المسار نفسها — لا حدودَ حول العلامة */
.track { display: block; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.track .fill { display: block; height: 100%; border-radius: 3px; background: var(--viz-gold); }
.track .fill.off { background: var(--viz-off); }

/* ── الحصص */
.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(60px, 2fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.bar-row .k { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .v { color: var(--text); font-size: 12.5px; white-space: nowrap; }
.bars-sub { margin: 16px 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.small-empty { padding: 10px 0; text-align: start; }

/* ── المنحنى */
.line-wrap { min-width: 0; }
.linechart { width: 100%; height: auto; display: block; }
.linechart .grid { stroke: var(--line-soft); stroke-width: 1; }
.linechart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.linechart .area { fill: var(--viz-wash); }
.linechart .line { fill: none; stroke: var(--viz-gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linechart .end { fill: var(--viz-gold); stroke: var(--panel); stroke-width: 2; }
.linechart .vlabel { fill: var(--text); font-size: 12px; font-weight: 600; }
.linechart .cross { stroke: var(--line-strong); stroke-width: 1; }
.linechart .hover { fill: var(--panel); stroke: var(--viz-gold); stroke-width: 2; }
.viz-table { margin-top: 12px; }

/* ── التنبيهات */
.alerts-list { display: grid; gap: 10px; }
.alert { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-btn); font-size: 13px; }
.alert .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.alert.warn .ic { color: var(--gold-ink); }
.alert.info .ic { color: var(--text-2); }
.alert.ok .ic { color: var(--ok); }
.alert .tx { color: var(--text); line-height: 1.55; }
.alert .btn { grid-column: 2; justify-self: start; margin-top: 2px; }

/* ── التلميح */
.viz-tip { position: fixed; z-index: 60; pointer-events: none; padding: 7px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-btn); font-size: 12.5px; color: var(--text-2); }
.viz-tip .tv { color: var(--text); font-weight: 600; font-size: 13.5px; }

@media (max-width: 900px) {
  .insight-grid { grid-template-columns: 1fr; }
  .donut-wrap { grid-template-columns: 1fr; }
  .donut { max-width: 300px; margin: 0 auto; }
}

/* ═══════════════════════════ السكن ═══════════════════════════ */

/*
  بطاقاتُ النسق: رسمٌ خطّيّ يقول أين البانر وأين الأقسام — لا صورةٌ مصغّرة
  تُصان مع كل تغيير. والمختارةُ بحافةٍ ذهبية كوحدة الرفّ العاملة.
*/
.layout-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.layout-card {
  display: grid; gap: 6px; justify-items: start; text-align: start;
  padding: 14px 14px 12px;
  font: inherit; color: var(--text-2);
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-panel);
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
.layout-card svg { width: 96px; height: 72px; display: block; }
.layout-card svg rect { fill: var(--muted); opacity: .55; }
.layout-card svg rect:first-child { fill: var(--gold-ink); opacity: .9; }
.layout-card:hover { border-color: var(--line); color: var(--text); }
.layout-card.on { border-color: var(--gold-ink); color: var(--text); box-shadow: 0 0 0 3px var(--gold-ring); }
.layout-card .lc-name { font-weight: 700; font-size: 14px; }
.layout-card .lc-name em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--gold-ink); margin-inline-start: 6px; }
.layout-card .lc-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* معاينةُ الصور: العريضةُ بنسبة 16:9 والمربّعةُ بضلع 96px، على أرضيةٍ سوداء كما تُرى في التطبيق */
.previews { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.preview { margin: 0; display: grid; gap: 6px; }
.preview img { display: block; object-fit: contain; background: #040405; border: 1px solid var(--line-soft); border-radius: var(--r-btn); }
.preview.wide img { width: 280px; height: 158px; }
.preview.square img { width: 96px; height: 96px; }
.preview figcaption { font-size: 12px; color: var(--muted); }
.preview.bad img { opacity: .25; }
.preview.bad figcaption { color: var(--live); }

/* نسقٌ لم يُبنَ بعد: يُرى ولا يُختار — باهتٌ بوسمٍ صريح، لا مخفيّ */
.layout-card.soon { opacity: .5; cursor: not-allowed; }
.layout-card.soon:hover { border-color: var(--line-soft); color: var(--text-2); }
.layout-card .soon-tag { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--muted); margin-inline-start: 6px; }

/* ─── الأعطال: مكدّسٌ مقروء بلا فيضٍ أفقي، وبياناتٌ تقنية باتجاهٍ ثابت */
.crash-pre {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
  direction: ltr;
  text-align: left;
  margin: 6px 0 14px;
}
.crash-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px; margin: 4px 0 12px; }
.crash-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crash-meta .mono { word-break: break-all; }
td.crash-cell { max-width: 420px; white-space: normal; word-break: break-word; }
#crash-detail h3 { font-size: 13px; color: var(--gold-ink); margin: 10px 0 2px; }