/* ═══════════════════════════════════════════════════════════════════════════
   Omar RADIUS — مظاهر اللوحة (2026-10-17 · طلب المالك · مجانية للكل)
   • «glass» الافتراضي = تصميم ملف المعاينة (design/radius_ui/radius_redesign.html) بالضبط:
     كحلي #0A0E27 · بقعة سماوية وذهبية · بطاقات زجاجية · أزرار بتدرّج وهالة · قائمة زجاجية.
   • «classic» = اللوحة القديمة كما كانت (بلا data-skin) — ليلي/نهاري يعمل لها وحدها.
   • «كل ما غيّرت ثيم يتغيّر كل شي» (طلب المالك): كل مظهرٍ يعرّف الألوان + الخطّ + الأشكال
     (--sk-*: زوايا البطاقة/الزرّ/الحقل/الشارة/الحوار) + معالجة البطاقات والأزرار والقائمة والشريط
     والجداول والحقول والقوائم المنبثقة والحوارات والخلفية — والكتلة المشتركة أدناه تطبّقها على كل المكوّنات.
   • كل مظهرٍ يفرض وضعه (index.html omrApplySkin يكتب data-theme) · الخطّ لا يغلب خطّ «التفضيلات».
   • بلا backdrop-filter على البطاقات (قاعدة الأداء) · الحركات تسقط مع prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ الكتلة المشتركة: الأشكال والخطّ من رموز المظهر على كل المكوّنات ═══ */
html[data-skin] { --radius: var(--sk-rc); --radius-sm: var(--sk-rb); --radius-xs: var(--sk-ri); --r-sm: var(--sk-rb); --r-md: var(--sk-rc); --r-lg: var(--sk-rc); --r-xl: var(--sk-rd); }
html[data-skin]:not([data-font]) { --font: var(--font-skin), var(--font-sys); }
html[data-skin]:not([data-font]) :is(h1, h2, h3, .num, .pd-kv, .pd-big, .pd-goal-v, .k-val, .page-head h1) { font-family: var(--font-head, var(--font-skin)), var(--font-sys); }
html[data-skin] .card { border-radius: var(--sk-rc); }
html[data-skin] :is(.btn, .icon-btn, .seg, .tabs, .nav a, .sb-search, .lbg-tg, .pd-chip, .hub-bar a) { border-radius: var(--sk-rb); }
html[data-skin] :is(.seg button, .tabs button) { border-radius: calc(var(--sk-rb) - 3px); }
html[data-skin] :is(input, select, textarea, .input-icon input) { border-radius: var(--sk-ri); }
html[data-skin] :is(.badge, .chip, .pd-dl, .sys-chip) { border-radius: var(--sk-rp); }
html[data-skin] :is(.dialog, .drawer, .dr-panel, .menu, .skin-pop, .toast, .cmdk) { border-radius: var(--sk-rd); }
html[data-skin] .dialog, html[data-skin] .menu { background: var(--sk-pop, var(--surface-solid)); }
html[data-skin] .tbl th { background: var(--sk-th, transparent); }

/* ═══ ١) الزجاجي — الافتراضي (تصميم الملف) ═══════════════════════════════ */
html[data-skin="glass"] {
  --bg0: #0a0e27; --bg1: #1a1f3a;
  --surface: rgba(26, 31, 58, .86); --surface-solid: #141936; --surface-2: rgba(255, 255, 255, .06); --surface-3: rgba(255, 255, 255, .1);
  --border: rgba(255, 255, 255, .12); --border-2: rgba(255, 255, 255, .2);
  --text: #e8ecff; --muted: #9aa3c7; --faint: #6b7399;
  --cyan: #00b8d4; --violet: #8b7cff; --green: #00e5a0; --gold: #ffb300; --red: #ff5a5f; --pink: #ec4899; --blue: #4d8dff; --gray: #5c6488;
  --chart-surface: #141936; --tip-bg: rgba(14, 18, 42, .97);
  --input-bg: rgba(255, 255, 255, .06); --hover: rgba(255, 255, 255, .06); --skel: rgba(255, 255, 255, .07);
  --shadow: 0 14px 36px rgba(0, 0, 0, .4); --shadow-sm: 0 8px 24px rgba(0, 0, 0, .3); --glow: 0 0 24px rgba(0, 184, 212, .25);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .08); --sheen: none;
  --sk-rc: 18px; --sk-rb: 12px; --sk-ri: 12px; --sk-rp: 999px; --sk-rd: 22px;
  --sk-pop: #141936; --sk-th: rgba(255, 255, 255, .03);
  --font-skin: "IBM Plex Sans Arabic"; --font-head: "Cairo"; color-scheme: dark;
}
html[data-skin="glass"] body::before {
  background: radial-gradient(640px 420px at 88% -6%, rgba(0, 184, 212, .32), transparent 70%),
              radial-gradient(560px 400px at 4% 106%, rgba(255, 179, 0, .18), transparent 70%),
              linear-gradient(180deg, #0a0e27, #1a1f3a);
}
html[data-skin="glass"] .card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32), 0 0 24px rgba(0, 184, 212, .07), inset 0 1px 0 rgba(255, 255, 255, .07);
}
html[data-skin="glass"] .sidebar { background: rgba(10, 14, 39, .82); border-inline-end-color: rgba(255, 255, 255, .08); }
html[data-skin="glass"] .topbar { background: rgba(10, 14, 39, .7); border-bottom-color: rgba(255, 255, 255, .08); }
html[data-skin="glass"] .nav a.active { color: #e8ecff; background: linear-gradient(90deg, rgba(0, 184, 212, .05), rgba(0, 184, 212, .24)); border: 1px solid rgba(0, 184, 212, .45); box-shadow: 0 0 16px rgba(0, 184, 212, .2); }
html[dir="ltr"][data-skin="glass"] .nav a.active { background: linear-gradient(270deg, rgba(0, 184, 212, .05), rgba(0, 184, 212, .24)); }
html[data-skin="glass"] .nav a.active svg { color: #00b8d4; }
html[data-skin="glass"] .btn-primary { background: linear-gradient(135deg, #00e5a0, #00b8d4); color: #03201b; box-shadow: 0 0 20px rgba(0, 229, 160, .5), 0 0 30px rgba(0, 184, 212, .3); }
html[data-skin="glass"] :is(.btn-gold, .seg button.active, .tabs button.active) { background: linear-gradient(135deg, #ffc107, #ff9800); color: #2a1700; box-shadow: 0 0 18px rgba(255, 179, 0, .45); }
html[data-skin="glass"] .btn-danger { background: linear-gradient(135deg, #ff5a5f, #e53935); box-shadow: 0 0 18px rgba(255, 90, 95, .4); }
html[data-skin="glass"] .btn-ghost { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
html[data-skin="glass"] :is(.seg, .tabs) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
html[data-skin="glass"] .tb-user .avatar { background: radial-gradient(circle at 30% 30%, #ffe082, #ffb300); color: #2a1700; box-shadow: 0 0 14px rgba(255, 179, 0, .55), 0 0 22px rgba(255, 179, 0, .25); }
html[data-skin="glass"] .kpi::before { opacity: .22; }

/* ═══ (2026-10-28 · التصميم المعتمد) الزجاجي فوق خلفية «شبكات» + نهاري + تلقائي بالوقت ═══════════════
   • الخلفية صورةٌ واحدة ثابتة (bg_night.svg · bg_day.svg: غرفة خوادم + طوبولوجيا + بقع ملوّنة) تُرسم مرّةً
     في body::before مع غشاوةٍ للقراءة — بلا backdrop-filter على البطاقات (قاعدة الأداء).
   • الوضع: omr_glass_mode (auto · day · night) ⇒ index.html omrApplySkin يكتب data-theme؛ «تلقائي» نهاريٌّ
     ٦:٠٠–١٨:٠٠ بتوقيت الجهاز ويُعاد حسابه كل دقيقة (app.js glassAutoTick). */
html[data-skin="glass"] body::before {
  inset: -24px;
  background: linear-gradient(180deg, rgba(10, 14, 39, .50), rgba(10, 14, 39, .62)),
              url(/radius/bg_night.svg) center / cover no-repeat, #0a0e27;
  filter: blur(2px) saturate(115%);
}
html[data-skin="glass"] .sidebar { background: rgba(10, 14, 39, .66); }
html[data-skin="glass"] .topbar { background: rgba(10, 14, 39, .58); }
html[data-skin="glass"] .nav a.active { color: #04121c; background: linear-gradient(135deg, #00e5ff, #00b8d4); border-color: rgba(255, 255, 255, .3); box-shadow: 0 0 18px rgba(0, 229, 255, .45), 0 0 32px rgba(0, 184, 212, .3); }
html[dir="ltr"][data-skin="glass"] .nav a.active { background: linear-gradient(135deg, #00e5ff, #00b8d4); }
html[data-skin="glass"] .nav a.active svg { color: #04121c; }

/* النهاري — الزجاج نفسه فاتحاً */
html[data-skin="glass"][data-theme="light"] {
  --bg0: #e6effa; --bg1: #f6efe2;
  --surface: rgba(255, 255, 255, .80); --surface-solid: #ffffff; --surface-2: rgba(255, 255, 255, .55); --surface-3: rgba(255, 255, 255, .75);
  --border: rgba(15, 26, 51, .12); --border-2: rgba(15, 26, 51, .22);
  --text: #0f1a33; --muted: #3d4a66; --faint: #5d6a85;
  --cyan: #0086a0; --violet: #6d4ad8; --green: #00875f; --gold: #b06d00; --red: #d32f2f; --pink: #c2185b; --blue: #1d5fd1; --gray: #5d6a85;
  --chart-surface: #ffffff; --tip-bg: rgba(255, 255, 255, .98);
  --input-bg: rgba(255, 255, 255, .7); --hover: rgba(15, 26, 51, .05); --skel: rgba(15, 26, 51, .07);
  --shadow: 0 14px 36px rgba(0, 90, 130, .14); --shadow-sm: 0 6px 18px rgba(0, 90, 130, .10); --glow: 0 0 22px rgba(0, 151, 178, .18);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .9);
  --sk-pop: #ffffff; --sk-th: rgba(15, 26, 51, .04);
  color-scheme: light;
}
html[data-skin="glass"][data-theme="light"] body::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .34)),
              url(/radius/bg_day.svg) center / cover no-repeat, #e6effa;
}
html[data-skin="glass"][data-theme="light"] .card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .56)); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 14px 34px rgba(0, 90, 130, .14), 0 0 22px rgba(0, 184, 212, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
}
html[data-skin="glass"][data-theme="light"] .sidebar { background: rgba(255, 255, 255, .66); border-inline-end-color: rgba(255, 255, 255, .8); }
html[data-skin="glass"][data-theme="light"] .topbar { background: rgba(255, 255, 255, .6); border-bottom-color: rgba(255, 255, 255, .8); }
html[data-skin="glass"][data-theme="light"] .nav a.active { color: #fff; background: linear-gradient(135deg, #00b8d4, #0091ad); box-shadow: 0 0 18px rgba(0, 184, 212, .4), 0 8px 22px rgba(0, 145, 173, .25); }
html[data-skin="glass"][data-theme="light"] .nav a.active svg { color: #fff; }
html[data-skin="glass"][data-theme="light"] .btn-primary { background: linear-gradient(135deg, #00b884, #0097b2); color: #fff; box-shadow: 0 0 18px rgba(0, 184, 132, .4), 0 8px 24px rgba(0, 151, 178, .3); }
html[data-skin="glass"][data-theme="light"] .btn-ghost { background: rgba(255, 255, 255, .6); border-color: rgba(15, 26, 51, .14); color: var(--text); }
html[data-skin="glass"][data-theme="light"] :is(.seg, .tabs) { background: rgba(255, 255, 255, .55); border-color: rgba(15, 26, 51, .12); }
html[data-skin="glass"][data-theme="light"] :is(.btn-gold, .seg button.active, .tabs button.active) { color: #3b2600; }
html[data-skin="glass"][data-theme="light"] .hub-bar { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); }

/* زرّ الوضع (تلقائي · نهاري · ليلي) في الشريط العلوي — شارةٌ صغيرة «A» للتلقائي */
.gm-auto { position: relative; }
.gm-auto::after { content: "A"; position: absolute; bottom: 3px; inset-inline-end: 3px; font: 800 9px/1 system-ui, sans-serif; color: var(--gold); }

/* ═══ ٢) نيون سايبر ═══════════════════════════════════════════════════════ */
html[data-skin="neon"] {
  --bg0: #07020f; --bg1: #14052b;
  --surface: rgba(24, 8, 48, .86); --surface-solid: #160a2e; --surface-2: rgba(0, 240, 255, .045); --surface-3: rgba(0, 240, 255, .1);
  --border: rgba(0, 240, 255, .18); --border-2: rgba(255, 46, 151, .45);
  --text: #f2f0ff; --muted: #a99bd6; --faint: #7a6ba8;
  --cyan: #00f0ff; --violet: #b026ff; --green: #39ff88; --gold: #ffe600; --red: #ff3355; --pink: #ff2e97; --blue: #4d7cff; --gray: #6b5a95;
  --chart-surface: #14052b; --tip-bg: rgba(10, 2, 24, .97); --input-bg: rgba(0, 240, 255, .05); --hover: rgba(0, 240, 255, .07);
  --glow: 0 0 22px rgba(0, 240, 255, .35); --sheen: none;
  --sk-rc: 4px; --sk-rb: 3px; --sk-ri: 3px; --sk-rp: 3px; --sk-rd: 6px;
  --sk-pop: #12052a; --sk-th: rgba(255, 46, 151, .08);
  --font-skin: "Readex Pro"; --font-head: "Kufam"; color-scheme: dark;
}
html[data-skin="neon"] body::before {
  background: radial-gradient(800px 380px at 50% 108%, rgba(255, 46, 151, .32), transparent 70%), radial-gradient(700px 460px at 90% -10%, rgba(0, 240, 255, .2), transparent 70%), linear-gradient(180deg, #07020f, #14052b);
}
html[data-skin="neon"] body::after {
  content: ""; position: fixed; left: -20%; right: -20%; bottom: 0; height: 42vh; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 46, 151, .32) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(255, 46, 151, .32) 0 1px, transparent 1px 46px);
  transform: perspective(380px) rotateX(62deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(transparent, #000 75%); mask-image: linear-gradient(transparent, #000 75%);
  animation: skn-grid 3s linear infinite;
}
html[data-livebg="on"][data-skin="neon"] body::after { display: none; }
@keyframes skn-grid { to { background-position: 0 46px, 0 46px; } }
html[data-skin="neon"] .card {
  border-color: rgba(0, 240, 255, .28);
  background: linear-gradient(#00f0ff, #00f0ff) top right / 16px 2px no-repeat, linear-gradient(#00f0ff, #00f0ff) top right / 2px 16px no-repeat,
              linear-gradient(#ff2e97, #ff2e97) bottom left / 16px 2px no-repeat, linear-gradient(#ff2e97, #ff2e97) bottom left / 2px 16px no-repeat,
              linear-gradient(135deg, rgba(0, 240, 255, .07), rgba(176, 38, 255, .05)), rgba(18, 6, 38, .88);
  box-shadow: inset 0 0 22px rgba(0, 240, 255, .07), 0 10px 30px rgba(0, 0, 0, .45);
}
html[data-skin="neon"] :is(.btn-primary, .seg button.active, .nav a.active) { background: linear-gradient(135deg, #ff2e97, #b026ff); color: #fff; border-color: transparent; box-shadow: 0 0 18px rgba(255, 46, 151, .55), 0 0 30px rgba(176, 38, 255, .3); }
html[data-skin="neon"] :is(.btn-gold, .tabs button.active) { background: linear-gradient(135deg, #ffe600, #ff2e97); color: #1a0010; box-shadow: 0 0 18px rgba(255, 230, 0, .4); }
html[data-skin="neon"] .btn-ghost { background: rgba(0, 240, 255, .05); border-color: rgba(0, 240, 255, .3); }
html[data-skin="neon"] :is(.page-head h1, .kpi .k-val, .pd-big, .pd-kv, .card-head h2) { text-shadow: 0 0 14px currentColor; letter-spacing: .02em; }
html[data-skin="neon"] .topbar { background: rgba(7, 2, 15, .8); border-bottom-color: rgba(255, 46, 151, .35); }
html[data-skin="neon"] .sidebar { background: rgba(10, 3, 22, .95); border-inline-end-color: rgba(0, 240, 255, .25); }
html[data-skin="neon"] .tbl th { color: #ff2e97; }
html[data-skin="neon"] :is(input, select, textarea):focus { box-shadow: 0 0 0 1px #00f0ff, 0 0 14px rgba(0, 240, 255, .4); }

/* ═══ ٣) شفق فاتح ═════════════════════════════════════════════════════════ */
html[data-skin="aurora"] {
  --bg0: #f4f7fe; --bg1: #e8eefb;
  --surface: rgba(255, 255, 255, .92); --surface-solid: #ffffff; --surface-2: rgba(255, 255, 255, .7); --surface-3: #eef2fb;
  --border: rgba(15, 23, 42, .08); --border-2: rgba(15, 23, 42, .15);
  --text: #0f172a; --muted: #475569; --faint: #94a3b8;
  --cyan: #0891b2; --violet: #7c3aed; --green: #059669; --gold: #d97706; --red: #e11d48; --pink: #db2777; --blue: #2563eb; --gray: #94a3b8;
  --chart-surface: #ffffff; --tip-bg: rgba(255, 255, 255, .98); --input-bg: rgba(255, 255, 255, .85); --hover: rgba(15, 23, 42, .04);
  --shadow: 0 14px 36px rgba(15, 23, 42, .1); --shadow-sm: 0 8px 22px rgba(15, 23, 42, .07);
  --sk-rc: 24px; --sk-rb: 14px; --sk-ri: 14px; --sk-rp: 999px; --sk-rd: 26px;
  --sk-pop: #ffffff; --sk-th: rgba(8, 145, 178, .05);
  --font-skin: "Tajawal"; --font-head: "Almarai"; color-scheme: light;
}
html[data-skin="aurora"] body::before {
  inset: -25%;
  background: radial-gradient(38% 34% at 75% 20%, rgba(8, 145, 178, .3), transparent 70%), radial-gradient(34% 34% at 20% 80%, rgba(217, 119, 6, .2), transparent 70%),
              radial-gradient(34% 30% at 35% 30%, rgba(124, 58, 237, .2), transparent 70%), radial-gradient(30% 30% at 82% 76%, rgba(219, 39, 119, .15), transparent 70%), #f1f5fd;
  filter: blur(36px); animation: skn-aur 28s ease-in-out infinite alternate;
}
@keyframes skn-aur { to { transform: rotate(22deg) scale(1.08); } }
html[data-skin="aurora"] .card { background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .72)); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 12px 32px rgba(15, 23, 42, .08), inset 0 1px 0 #fff; }
html[data-skin="aurora"] .sidebar { background: rgba(255, 255, 255, .78); border-inline-end-color: rgba(255, 255, 255, .9); }
html[data-skin="aurora"] .topbar { background: rgba(244, 247, 254, .75); }
html[data-skin="aurora"] :is(.btn-primary, .seg button.active, .nav a.active) { background: linear-gradient(135deg, #0891b2, #7c3aed); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(124, 58, 237, .25); }
html[data-skin="aurora"] :is(.btn-gold, .tabs button.active) { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; box-shadow: 0 8px 20px rgba(234, 88, 12, .25); }
html[data-skin="aurora"] .btn-ghost { background: rgba(255, 255, 255, .85); border-color: rgba(15, 23, 42, .08); box-shadow: 0 4px 12px rgba(15, 23, 42, .06); }
html[data-skin="aurora"] :is(.seg, .tabs) { background: rgba(255, 255, 255, .7); }

/* ═══ ٤) ملكي ذهبي ═════════════════════════════════════════════════════════ */
html[data-skin="royal"] {
  --bg0: #0b0a08; --bg1: #16130d;
  --surface: rgba(26, 22, 14, .9); --surface-solid: #17140e; --surface-2: rgba(212, 175, 55, .05); --surface-3: rgba(212, 175, 55, .11);
  --border: rgba(212, 175, 55, .26); --border-2: rgba(212, 175, 55, .5);
  --text: #f4eedf; --muted: #a99f86; --faint: #7c735e;
  --cyan: #e6c27a; --violet: #b8862b; --green: #8fd4a8; --gold: #d4af37; --red: #d9534f; --pink: #e27fa6; --blue: #a78bfa; --gray: #6e6552;
  --chart-surface: #17140e; --tip-bg: rgba(16, 13, 8, .97); --input-bg: rgba(212, 175, 55, .05); --hover: rgba(212, 175, 55, .07);
  --glow: 0 0 22px rgba(212, 175, 55, .3); --sheen: none;
  --sk-rc: 10px; --sk-rb: 6px; --sk-ri: 5px; --sk-rp: 4px; --sk-rd: 12px;
  --sk-pop: #17140e; --sk-th: rgba(212, 175, 55, .07);
  --font-skin: "Noto Naskh Arabic"; --font-head: "El Messiri"; color-scheme: dark;
}
html[data-skin="royal"] body::before {
  background: radial-gradient(900px 520px at 50% -12%, rgba(212, 175, 55, .16), transparent 70%),
              repeating-linear-gradient(45deg, rgba(212, 175, 55, .035) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, rgba(212, 175, 55, .035) 0 1px, transparent 1px 14px),
              linear-gradient(180deg, #0b0a08, #16130d);
}
html[data-skin="royal"] .card {
  border: 1px solid rgba(212, 175, 55, .48);
  background: linear-gradient(90deg, transparent, rgba(247, 231, 176, .7), transparent) top center / 70% 1px no-repeat, linear-gradient(170deg, rgba(212, 175, 55, .1), #17140e 45%, #14110b);
  box-shadow: inset 0 0 0 5px #15120c, inset 0 0 0 6px rgba(212, 175, 55, .17), 0 16px 36px rgba(0, 0, 0, .45);
}
html[data-skin="royal"] .card-head h2::before { content: "◆"; color: #d4af37; font-size: 9px; margin-inline-end: 7px; vertical-align: 2px; }
html[data-skin="royal"] :is(.btn-primary, .btn-gold, .seg button.active, .tabs button.active) {
  background: linear-gradient(180deg, #fbf0c8 0%, #e8c873 30%, #c9a13b 58%, #9c7a1e 100%); color: #1a1306; border: 1px solid #6e5413; text-shadow: 0 1px 0 rgba(255, 245, 210, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(60, 40, 0, .35), 0 6px 18px rgba(212, 175, 55, .3);
}
html[data-skin="royal"] .btn-ghost { background: rgba(212, 175, 55, .04); border-color: rgba(212, 175, 55, .55); color: #e6c27a; }
html[data-skin="royal"] .btn-danger { background: linear-gradient(180deg, #b8473f, #7a1f1a); color: #f7e7b0; border: 1px solid #4a110e; }
html[data-skin="royal"] .nav a.active { background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .2)); color: #f7e7b0; border: 1px solid rgba(212, 175, 55, .5); box-shadow: none; }
html[data-skin="royal"] .sidebar { background: rgba(12, 10, 7, .96); border-inline-end-color: rgba(212, 175, 55, .3); }
html[data-skin="royal"] .topbar { background: rgba(11, 10, 8, .82); border-bottom-color: rgba(212, 175, 55, .3); }
html[data-skin="royal"] .tbl th { color: #d4af37; }
html[data-skin="royal"] :is(.page-head h1, .pd-big) {
  background: linear-gradient(100deg, #9c7a1e, #f7e7b0 35%, #d4af37 55%, #9c7a1e 80%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  animation: skn-foil 7s linear infinite;
}
@keyframes skn-foil { to { background-position: 220% center; } }
html[data-skin="royal"] .tb-user .avatar { background: linear-gradient(135deg, #f7e7b0, #d4af37, #9c7a1e); color: #1a1306; }

/* ═══ ٥) أحادي برو ═════════════════════════════════════════════════════════ */
html[data-skin="mono"] {
  --bg0: #09090b; --bg1: #0c0c0e;
  --surface: #111114; --surface-solid: #111114; --surface-2: #18181b; --surface-3: #27272a;
  --border: #27272a; --border-2: #3f3f46;
  --text: #fafafa; --muted: #a1a1aa; --faint: #71717a;
  --cyan: #3b82f6; --violet: #8b5cf6; --green: #22c55e; --gold: #eab308; --red: #ef4444; --pink: #ec4899; --blue: #3b82f6; --gray: #52525b;
  --chart-surface: #111114; --tip-bg: rgba(17, 17, 20, .98); --input-bg: #09090b; --hover: #18181b;
  --shadow: none; --shadow-sm: none; --glow: none; --hl: none; --sheen: none;
  --sk-rc: 10px; --sk-rb: 8px; --sk-ri: 8px; --sk-rp: 6px; --sk-rd: 12px;
  --sk-pop: #111114; --sk-th: #0c0c0e;
  --font-skin: "IBM Plex Sans Arabic"; --font-head: "Noto Kufi Arabic"; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; color-scheme: dark;
}
html[data-skin="mono"] body::before { background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 22px 22px, #09090b; }
html[data-skin="mono"] .card { background: #111114; border-color: #27272a; box-shadow: none; }
html[data-skin="mono"] :is(.kpi, .pd-kpi)::before { display: none; }
html[data-skin="mono"] :is(.num, .kpi .k-val, .pd-big, .pd-kv, .pd-goal-v) { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace !important; letter-spacing: -.02em; }
html[data-skin="mono"] :is(.btn-primary, .btn-gold, .seg button.active, .tabs button.active) { background: #fafafa; color: #09090b; box-shadow: none; border: 1px solid #fafafa; }
html[data-skin="mono"] .btn-danger { background: #dc2626; box-shadow: none; }
html[data-skin="mono"] .btn-ghost { background: transparent; border-color: #27272a; box-shadow: none; }
html[data-skin="mono"] .nav a.active { background: #18181b; color: #fafafa; border: 1px solid #27272a; box-shadow: none; }
html[data-skin="mono"] .nav a.active svg { color: #fafafa; }
html[data-skin="mono"] .sidebar { background: #0c0c0e; border-inline-end-color: #1f1f23; }
html[data-skin="mono"] .topbar { background: rgba(9, 9, 11, .92); border-bottom-color: #1f1f23; }
html[data-skin="mono"] * { text-shadow: none !important; }
html[data-skin="mono"] .tbl th { text-transform: uppercase; letter-spacing: .04em; }

/* ═══ ٦) صلصال ثلاثي الأبعاد ═══════════════════════════════════════════════ */
html[data-skin="clay"] {
  --bg0: #eef0fb; --bg1: #e4e7f7;
  --surface: #f3f4fc; --surface-solid: #f3f4fc; --surface-2: #e9ebf8; --surface-3: #dfe2f4;
  --border: rgba(43, 45, 74, .06); --border-2: rgba(43, 45, 74, .12);
  --text: #2b2d4a; --muted: #6b6f94; --faint: #8a8eb2;
  --cyan: #5b8def; --violet: #9b7bf0; --green: #3bc48a; --gold: #f6a13a; --red: #f0607a; --pink: #ee7fb8; --blue: #5b8def; --gray: #8a8eb2;
  --chart-surface: #f3f4fc; --tip-bg: rgba(255, 255, 255, .98); --input-bg: #e4e7f7; --hover: rgba(91, 141, 239, .07);
  --shadow: 12px 12px 28px rgba(163, 170, 214, .55), -12px -12px 28px rgba(255, 255, 255, .95);
  --shadow-sm: 8px 8px 20px rgba(163, 170, 214, .5), -8px -8px 20px rgba(255, 255, 255, .95);
  --sk-rc: 28px; --sk-rb: 16px; --sk-ri: 16px; --sk-rp: 999px; --sk-rd: 30px;
  --sk-pop: #f3f4fc; --sk-th: rgba(91, 141, 239, .06);
  --font-skin: "Tajawal"; --font-head: "Baloo Bhaijaan 2"; color-scheme: light;
}
html[data-skin="clay"] body::before { background: radial-gradient(700px 460px at 90% 0, rgba(91, 141, 239, .18), transparent 70%), radial-gradient(600px 420px at 0 100%, rgba(238, 127, 184, .16), transparent 70%), #eef0fb; }
html[data-skin="clay"] .card { background: #f3f4fc; border: 0; box-shadow: 9px 9px 22px rgba(163, 170, 214, .55), -9px -9px 22px rgba(255, 255, 255, .95), inset 2px 2px 3px rgba(255, 255, 255, .85), inset -3px -3px 7px rgba(163, 170, 214, .22); }
html[data-skin="clay"] :is(.sidebar, .topbar) { background: #eef0fb; border-color: transparent; }
html[data-skin="clay"] :is(.btn-ghost, .icon-btn, .chip, .pd-chip, .lbg-tg) { background: #f3f4fc; border: 0; box-shadow: 5px 5px 12px rgba(163, 170, 214, .5), -5px -5px 12px rgba(255, 255, 255, .95); }
html[data-skin="clay"] :is(.seg, .tabs, input, select, textarea) { background: #e4e7f7; border: 0; box-shadow: inset 3px 3px 7px rgba(163, 170, 214, .55), inset -3px -3px 7px #fff; }
html[data-skin="clay"] .seg { padding: 4px; }
html[data-skin="clay"] :is(.btn-primary, .seg button.active) { background: linear-gradient(145deg, #79a6f7, #4a78dc); color: #fff; box-shadow: 6px 6px 14px rgba(74, 120, 220, .35), -4px -4px 10px rgba(255, 255, 255, .9), inset 2px 2px 4px rgba(255, 255, 255, .45), inset -2px -3px 5px rgba(0, 0, 0, .14); }
html[data-skin="clay"] :is(.btn-gold, .tabs button.active) { background: linear-gradient(145deg, #ffb75e, #ef8a2e); color: #fff; box-shadow: 5px 5px 12px rgba(239, 138, 46, .35), -4px -4px 10px rgba(255, 255, 255, .9), inset 2px 2px 4px rgba(255, 255, 255, .45); }
html[data-skin="clay"] .btn-danger { background: linear-gradient(145deg, #f7849a, #e2486a); box-shadow: 5px 5px 12px rgba(226, 72, 106, .35), -4px -4px 10px rgba(255, 255, 255, .9); }
html[data-skin="clay"] .nav a.active { background: #f3f4fc; color: #2b2d4a; border: 0; box-shadow: 5px 5px 12px rgba(163, 170, 214, .5), -5px -5px 12px #fff; }
html[data-skin="clay"] .nav a.active svg { color: #5b8def; }
html[data-skin="clay"] :is(.dialog, .menu, .skin-pop) { border: 0; box-shadow: 14px 14px 34px rgba(163, 170, 214, .6), -10px -10px 26px #fff; }
html[data-skin="clay"] :is(.kpi, .pd-kpi)::before { opacity: .12; }

/* ═══ ٧) كربون سباق ════════════════════════════════════════════════════════ */
html[data-skin="carbon"] {
  --bg0: #0c0d0f; --bg1: #16181c;
  --surface: rgba(22, 24, 28, .95); --surface-solid: #16181c; --surface-2: rgba(255, 255, 255, .04); --surface-3: rgba(255, 255, 255, .08);
  --border: #2a2d33; --border-2: #3a3e46;
  --text: #f2f3f5; --muted: #9ca1ab; --faint: #6a707b;
  --cyan: #ff4d1a; --violet: #5ac8fa; --green: #b6ff3b; --gold: #ffc400; --red: #ff2d2d; --pink: #ff6fae; --blue: #5ac8fa; --gray: #4a4f58;
  --chart-surface: #16181c; --tip-bg: rgba(12, 13, 15, .97); --input-bg: #101114; --hover: rgba(255, 77, 26, .07);
  --glow: 0 0 22px rgba(255, 77, 26, .3); --sheen: none;
  --sk-rc: 6px; --sk-rb: 3px; --sk-ri: 3px; --sk-rp: 3px; --sk-rd: 8px;
  --sk-pop: #16181c; --sk-th: #111215;
  --font-skin: "Rubik"; --font-head: "Changa"; color-scheme: dark;
}
html[data-skin="carbon"] body::before { background: radial-gradient(900px 500px at 50% -10%, rgba(255, 77, 26, .16), transparent 70%), repeating-linear-gradient(45deg, #111214 0 4px, #0c0d0f 4px 8px), #0c0d0f; }
html[data-skin="carbon"] .card {
  border-color: #2a2d33;
  background: linear-gradient(90deg, #ff4d1a, #ffc400) top / 100% 2px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)),
              repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 3px, transparent 3px 6px), #15171b;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}
html[data-skin="carbon"] :is(.page-head h1, .kpi .k-val, .pd-kv, .pd-big, .card-head h2) { font-style: italic; }
html[data-skin="carbon"] .page-head h1::after { content: ""; display: inline-block; width: 26px; height: 14px; margin-inline-start: 10px; vertical-align: middle; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 7px 7px; opacity: .85; }
html[data-skin="carbon"] .btn { transform: skewX(-8deg); }
html[data-skin="carbon"] .btn > * { transform: skewX(8deg); }
html[data-skin="carbon"] :is(.btn-primary, .seg button.active) { background: linear-gradient(90deg, #b6ff3b, #7cff00); color: #0e1400; box-shadow: 0 0 18px rgba(182, 255, 59, .35); }
html[data-skin="carbon"] :is(.btn-gold, .tabs button.active) { background: linear-gradient(90deg, #ffc400, #ff4d1a); color: #120a00; box-shadow: 0 0 18px rgba(255, 77, 26, .4); }
html[data-skin="carbon"] .btn-ghost { background: #16181c; border-color: #2a2d33; }
html[data-skin="carbon"] .nav a.active { background: linear-gradient(270deg, rgba(255, 77, 26, .24), transparent); color: #fff; border: 0; border-inline-start: 3px solid #ff4d1a; box-shadow: none; }
html[dir="rtl"][data-skin="carbon"] .nav a.active { background: linear-gradient(90deg, rgba(255, 77, 26, .24), transparent); }
html[data-skin="carbon"] .nav a.active svg { color: #ff4d1a; }
html[data-skin="carbon"] .sidebar { background: #0e0f12; border-inline-end-color: #2a2d33; }
html[data-skin="carbon"] .topbar { background: rgba(12, 13, 15, .9); border-bottom: 2px solid; border-image: linear-gradient(90deg, #ff4d1a, #ffc400) 1; }
html[data-skin="carbon"] .tbl th { color: #ffc400; font-style: italic; }
html[data-skin="carbon"] :is(.prog i, .meter i, .bar i, .pd-mixbar i) { background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .2) 0 4px, transparent 4px 8px); }

/* ═══ زرّ المظهر وقائمته · شريط البحث ودخل اليوم في الشريط العلوي (كل المظاهر عدا الكلاسيكي) ═══ */
.skin-btn { position: relative; border: 2px solid transparent !important; background: linear-gradient(var(--bg0), var(--bg0)) padding-box, conic-gradient(#19c3e6, #ff3d9a, #e2b93b, #3ddc84, #5d8bf4, #19c3e6) border-box !important; color: var(--text) !important; }
.skin-pop {
  position: fixed; z-index: 120; width: 340px; max-width: calc(100vw - 24px); max-height: min(78vh, 680px); overflow: auto; padding: 10px;
  display: flex; flex-direction: column; gap: 4px; background: var(--sk-pop, var(--surface-solid)); border: 1px solid var(--border-2); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.skin-pop .skp-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 6px; font-weight: 800; }
.skp-row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid transparent; background: transparent; text-align: start; width: 100%; color: var(--text); cursor: pointer; font: inherit; }
.skp-row:hover { background: var(--hover); }
.skp-row[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.skp-prev { width: 54px; height: 36px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: flex-end; gap: 3px; padding: 5px; border: 1px solid rgba(128, 128, 128, .35); }
.skp-prev i { flex: 1; border-radius: 2px; }
.skp-row b { display: block; font-size: calc(13.5px * var(--fs, 1)); }
.skp-row small { display: block; font-size: calc(11.5px * var(--fs, 1)); color: var(--muted); line-height: 1.35; }
.skp-row .skp-ok { margin-inline-start: auto; color: var(--gold); display: grid; }
.skp-row .skp-ok svg { width: 18px; height: 18px; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.skin-grid .skp-row { border-color: var(--border); }
/* (2026-10-20 · طلب المالك «شيلي تاب البحث») لا خانة بحث عريضة في الشريط العلوي — أيقونة البحث (#tb-search) وCtrl K يكفيان. وشارة «اليوم» أُزيلت 10-19. */

@media (prefers-reduced-motion: reduce) {
  html[data-skin] body::before, html[data-skin] body::after, html[data-skin] .page-head h1, html[data-skin] .pd-big { animation: none !important; }
}