/* ═══════════════════════════════════════════════════════════════
   غني OS — نظام تصميم «فيبل» (أعيد بناؤه من الصفر 2026-07-02)
   هوية: ذهب غني (الثروة) × بنفسج فيبل (الذكاء) × سماوي البيانات
   RTL · خطوط محلية · زجاج داكن · جوال أولاً · CSP نظيف (لا CDN)
═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'GhaniSans';src:url('../fonts/NotoSansArabic-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'GhaniSans';src:url('../fonts/NotoSansArabic-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'GhaniKufi';src:url('../fonts/NotoKufiArabic-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* أرضيات */
  --ink-0:#05070d; --ink-1:#090d17; --ink-2:#0d1320; --ink-3:#121a2c; --ink-4:#1a2438; --ink-5:#243049;
  --line:rgba(140,160,200,.10); --line-2:rgba(140,160,200,.20);
  /* نصوص */
  --tx:#e9eef8; --tx-2:#aab6cf; --tx-3:#6f7d9c; --tx-faint:#495571;
  /* الهوية الثلاثية */
  --gold:#f0b54a; --gold-2:#e89a2c; --gold-dim:rgba(240,181,74,.12);
  --fable:#8b7cf6; --fable-2:#b3a6ff; --fable-dim:rgba(139,124,246,.12);
  --cyan:#38d4d0; --cyan-2:#2aa8c4; --cyan-dim:rgba(56,212,208,.12);
  /* دلالات */
  --up:#3ddc97; --up-dim:rgba(61,220,151,.12);
  --down:#ff5d6c; --down-dim:rgba(255,93,108,.12);
  --warn:#ffb020; --warn-dim:rgba(255,176,32,.12);
  --crit:#ff4d6d; --high:#ff9f43; --med:#ffd54d; --low:#5f9fd8;
  /* أشكال */
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --glass:rgba(11,16,28,.82); --shadow:0 18px 50px -24px rgba(0,0,0,.9);
  --ff:'GhaniSans',-apple-system,system-ui,sans-serif;
  --ff-d:'GhaniKufi','GhaniSans',sans-serif;
  --nav-h:58px; --bnav-h:60px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:thin;scrollbar-color:var(--ink-5) transparent}
html,body{background:
  radial-gradient(1200px 700px at 85% -10%, rgba(139,124,246,.07), transparent 60%),
  radial-gradient(1000px 600px at 0% 110%, rgba(240,181,74,.05), transparent 55%),
  var(--ink-0);
  color:var(--tx);font-family:var(--ff);-webkit-tap-highlight-color:transparent;min-height:100%}
a{color:var(--cyan);text-decoration:none}
::selection{background:var(--fable-dim)}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--up)!important}.down{color:var(--down)!important}.gold{color:var(--gold)!important}
.fable{color:var(--fable-2)!important}.cyan{color:var(--cyan)!important}.dim{color:var(--tx-3)!important}

/* ══════════ شريط التنقل العلوي ══════════ */
#fnav{position:sticky;top:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;gap:8px;
  padding:0 14px;background:var(--glass);border-bottom:1px solid var(--line-2);backdrop-filter:blur(14px)}
#fnav .brand{display:flex;align-items:center;gap:10px;margin-inline-end:6px}
#fnav .brand img{width:34px;height:34px;border-radius:10px;border:1px solid var(--line-2)}
#fnav .brand .t{font-family:var(--ff-d);font-size:15.5px;white-space:nowrap}
#fnav .brand .t b{color:var(--gold)}
#fnav .links{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
#fnav .links::-webkit-scrollbar{display:none}
#fnav .lnk{padding:7px 13px;border-radius:20px;font-size:12.8px;font-weight:700;color:var(--tx-2);
  white-space:nowrap;border:1px solid transparent;transition:.15s}
#fnav .lnk:hover{color:var(--tx);background:var(--ink-3)}
#fnav .lnk.on{color:var(--gold);background:var(--gold-dim);border-color:rgba(240,181,74,.3)}
#fnav .acts{display:flex;gap:6px;align-items:center}
#fnav .npill{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:var(--r-sm);
  background:var(--ink-3);border:1px solid var(--line-2);color:var(--tx-2);font-size:12px;font-weight:700;
  cursor:pointer;font-family:var(--ff);transition:.15s;white-space:nowrap}
#fnav .npill:hover{border-color:var(--cyan);color:var(--tx)}
#fnav .npill.danger:hover{border-color:var(--down);color:var(--down)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);animation:fpulse 1.8s infinite}
.live-dot.off{background:var(--tx-faint);box-shadow:none;animation:none}
.live-dot.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}
@keyframes fpulse{50%{opacity:.35}}

/* ══════════ شريط الجوال السفلي ══════════ */
#bnav{display:none;position:fixed;bottom:0;inset-inline:0;z-index:41;height:calc(var(--bnav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:var(--glass);border-top:1px solid var(--line-2);
  backdrop-filter:blur(16px);grid-template-columns:repeat(5,1fr)}
#bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--tx-3);font-size:10px;font-weight:700}
#bnav a .i{font-size:19px;line-height:1}
#bnav a.on{color:var(--gold)}

/* ══════════ الحاوية ══════════ */
.wrap{max-width:1280px;margin:0 auto;padding:16px clamp(10px,2vw,24px) 60px}

/* ══════════ بوابة الدخول ══════════ */
#fgate{position:fixed;inset:0;z-index:99;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(900px 600px at 50% 0%, rgba(139,124,246,.08), transparent 60%), var(--ink-0)}
.gate-card{width:340px;max-width:100%;text-align:center;background:linear-gradient(180deg,var(--ink-2),var(--ink-1));
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:38px 30px 30px;box-shadow:var(--shadow)}
.gate-card .mk{width:66px;height:66px;border-radius:18px;border:1px solid var(--line-2);background:var(--ink-3);
  padding:11px;margin:0 auto 16px;position:relative}
.gate-card .mk img{width:100%;height:100%;object-fit:contain}
.gate-card .mk::after{content:'';position:absolute;inset:-5px;border-radius:22px;border:1px solid rgba(240,181,74,.25);
  animation:fpulse 2.4s infinite}
.gate-t{font-family:var(--ff-d);font-size:19px}
.gate-t b{color:var(--gold)}
.gate-s{font-size:12px;color:var(--tx-3);margin:6px 0 22px}
.gate-i{width:100%;padding:12px;border-radius:var(--r-sm);background:var(--ink-0);border:1px solid var(--line-2);
  color:var(--tx);font-size:20px;text-align:center;letter-spacing:8px;outline:none;margin-bottom:14px;font-family:var(--ff)}
.gate-i:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
.gate-b{width:100%;padding:12px;border-radius:var(--r-sm);border:none;font-family:var(--ff);font-weight:700;
  font-size:14px;cursor:pointer;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--ink-0)}
.gate-e{font-size:12px;color:var(--down);margin-top:11px;min-height:17px}

/* ══════════ لوحات ══════════ */
.panel{background:linear-gradient(180deg,var(--ink-2),var(--ink-1));border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.panel.accent{border-color:rgba(240,181,74,.25)}
.panel.violet{border-color:rgba(139,124,246,.28)}
.p-hd{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line)}
.p-hd h3{font-family:var(--ff-d);font-size:13.8px;font-weight:700;flex:1;min-width:0}
.p-hd .ic{font-size:15px}
.p-hd .meta{font-size:11px;color:var(--tx-3);white-space:nowrap}
.p-bd{padding:14px 16px}

/* شبكة */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}
.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}
@media(max-width:980px){.c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 12}}
@media(min-width:640px) and (max-width:980px){.c6.half-sm,.c4.half-sm,.c3.half-sm{grid-column:span 6}}

/* ══════════ مكوّنات ══════════ */
.stat{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;min-width:0}
.stat .k{font-size:11px;color:var(--tx-3);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v{font-family:var(--ff-d);font-size:20px;line-height:1.15}
.stat .s{font-size:10.5px;color:var(--tx-faint);margin-top:3px}
.stat-row{display:grid;gap:9px}
.stat-row.c2{grid-template-columns:repeat(2,1fr)}
.stat-row.c3{grid-template-columns:repeat(3,1fr)}
.stat-row.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:640px){.stat-row.c4{grid-template-columns:repeat(2,1fr)}.stat-row.c3{grid-template-columns:repeat(3,1fr)}}

.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;font-size:11.5px;
  font-weight:700;border:1px solid var(--line-2);background:var(--ink-3);color:var(--tx-2);white-space:nowrap}
.chip.ok{color:var(--up);border-color:rgba(61,220,151,.35);background:var(--up-dim)}
.chip.bad{color:var(--down);border-color:rgba(255,93,108,.35);background:var(--down-dim)}
.chip.warn{color:var(--warn);border-color:rgba(255,176,32,.35);background:var(--warn-dim)}
.chip.gold{color:var(--gold);border-color:rgba(240,181,74,.35);background:var(--gold-dim)}
.chip.violet{color:var(--fable-2);border-color:rgba(139,124,246,.4);background:var(--fable-dim)}
.chip.cyan{color:var(--cyan);border-color:rgba(56,212,208,.35);background:var(--cyan-dim)}

/* قياس (بوابة نجاح) */
.gauge{display:flex;align-items:center;gap:12px}
.gauge svg{width:64px;height:64px;flex:none}
.gauge .gv{font-family:var(--ff-d);font-size:17px}
.gauge .gk{font-size:11px;color:var(--tx-3);margin-top:2px}

/* صفوف بيانات */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px dashed var(--line);font-size:13px;min-width:0}
.row:last-child{border-bottom:none}
.row .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .sub{font-size:11px;color:var(--tx-3)}

/* شريط الأسواق المتحرك */
.ticker{overflow:hidden;position:relative;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ink-1);height:38px;display:flex;align-items:center}
.tick-track{display:flex;gap:26px;padding-inline:14px;white-space:nowrap;animation:tickmove 45s linear infinite;will-change:transform}
.ticker:hover .tick-track{animation-play-state:paused}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(50%)}}
.tk{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;font-weight:700}
.tk .s{color:var(--tx-3);font-weight:400}

/* شارات شدة/نتيجة */
.badge{display:inline-block;padding:2px 9px;border-radius:11px;font-size:10.5px;font-weight:700;white-space:nowrap}
.badge.tp{background:var(--up-dim);color:var(--up)}
.badge.sl{background:var(--down-dim);color:var(--down)}
.badge.valve{background:var(--warn-dim);color:var(--warn)}
.badge.other{background:var(--fable-dim);color:var(--fable-2)}
.badge.open{background:var(--cyan-dim);color:var(--cyan);animation:fpulse 1.8s infinite}

/* هيكل انتظار */
.sk{background:linear-gradient(90deg,var(--ink-3) 25%,var(--ink-4) 50%,var(--ink-3) 75%);
  background-size:200% 100%;animation:skm 1.4s infinite;border-radius:var(--r-sm);min-height:20px}
@keyframes skm{from{background-position:200% 0}to{background-position:-200% 0}}

/* مودال */
.modal-ov{position:fixed;inset:0;z-index:80;background:rgba(4,6,12,.75);backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;padding:18px}
.modal-ov.open{display:flex}
.modal{width:360px;max-width:100%;background:linear-gradient(180deg,var(--ink-2),var(--ink-1));
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.modal-t{font-family:var(--ff-d);font-size:15px;margin-bottom:16px}
.fld{margin-bottom:12px}
.fld-l{font-size:11.5px;color:var(--tx-3);margin-bottom:5px}
.fld-i{width:100%;padding:10px 12px;border-radius:var(--r-sm);background:var(--ink-0);border:1px solid var(--line-2);
  color:var(--tx);font-size:15px;outline:none;font-family:var(--ff)}
.fld-i:focus{border-color:var(--gold)}
.modal-msg{font-size:12px;min-height:16px;margin:4px 0 10px}
.modal-msg.err{color:var(--down)}.modal-msg.ok{color:var(--up)}
.modal-acts{display:flex;gap:8px}
.m-save{flex:1;padding:11px;border-radius:var(--r-sm);border:none;font-family:var(--ff);font-weight:700;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--ink-0)}
.m-cancel{padding:11px 18px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--ink-3);
  color:var(--tx-2);font-family:var(--ff);font-weight:700;cursor:pointer}

/* فلاتر */
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.fbtn{padding:6px 13px;border-radius:18px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--ff);
  background:var(--ink-3);border:1px solid var(--line-2);color:var(--tx-2);transition:.14s}
.fbtn.on{background:var(--gold-dim);border-color:rgba(240,181,74,.4);color:var(--gold)}
.finp{flex:1;min-width:140px;padding:7px 13px;border-radius:18px;background:var(--ink-0);
  border:1px solid var(--line-2);color:var(--tx);font-size:12.5px;outline:none;font-family:var(--ff)}
.finp:focus{border-color:var(--cyan)}

/* تذييل */
.foot{margin-top:22px;text-align:center;color:var(--tx-faint);font-size:11px;line-height:1.8}

/* ══════════ جوال ══════════ */
@media(max-width:820px){
  #fnav .links{display:none}
  #fnav .brand{flex:1}
  #bnav{display:grid}
  .wrap{padding-bottom:calc(var(--bnav-h) + 40px)}
  .p-bd{padding:12px 13px}
}
@media(prefers-reduced-motion:reduce){
  .tick-track,.live-dot,.sk,.badge.open,.gate-card .mk::after{animation:none}
}