/* ═══════════════════════════════════════════════════════════
   آريا 2027 — طبقة التحسين البصري والتنقل (تُحمَّل بعد ستايل الصفحة)
   تعتمد على متغيرات الثيم الحالية: --accent / --accent2 / --accent3
   ═══════════════════════════════════════════════════════════ */
:root{--a27-ease:cubic-bezier(.22,1,.36,1);--a27-glass:rgba(255,255,255,.045);--a27-line:rgba(255,255,255,.09)}
[data-theme="light"]{--a27-glass:rgba(255,255,255,.7);--a27-line:rgba(15,23,42,.08)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* شريط تقدّم القراءة */
#a27-prog{position:fixed;top:0;right:0;left:0;height:3px;z-index:1000;transform-origin:right;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));box-shadow:0 0 14px var(--accent2);pointer-events:none}

/* ─── الهيرو: نجوم Canvas + شبكة ضوئية ─── */
#a27-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.a27-on .hero-particles{display:none}
.hero .hero-badge,.hero .hero-title,.hero .hero-sub,.hero .hero-btns,.hero .hero-stats-strip{position:relative;z-index:2}
.hero{isolation:isolate}
.hero::after{content:'';position:absolute;inset:auto 0 0 0;height:30%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,var(--bg))}
.hero-title{letter-spacing:-.5px}
.hero-title .hl{background:linear-gradient(100deg,var(--accent2),var(--accent3),var(--accent),var(--accent2));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:a27-shine 7s linear infinite}
@keyframes a27-shine{to{background-position:-250% 0}}
.hero-title{animation:a27-rise 1s var(--a27-ease) both}
.hero-sub{animation:a27-rise 1s .12s var(--a27-ease) both}
.hero-btns{animation:a27-rise 1s .24s var(--a27-ease) both}
.hero-stats-strip{animation:a27-rise 1s .36s var(--a27-ease) both;background:var(--a27-glass)!important;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid var(--a27-line)!important}
@keyframes a27-rise{from{opacity:0;transform:translateY(26px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.btn-hero-main{position:relative;overflow:hidden}
.btn-hero-main::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(120%);animation:a27-sweep 3.6s 1.2s infinite}
@keyframes a27-sweep{to{transform:translateX(-120%)}}

/* ─── شبكة التصفّح السريع (Bento) ─── */
.a27-bento{max-width:1180px;margin:0 auto;padding:3.2rem 1.2rem 3rem;position:relative;z-index:3}
.a27-bento h2{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:900;margin:0 0 1.4rem;text-align:center;line-height:1.5}
.a27-bento h2 span{background:linear-gradient(100deg,var(--accent2),var(--accent3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.a27-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:14px}
.a27-card{position:relative;grid-column:span 2;text-align:right;color:inherit;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;border-radius:24px;border:1px solid var(--a27-line);background:var(--a27-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;transition:transform .45s var(--a27-ease),border-color .3s,box-shadow .4s;text-decoration:none;min-height:150px}
.a27-card.w3{grid-column:span 3}.a27-card.w4{grid-column:span 4}
.a27-card:hover{border-color:color-mix(in srgb,var(--accent2) 55%,transparent);box-shadow:0 22px 60px -20px color-mix(in srgb,var(--accent2) 55%,transparent)}
.a27-card .ic{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent3) 30%,transparent));margin-bottom:6px}
.a27-card b{font-size:1.12rem;font-weight:900}
.a27-card p{font-size:.86rem;color:var(--text2);line-height:1.7;margin:0}
.a27-card .go{position:absolute;left:18px;bottom:16px;font-size:1.3rem;opacity:.35;transition:.35s var(--a27-ease)}
.a27-card:hover .go{opacity:1;transform:translateX(-6px)}
.a27-card.cta{background:linear-gradient(135deg,var(--accent2),var(--accent3));color:#fff;border-color:transparent}
.a27-card.cta p{color:rgba(255,255,255,.88)}.a27-card.cta .ic{background:rgba(255,255,255,.22)}
.spot::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 62%)}
.spot:hover::after{opacity:1}
[data-tilt-on]{transform-style:preserve-3d;will-change:transform}
@media(max-width:900px){.a27-grid{grid-template-columns:repeat(2,1fr)}.a27-card,.a27-card.w3,.a27-card.w4{grid-column:span 1;min-height:132px;padding:18px}.a27-card.cta{grid-column:span 2}}

/* ─── وضع «اللوحات»: صفحة واحدة بلا نزول طويل ─── */
.a27-stage [data-panel]:not(.is-active){display:none!important}
.a27-stage [data-panel].is-active{animation:a27-panel .6s var(--a27-ease) both}
@keyframes a27-panel{from{opacity:0;transform:translateY(22px) scale(.992);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.a27-stage section[data-panel]{min-height:calc(100vh - var(--nav-h))}
.a27-stage .scroll-top{display:none}
.a27-stage footer{margin-top:0}

/* أزرار التالي/السابق أسفل كل لوحة */
.a27-pager{max-width:1180px;margin:0 auto;padding:0 1.2rem 3.2rem;display:flex;gap:12px;justify-content:space-between}
.a27-pager button{flex:1;max-width:340px;display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:20px;cursor:pointer;color:inherit;font:inherit;font-weight:800;border:1px solid var(--a27-line);background:var(--a27-glass);backdrop-filter:blur(12px);transition:.35s var(--a27-ease)}
.a27-pager button:hover{transform:translateY(-3px);border-color:var(--accent2);box-shadow:0 18px 44px -18px var(--accent2)}
.a27-pager small{display:block;font-weight:600;color:var(--text3);font-size:.75rem}
.a27-pager .nx{margin-right:auto;text-align:right}.a27-pager .pv{margin-left:auto;text-align:left;flex-direction:row-reverse}
.a27-pager .ar{font-size:1.3rem;color:var(--accent2)}

/* مفتاح تبديل العرض */
#a27-mode{position:fixed;z-index:850;bottom:22px;right:22px;display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:99px;border:1px solid var(--a27-line);background:var(--a27-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--text2);font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;transition:.3s}
#a27-mode:hover{color:var(--text);border-color:var(--accent2)}
#a27-k{position:fixed;z-index:850;bottom:22px;right:50%;transform:translateX(50%);display:none}

/* شريط التنقل السفلي (للجوال) */
#a27-dock{display:none}
@media(max-width:820px){
  #a27-dock{display:flex;position:fixed;z-index:960;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(94vw,440px);padding:7px;gap:2px;border-radius:26px;border:1px solid var(--a27-line);background:color-mix(in srgb,var(--bg2) 82%,transparent);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);box-shadow:0 18px 50px rgba(0,0,0,.45)}
  #a27-dock button,#a27-dock a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border:0;border-radius:19px;background:none;color:var(--text3);font:inherit;font-size:.66rem;font-weight:800;cursor:pointer;text-decoration:none;transition:.3s var(--a27-ease);position:relative}
  #a27-dock .i{font-size:1.28rem;transition:.3s var(--a27-ease)}
  #a27-dock .on{color:var(--text);background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 28%,transparent),color-mix(in srgb,var(--accent3) 28%,transparent))}
  #a27-dock .on .i{transform:translateY(-2px) scale(1.12)}
  #a27-dock .reg{color:#fff;background:linear-gradient(135deg,var(--accent2),var(--accent3));flex:1.15}
  body.a27-on{padding-bottom:88px}
  #a27-mode{bottom:92px;right:12px;padding:7px 12px;font-size:.7rem}
  #vchatBtn{bottom:92px!important;left:14px!important}
  #vchatPanel{bottom:164px!important}
  .a27-pager{padding-bottom:1.6rem}.a27-pager button{padding:13px 14px}
}

/* لوحة البحث السريع */
#a27-cmd{position:fixed;inset:0;z-index:2000;background:rgba(3,5,14,.62);backdrop-filter:blur(10px);display:none;align-items:flex-start;justify-content:center;padding:13vh 14px 0}
#a27-cmd.on{display:flex}
#a27-cmd .p{width:min(600px,100%);background:var(--bg3);border:1px solid var(--a27-line);border-radius:24px;overflow:hidden;box-shadow:0 40px 110px rgba(0,0,0,.55);animation:a27-rise .35s var(--a27-ease)}
#a27-cmd input{width:100%;border:0;outline:0;background:none;color:var(--text);font:inherit;font-size:1.05rem;padding:20px 22px;border-bottom:1px solid var(--a27-line)}
#a27-cmd .l{max-height:50vh;overflow:auto;padding:8px}
#a27-cmd .i{display:flex;gap:12px;align-items:center;width:100%;border:0;background:none;color:inherit;font:inherit;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:right}
#a27-cmd .i.on,#a27-cmd .i:hover{background:color-mix(in srgb,var(--accent2) 16%,transparent)}
#a27-cmd .i small{margin-right:auto;color:var(--text3);font-size:.72rem}
#a27-cmd .e{padding:26px;text-align:center;color:var(--text3)}
.a27-pulse{animation:a27-pulse 1.6s var(--a27-ease) 2}
@keyframes a27-pulse{0%,100%{box-shadow:0 0 0 0 transparent}40%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent2) 45%,transparent)}}

/* لمسات الشريط العلوي */
.navbar.scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent)!important}
.nav-link{position:relative}
.nav-link.active::after{content:'';position:absolute;inset:auto 18% -6px 18%;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent2),var(--accent3));box-shadow:0 0 12px var(--accent2)}
/* أداء: لا نرسم ما لا يظهر */
.a27-classic section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 700px}


/* ═══════════ إصلاحات التداخل (v2.2) ═══════════ */
/* أول عنصر في كل لوحة لا يختبئ تحت الشريط العلوي الثابت */
.a27-stage [data-panel].a27-first:not(.hero){padding-top:calc(var(--nav-h) + 3.2rem)}
.a27-stage .visitors-bar{position:relative;z-index:1}
.visitors-bar .vb-inner{gap:.8rem}
@media(max-width:560px){.visitors-bar .vb-left{width:100%;justify-content:space-between;gap:.6rem}.visitors-bar .vb-stat{flex:1;padding:9px 12px}.visitors-bar .vb-live{margin:0 auto}}
/* الشريط المتحرك يبقى خلف كل ما فوقه ولا يتسرّب */
.ticker-bar{z-index:1;isolation:isolate;contain:paint}
/* بطاقات الأخبار: صورة مكسورة لا يظهر نصها ولا تغطي الشارة */
.nc-img{isolation:isolate}
.nc-img img{position:absolute;inset:0;z-index:1;font-size:0;color:transparent;background:transparent}
.nc-img .nc-img-placeholder{z-index:0}
.nc-pin{z-index:3}
.nc-img.is-broken img{display:none}
/* شبكة التصفح: بطاقات متساوية الارتفاع بلا فراغات */
.a27-card{align-self:stretch}
@media(max-width:900px){.a27-bento{padding-top:2.2rem}}

.a27-card.s2{grid-column:span 2}.a27-card.s3{grid-column:span 3}.a27-card.s6{grid-column:span 6;min-height:0;flex-direction:row;align-items:center;gap:18px}
.a27-card.s6 .ic{margin:0}.a27-card.s6 b{font-size:1.2rem}.a27-card.s6 p{flex:1}
@media(max-width:900px){.a27-card.s2,.a27-card.s3{grid-column:span 1}.a27-card.s6{grid-column:span 2}.a27-grid>.a27-card:last-child:nth-child(odd){grid-column:span 2}}

/* ═══ الثيم الفاتح: تباين النصوص الملوّنة (أخضر/أزرق فاتح كان باهتاً على الأبيض) ═══ */
[data-theme="light"]{--lt-g:#00775F;--lt-b:#1E62C9}
[data-theme="light"] .nav-link.active,
[data-theme="light"] .mob-link.active,
[data-theme="light"] .ticker-item:hover,
[data-theme="light"] .ci-info h4 + *,
[data-theme="light"] .cit-val a,
[data-theme="light"] .footer-links a:hover,
[data-theme="light"] .footer-copy a,
[data-theme="light"] .footer-copy strong,
[data-theme="light"] .btn-nav-login:hover,
[data-theme="light"] .modal-btn-sec:hover,
[data-theme="light"] .spec-tag,
[data-theme="light"] .spec-more,
[data-theme="light"] .modal-tag,
[data-theme="light"] .sec-badge,
[data-theme="light"] .about-tag,
[data-theme="light"] .hero-badge,
[data-theme="light"] .nc-more,
[data-theme="light"] .a27-pager .nx .ar,
[data-theme="light"] .a27-pager .pv .ar{color:var(--lt-g)!important}
[data-theme="light"] .spec-tag.blue,
[data-theme="light"] .spec-dur,
[data-theme="light"] .modal-tag.blue{color:var(--lt-b)!important}
[data-theme="light"] .btn-hero-sec{color:#0F172A}
[data-theme="light"] .a27-spot .go,[data-theme="light"] .a27-card .go{color:var(--lt-g)}

[data-theme="light"] .spec-card div[style*="color:var(--accent)"],[data-theme="light"] .spec-card div[style*="color:var(--accent)"] *{color:var(--lt-g)!important}
[data-theme="light"] .nc-card [style*="color:var(--accent)"]{color:var(--lt-g)!important}