/* ═══ لمسات جمالية مشتركة — delight ═══ */
/* ٧) نقش هندسي ليبي خفيف (نجمة ثمانية وتشابك) */
:root{--libya-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='.55'%3E%3Cpath d='M28 6l6 8h10v10l8 6-8 6v10H34l-6 8-6-8H12V36l-8-6 8-6V14h10z'/%3E%3Cpath d='M28 16l4 6h6v6l4 2-4 2v6h-6l-4 6-4-6h-6v-6l-4-2 4-2v-6h6z'/%3E%3Cpath d='M0 0l8 8M56 0l-8 8M0 56l8-8M56 56l-8-8'/%3E%3C/g%3E%3C/svg%3E")}
.nx-pattern{position:absolute;inset:0;background-image:var(--libya-pattern);background-size:56px 56px;opacity:.07;pointer-events:none;
  mask-image:linear-gradient(115deg,#000 0%,transparent 70%);-webkit-mask-image:linear-gradient(115deg,#000 0%,transparent 70%)}
/* ٥) ترويسة حيّة حسب الوقت */
.top.sky-dawn{background:radial-gradient(120% 120% at 100% 0%,#8C4C63 0%,#3A2E55 45%,#0F1B30 100%)!important}
.top.sky-day{background:radial-gradient(120% 120% at 100% 0%,#2F6FA3 0%,#1A3E63 50%,#0D1B2A 100%)!important}
.top.sky-sunset{background:radial-gradient(120% 120% at 100% 0%,#D0703B 0%,#6B3A3A 45%,#0F1B2A 100%)!important}
.top.sky-night{background:radial-gradient(120% 120% at 100% 0%,#1B2E4F 0%,#0A1424 60%,#060C16 100%)!important}
.nx-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.nx-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7;animation:nxtw 3s ease-in-out infinite}
@keyframes nxtw{50%{opacity:.15}}
.nx-sun{position:absolute;width:120px;height:120px;border-radius:50%;left:-30px;top:-40px;pointer-events:none;filter:blur(2px);opacity:.55}
.sky-dawn .nx-sun{background:radial-gradient(circle,#FFC2A6,transparent 70%)}
.sky-day .nx-sun{background:radial-gradient(circle,#FFF3C4,transparent 68%);opacity:.35}
.sky-sunset .nx-sun{background:radial-gradient(circle,#FFB36B,transparent 70%);opacity:.75;top:auto;bottom:-50px}
.sky-night .nx-sun{width:46px;height:46px;left:22px;top:auto;bottom:24px;background:radial-gradient(circle at 35% 35%,#F4F1E6,#CFC9B6 60%);opacity:.9;filter:none;box-shadow:0 0 30px rgba(244,241,230,.35)}
/* ٦) المناسبات */
.nx-occ{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.nx-lantern{position:absolute;top:0;display:block;width:26px;animation:nxsw 3.2s ease-in-out infinite;transform-origin:top center}
.nx-lantern svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 10px rgba(255,200,110,.6))}
@keyframes nxsw{50%{transform:rotate(6deg)}}
.nx-occ-badge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.12);color:#FFE3B3;position:relative;z-index:1}
.occ-independence .nx-occ{background:linear-gradient(180deg,rgba(231,0,19,.22) 0 33%,rgba(0,0,0,.25) 33% 66%,rgba(35,158,70,.22) 66%)}
/* ٩) هياكل تحميل لامعة */
.skeleton{position:relative;overflow:hidden;background:#E9EDF2!important}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:nxsh 1.25s infinite}
@keyframes nxsh{to{transform:translateX(-100%)}}
/* ٨) أيقونات متحركة */
#bellBtn.alert svg{animation:nxbell 2.6s ease-in-out infinite;transform-origin:50% 8%}
@keyframes nxbell{0%,70%,100%{transform:rotate(0)}74%{transform:rotate(14deg)}80%{transform:rotate(-12deg)}86%{transform:rotate(7deg)}92%{transform:rotate(-4deg)}}
.gt:active .gt-ic svg,.qa-i:active .qa-ic{animation:nxpop .35s ease}
@keyframes nxpop{40%{transform:scale(.8) rotate(-6deg)}100%{transform:scale(1)}}
.nx-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:nxdraw .7s .2s cubic-bezier(.6,0,.2,1) forwards}
.nx-check circle{stroke-dasharray:160;stroke-dashoffset:160;animation:nxdraw .6s cubic-bezier(.6,0,.2,1) forwards}
@keyframes nxdraw{to{stroke-dashoffset:0}}
/* ١) البطاقة ثلاثية الأبعاد */
.nx-tilt{transform-style:preserve-3d;transition:transform .12s ease-out;will-change:transform}
.nx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.55),transparent 55%)}
/* ٢) قصاصات الاحتفال */
.nx-confetti{position:fixed;inset:0;pointer-events:none;z-index:9000}
/* ٣) انتقال مشترك بين بطاقة معاشي وبوابة المعاشات */
.grp-pen,.phero{view-transition-name:pension-card}
::view-transition-group(pension-card){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
/* ٤) سحب للتحديث بالشعار */
.nx-ptr{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:#0D1B2A;
  box-shadow:0 8px 20px rgba(0,0,0,.3);display:grid;place-items:center;z-index:300;opacity:0;transform:translateY(-60px);pointer-events:none}
.nx-ptr img{width:30px;height:30px;object-fit:contain}
.nx-ptr.spin img{animation:nxspin .9s linear infinite}
@keyframes nxspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nx-tilt,.nx-lantern,.nx-stars i,#bellBtn.alert svg{animation:none!important;transform:none!important}}
/* الترويسات تفرض position:relative على أبنائها — طبقات الزينة تبقى مطلقة */
.nx-pattern,.nx-sun,.nx-stars,.nx-occ{position:absolute!important}
.nx-sun{z-index:0!important}.nx-pattern,.nx-stars,.nx-occ{inset:0;z-index:0!important}
.nx-lantern{position:absolute!important;width:22px!important;max-width:22px!important}
.nx-lantern svg{width:22px!important;height:44px!important;max-width:none!important}
