/* ══════════════════════════════════════════════════════════════════════════
   FlowScope V7 — Nebula Layer (طبقة بصرية إضافية فقط)
   لا تغيّر أي سلوك: لا تلمس أي id أو onclick أو form. كلها تأثيرات عرض.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1) الخلفية السديمية (Canvas ثابت خلف كل شيء) ── */
#fsNebulaBg{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.2s ease;
}
#fsNebulaBg.on{ opacity:1; }
/* المحتوى فوق الخلفية (base.html أصلاً يضع body > * بـ z-index:1) */
body{ background-color:#03060d; }

/* ── 2) عمق البطاقات (2D→3D خفيف) — يطبَّق على كل الصفحات ── */
.fs-depth-ready .card,
.fs-depth-ready .gf-sec,
.fs-depth-ready .sm-card,
.fs-depth-ready .cx-card,
.fs-depth-ready .macro-card,
.fs-depth-ready .mega-card{
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
  will-change: transform;
}
.fs-depth-ready .card:hover,
.fs-depth-ready .gf-sec:hover,
.fs-depth-ready .sm-card:hover,
.fs-depth-ready .cx-card:hover,
.fs-depth-ready .macro-card:hover,
.fs-depth-ready .mega-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(125,211,252,.10), 0 0 38px rgba(56,189,248,.07);
}
@media (prefers-reduced-motion: reduce){
  .fs-depth-ready .card:hover, .fs-depth-ready .gf-sec:hover, .fs-depth-ready .sm-card:hover,
  .fs-depth-ready .cx-card:hover, .fs-depth-ready .macro-card:hover, .fs-depth-ready .mega-card:hover{ transform:none; }
}

/* ── 3) نبضات التنبيهات (حلقة تتمدد وتتلاشى) ── */
.fs-pulse{ position:relative; isolation:isolate; }
.fs-pulse::before, .fs-pulse::after{
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  border:1.5px solid var(--fs-pulse-color, rgba(245,158,11,.75));
  pointer-events:none; z-index:-1;
  animation: fsPulseRing 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
.fs-pulse::after{ animation-delay:1.3s; }
.fs-pulse.fs-pulse-danger{ --fs-pulse-color: rgba(239,68,68,.75); }
.fs-pulse.fs-pulse-warning{ --fs-pulse-color: rgba(245,158,11,.75); }
.fs-pulse.fs-pulse-info{ --fs-pulse-color: rgba(56,189,248,.7); }
@keyframes fsPulseRing{
  0%   { transform:scale(1);   opacity:.85; }
  70%  { transform:scale(1.06); opacity:0; }
  100% { transform:scale(1.06); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .fs-pulse::before, .fs-pulse::after{ animation:none; opacity:.35; } }

/* ── 5) شريط الشهاب (comet) عند الانتقال بين الصفحات ── */
#fsComet{ position:fixed; inset:0; z-index:20800; pointer-events:none; display:none; }
#fsComet.on{ display:block; }

/* ── 6) Gauge Life (V7.2): طبقة الحياة فوق كل بوصلة ── */
.fs-gl-wrap{ position:relative; }
.fs-gl-canvas{ position:absolute; pointer-events:none; z-index:2; }
.fs-gl-trackwrap{ position:relative; }
.fs-gl-track{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.fs-gl-trackwrap .cx-needle, .fs-gl-trackwrap .cx-ghost{ z-index:2; }
.fs-gl-bezel{ pointer-events:none; }
@media print{ .fs-gl-canvas, .fs-gl-track{ display:none !important; } }

/* ── 7) شارة «آخر تحديث» (V7.3) ── */
.fs-fresh{ display:inline-flex; align-items:center; gap:6px; font-size:.64rem; font-weight:800; letter-spacing:.02em;
  padding:2px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#cbd5e1; white-space:nowrap; }
.fs-fresh i{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.fs-fresh-fresh{ color:#86efac; border-color:rgba(34,197,94,.3); }
.fs-fresh-waiting{ color:#7dd3fc; border-color:rgba(56,189,248,.3); }
.fs-fresh-stale{ color:#fbbf24; border-color:rgba(245,158,11,.35); }
.fs-fresh-stale i, .fs-fresh-dead i{ animation:fsFreshBlink 1.6s ease-in-out infinite; }
.fs-fresh-dead{ color:#fca5a5; border-color:rgba(239,68,68,.35); }
.fs-fresh-unknown{ color:#94a3b8; }
@keyframes fsFreshBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* ── 8) شارات التدفق (V7.3): اتجاه مستعار من مكوّن محسوب أصلاً ── */
.fs-fb{ display:inline-flex; align-items:center; gap:6px; font-size:.66rem; font-weight:900; padding:2px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#cbd5e1; vertical-align:middle; white-space:nowrap; }
.fs-fb i{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; animation:fsFbPulse 2.2s ease-in-out infinite; }
.fs-fb-pos{ color:#fbbf24; border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08); }
.fs-fb-neg{ color:#38bdf8; border-color:rgba(56,189,248,.4); background:rgba(56,189,248,.08); }
.fs-fb-neu{ color:#94a3b8; } .fs-fb-neu i{ animation:none; box-shadow:none; }
@keyframes fsFbPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.6); opacity:.55; } }
/* ترقية أيقونة بطاقات صناديق السندات الثابتة (✅/❌) إلى توهّج نابض */
.bc-pos .bond-tag{ text-shadow:0 0 10px rgba(34,197,94,.7); animation:fsTagGlowPos 2.4s ease-in-out infinite; }
.bc-neg .bond-tag{ text-shadow:0 0 10px rgba(239,68,68,.7); animation:fsTagGlowNeg 2.4s ease-in-out infinite; }
@keyframes fsTagGlowPos{ 0%,100%{ text-shadow:0 0 6px rgba(34,197,94,.4); } 50%{ text-shadow:0 0 16px rgba(34,197,94,.95); } }
@keyframes fsTagGlowNeg{ 0%,100%{ text-shadow:0 0 6px rgba(239,68,68,.4); } 50%{ text-shadow:0 0 16px rgba(239,68,68,.95); } }

/* ── 9) أشرطة الطاقة (GRAM موثوقية) ── */
.fs-energy{ position:relative; overflow:visible !important; }
.fs-energy > i{ box-shadow:0 0 calc(4px + var(--e,0) * 14px) currentColor; animation:fsEnergy 2.6s ease-in-out infinite; }
@keyframes fsEnergy{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.35); } }
@media (prefers-reduced-motion: reduce){ .fs-fb i, .bc-pos .bond-tag, .bc-neg .bond-tag, .fs-energy > i, .fs-fresh i{ animation:none; } }

/* ── 10) لوحة شرح برق التعارض (أسفل المجرّة) ── */
.bolt-panel{ margin-top:12px; border-radius:1rem; padding:12px 16px;
  background:linear-gradient(180deg, rgba(8,14,30,.9), rgba(4,8,18,.88));
  border:1px solid rgba(255,255,255,.08); box-shadow:0 14px 34px rgba(0,0,0,.3); }
.bolt-head{ font-size:.78rem; font-weight:900; color:#e2e8f0; letter-spacing:.04em; margin-bottom:8px; }
.bolt-list{ display:flex; flex-direction:column; gap:6px; }
.bolt-row{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:.6rem;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); }
.bolt-ico{ font-size:.85rem; filter:drop-shadow(0 0 6px rgba(255,255,255,.5)); }
.bolt-names{ font-size:.76rem; color:#cbd5e1; font-weight:700; }
.bolt-names b{ color:#fff; font-family:Consolas,monospace; }
.bolt-vs{ color:#8ba6c9; font-size:.7rem; padding:0 3px; }
.bolt-v{ font-family:Consolas,monospace; font-weight:900; font-size:.74rem; }
.bolt-v.pos{ color:#fbbf24; } .bolt-v.neg{ color:#38bdf8; }
.bolt-none{ font-size:.74rem; color:#86efac; font-weight:700; padding:6px 2px; }
.bolt-note{ margin-top:8px; font-size:.72rem; line-height:1.85; color:#8ba6c9; border-top:1px solid rgba(255,255,255,.06); padding-top:8px; }
.bolt-note b{ color:#cbd5e1; }