/* ══════════════════════════════════════════════════════════════════════════
   جسر المنظومة — يُطبّق بصمات «الداكن الفاخر» على أنظمة مُحكَم القائمة
   ──────────────────────────────────────────────────────────────────────────
   `design-system.css` هي المصدر، وتُستعمل **كما هي** لأي نظامٍ يُبنى من أوّله.
   لكنّ أنظمتنا القائمة تُسمّي مكوّناتها بأسمائها هي (`.btn-brand` · `.btn.p`)
   وتضبط هندستها بنفسها. فلو تركنا مكوّنات المنظومة تدهسها لانكسر ما يعمل.

   فالترتيب في كل نظام:
     ١· `design-system.css`  ← **قبل** ستايل النظام: تُعرَّف الرموز، وتُدهَس
                                مكوّناتها بمكوّنات النظام فلا يُكسر شيء.
     ٢· ستايل النظام          ← هندسته كما هي.
     ٣· `mk-skin.css` (هذا)   ← **بعدها**: البصمات السبع وحدها تفوز.

   والبصمات السبع من `PROMPT.md`، وهي ما يصنع الشكل:
     ١ الهالتان في الخلفية · ٢ تدرّج البطاقة · ٣ لمعان الزرّ الرئيسي
     ٤ قاعدة ١٤٪ للشارات   · ٥ العلامة المائية · ٦ رأس التوقيع
     ٧ الحركة المقيسة
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ ١ · الخلفية ليست لونًا مسطّحًا ═══
   هالتان ضخمتان خافتتان في زاويتين متقابلتين. هذا وحده ما يجعل الشاشة
   تبدو **عميقة** لا **سوداء**. أهمّ سطرٍ في المنظومة كلّها. */
body{
  background:
    radial-gradient(1200px 620px at 100% -8%,  rgba(var(--brand-rgb),.06), transparent 60%),
    radial-gradient(900px 520px at -10% 112%,  rgba(var(--ok-rgb),.05),    transparent 55%),
    var(--surface-0) !important;
}
/* الأسطح النهاريّة تُفسدها الهالة الداكنة — تُخفَّف ولا تُلغى */
body[data-style="paper"], body[data-style="cream"]{
  background:
    radial-gradient(1200px 620px at 100% -8%, rgba(var(--brand-rgb),.05), transparent 60%),
    var(--surface-0) !important;
}

::selection{background:rgba(var(--brand-rgb),.28); color:#fff}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--surface-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--brand),var(--line-lit));border-radius:3px}
*:focus-visible{outline:2px solid var(--brand-br);outline-offset:2px;border-radius:4px}

/* ═══ ٢ · البطاقات تدرّجٌ لا لونٌ واحد ═══
   ثلاث درجاتٍ متقاربةٍ جدًّا بزاوية 158deg — الفرق بالكاد يُرى، وهو مقصود:
   يعطي البطاقة انحناءَ ضوءٍ خفيفًا. */
.card, .kpi, .kpi-card, .stat, .panel{
  background: var(--card-grad) !important;
  border-color: var(--line);
  box-shadow: var(--shadow);
}

/* ═══ ٣ · الزرّ الرئيسي يلمع ═══
   تدرّجٌ رأسيّ فاتح←أساس، و**هالةٌ ملوّنة** تحته لا ظلٌّ أسود. وعند التحويم
   يرتفع 1px وتتضاعف الهالة. هذا هو اللمعان الذي يصعب تقليده. */
.btn-brand, .btn.p, .btn-gold, .mk-go, .gate-go, .btn-primary{
  background: linear-gradient(180deg, var(--brand-br), var(--brand)) !important;
  color: var(--brand-ink) !important;
  border: 0 !important;
  box-shadow: 0 2px 9px -2px rgba(var(--brand-rgb),.45) !important;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-brand:hover, .btn.p:hover, .btn-gold:hover, .mk-go:hover,
.gate-go:hover, .btn-primary:hover{
  background: var(--brand-br) !important;
  transform: translateY(-1px);
  box-shadow: 0 9px 22px -6px rgba(var(--brand-rgb),.55) !important;
}
.btn-brand:active, .btn.p:active, .mk-go:active{transform:translateY(1px)}
.btn-brand:disabled, .btn.p:disabled, .mk-go:disabled{
  opacity:.45; cursor:not-allowed; transform:none !important;
}

/* ═══ ٤ · قاعدة الحالة الثابتة — ١٤٪ خلفية + نصٌّ كامل التشبّع ═══
   لا تُملأ شارةٌ بلونٍ صريح أبدًا. */
.badge, .chip-st, .pill{
  border-radius:20px; font-size:11px; font-weight:700; padding:3px 11px;
  line-height:1.7; display:inline-flex; align-items:center; gap:4px;
}
.badge.ok,   .badge-ok,   .badge.success{background:rgba(var(--ok-rgb),.14)   !important; color:var(--ok)   !important}
.badge.warn, .badge-warn{ background:rgba(var(--warn-rgb),.14) !important; color:var(--warn) !important}
.badge.bad,  .badge-bad, .badge.danger{ background:rgba(var(--bad-rgb),.14)  !important; color:var(--bad)  !important}
.badge.info, .badge-info{ background:rgba(var(--info-rgb),.14) !important; color:var(--info) !important}
.badge-brand{             background:rgba(var(--brand-rgb),.14)!important; color:var(--brand)!important}

/* ═══ ٥ · العلامة المائية ═══
   أكبر من حاويتها بكثير · مقصوصةٌ عمدًا · لا تُقرأ بل تُحَسّ.
   مقاسات المنظومة الثلاثة، ويستعملها `MK.logo.watermark`. */
.wm{position:absolute;pointer-events:none;user-select:none;z-index:0}
.wm-page {height:150vh;opacity:.035;left:-12%;top:-15%}
.wm-panel{height:340px; opacity:.035;left:-30%;bottom:60px}
.wm-card {height:220px; opacity:.06; left:-20px;top:-30px}
.wm-host{position:relative;overflow:hidden}
.wm-host>*:not(.wm){position:relative;z-index:1}

/* علامتنا المائية تتبع مقاس اللوح */
.mk-wm{opacity:.035 !important}

/* ═══ ٦ · رأس التوقيع ═══
   نقطةٌ ٧px بلون العلامة، ثمّ نصٌّ بخطّ العناوين، ثمّ خطٌّ يتلاشى. */
.mk-sig-dot{background:var(--brand) !important;box-shadow:none !important}
.mk-sig-t{font-family:var(--font-display) !important;font-size:1rem !important;
          color:var(--brand) !important}
.mk-sig-l{background:linear-gradient(90deg,var(--line-lit),transparent) !important}
[dir=rtl] .mk-sig-l{background:linear-gradient(270deg,var(--line-lit),transparent) !important}

/* ═══ ٧ · الخطوط ═══
   العناوين والأرقام الكبيرة بخطّ العرض، والمبالغ والمعرّفات أحاديّة العرض
   فتصطفّ رأسيًّا وتُقرأ أسرع. */
body, input, select, textarea, button{font-family:var(--font-body)}
h1, h2, h3, .page-title, .kpi-value, .mod-title, .disp,
.vtitle, #vTitle, .brand b{font-family:var(--font-display)}
.mono, .num, td.num, .ltr, code, .kpi-value{font-family:var(--font-mono)}

/* ═══ ٨ · الحركة مقيسة ═══
   .15s للأزرار · .18s للبطاقات · لا شيء يقفز ولا شيء يتأخّر. */
.card, .kpi, .kpi-card, .row-card{transition:transform .18s, box-shadow .18s, border-color .18s}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ═══ الحقول ═══ */
input:focus, select:focus, textarea:focus,
.inp:focus, .sel:focus{border-color:var(--brand) !important; box-shadow:var(--ring) !important}

/* ═══ الجداول ═══ */
th{color:var(--brand)}
tr:hover td{background:rgba(var(--brand-rgb),.04)}