/* ============================================================
   منصة الابتكار الدفاعي — نظام التصميم الفاخر (White-Label)
   جميع الألوان تُدار ديناميكيًا عبر CSS Variables من لوحة التحكم
   ============================================================ */
:root {
  /* الهوية الرسمية — دليل الهوية المؤسسية لوزارة الدفاع v3.0:
     Dark Green PANTONE 2466C = RGB(41,80,77) / Light Green 2250C = RGB(0,160,90) / Grey 7542C */
  --c-primary: #29504D;
  --c-dark: #132927;
  --c-gold: #c3a54b;
  --c-gold-light: #e0c87e;
  --c-sand: #eef2f1;
  --c-navy: #00A05A;
  --c-primary-rgb: 41 80 77;
  --c-dark-rgb: 19 41 39;
  --c-gold-rgb: 195 165 75;
  --c-sand-rgb: 238 242 241;
  --c-navy-rgb: 0 160 90;
  --c-grey-official: #B2BEC4;
  --hero-bg: url('/static/bg-mod-tanks.jpg');
  --font-main: 'IBM Plex Sans Arabic';
  --shadow-luxe: 0 10px 40px -12px rgba(26, 35, 20, .18);
  --shadow-gold: 0 4px 24px -6px rgba(201, 168, 76, .35);
}

* { font-family: var(--font-main), sans-serif; }
html, body { overflow-x: hidden; max-width: 100vw; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-primary) 60%, transparent); border-radius: 4px; }

/* ---------- شاشة البداية ---------- */
.splash-shield {
  width: 90px; height: 104px;
  background: linear-gradient(160deg, var(--c-gold), #8a6d2f);
  clip-path: polygon(50% 0, 100% 18%, 100% 60%, 50% 100%, 0 60%, 0 18%);
  animation: shieldPulse 1.6s ease-in-out infinite;
}
@keyframes shieldPulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.06); opacity: .85 } }

/* ---------- الشريط الحكومي الرسمي ---------- */
.gov-bar {
  background: linear-gradient(90deg, var(--c-dark), color-mix(in srgb, var(--c-dark) 80%, var(--c-primary)));
  border-bottom: 1px solid color-mix(in srgb, var(--c-gold) 35%, transparent);
}
.gov-bar .flag-stripe { background: linear-gradient(90deg, #165d31 33%, #fff 33% 66%, #165d31 66%); }

/* ---------- القائمة الجانبية الفاخرة ---------- */
.sidebar-luxe {
  background:
    radial-gradient(1200px 400px at -10% -10%, color-mix(in srgb, var(--c-gold) 7%, transparent), transparent 60%),
    linear-gradient(175deg, var(--c-dark) 0%, color-mix(in srgb, var(--c-dark) 88%, var(--c-primary)) 100%);
  border-left: 1px solid color-mix(in srgb, var(--c-gold) 18%, transparent);
}
.sidebar-link { transition: all .22s ease; border-right: 3px solid transparent; position: relative; }
.sidebar-link:hover { background: color-mix(in srgb, var(--c-gold) 10%, transparent); padding-right: 22px; }
.sidebar-link.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-gold) 20%, transparent), transparent);
  border-right-color: var(--c-gold); color: var(--c-gold-light);
}
.sidebar-link.active::after {
  content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold);
  box-shadow: 0 0 8px var(--c-gold);
}
.nav-group-title {
  font-size: 9.5px; letter-spacing: 2px; color: color-mix(in srgb, var(--c-gold) 65%, #999);
  padding: 14px 20px 6px; font-weight: 700;
}

/* ---------- الشعار الرسمي ---------- */
.emblem-ring {
  background: conic-gradient(from 180deg, var(--c-gold), #8a6d2f, var(--c-gold-light), var(--c-gold));
  padding: 2px; border-radius: 16px;
}
.emblem-inner {
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-dark) 70%, var(--c-primary)), var(--c-dark));
  border-radius: 14px;
}

/* ---------- البطاقات الفاخرة ---------- */
.card-luxe {
  background: #fff; border-radius: 18px;
  border: 1px solid rgba(26, 35, 20, .06);
  box-shadow: 0 2px 12px -4px rgba(26, 35, 20, .08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.card-luxe:hover { transform: translateY(-4px); box-shadow: var(--shadow-luxe); border-color: color-mix(in srgb, var(--c-gold) 40%, transparent); }

.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-luxe); }

/* إطار ذهبي علوي للبطاقات المميزة */
.gold-top { position: relative; overflow: hidden; }
.gold-top::before {
  content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}

/* ---------- KPI الفاخرة ---------- */
.kpi-luxe {
  background: linear-gradient(160deg, #fff 60%, color-mix(in srgb, var(--c-sand) 60%, #fff));
  border: 1px solid rgba(26, 35, 20, .07); border-radius: 16px;
  position: relative; overflow: hidden; transition: all .25s ease;
}
.kpi-luxe::after {
  content: ''; position: absolute; bottom: 0; right: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--kpi-color, var(--c-gold)), transparent);
  opacity: 0; transition: opacity .25s;
}
.kpi-luxe:hover { transform: translateY(-3px); box-shadow: var(--shadow-luxe); }
.kpi-luxe:hover::after { opacity: 1; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; }

.fade-in { animation: fadeIn .4s cubic-bezier(.2,.7,.3,1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.toast { animation: slideIn .3s ease; box-shadow: var(--shadow-luxe); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }

.progress-bar { transition: width .7s cubic-bezier(.2,.7,.3,1); }

/* ---------- الزخرفة الهندسية السعودية ---------- */
.geo-pattern {
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-gold) 5%, transparent) 0, color-mix(in srgb, var(--c-gold) 5%, transparent) 1px, transparent 1px, transparent 16px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c-gold) 5%, transparent) 0, color-mix(in srgb, var(--c-gold) 5%, transparent) 1px, transparent 1px, transparent 16px);
}
.geo-stars {
  background-image: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--c-gold) 12%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--c-gold) 9%, transparent) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 45% 85%, color-mix(in srgb, var(--c-gold) 7%, transparent) 0 1px, transparent 2px);
}

/* ---------- الفاصل الذهبي ---------- */
.gold-divider {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-gold) 60%, transparent), transparent);
}
.section-title-luxe { display: flex; align-items: center; gap: 12px; }
.section-title-luxe::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--c-gold) 45%, transparent), transparent); }

/* ---------- الجداول ---------- */
table.data-table th {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-sand) 80%, #fff), var(--c-sand));
  font-weight: 700; font-size: 11.5px; color: var(--c-primary);
  border-bottom: 2px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
}
table.data-table td, table.data-table th { padding: 11px 13px; text-align: right; }
table.data-table tbody tr { border-top: 1px solid #eee9dc; transition: background .15s; }
table.data-table tbody tr:hover { background: color-mix(in srgb, var(--c-sand) 55%, #fff); }

.classification-banner { letter-spacing: 1px; }
.modal-backdrop { animation: fadeIn .2s ease; backdrop-filter: blur(4px); }

/* ---------- أزرار فاخرة ---------- */
.btn-gold {
  background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold) 55%, #a8873a);
  color: var(--c-dark); font-weight: 700;
  box-shadow: var(--shadow-gold);
  transition: all .2s ease;
}
.btn-gold:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-primary-luxe {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 85%, #fff), var(--c-primary));
  color: #fff; font-weight: 600; transition: all .2s;
}
.btn-primary-luxe:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 6px 18px -6px var(--c-primary); }

/* ---------- شريط التمرير للإحصاءات ---------- */
.ticker-wrap { overflow: hidden; }
.ticker { display: inline-flex; gap: 48px; animation: ticker 30s linear infinite; white-space: nowrap; }
@keyframes ticker { from { transform: translateX(0) } to { transform: translateX(50%) } }

/* ---------- تدرج ترحيبي فاخر ---------- */
.hero-luxe {
  background:
    radial-gradient(900px 300px at 85% -20%, color-mix(in srgb, var(--c-gold) 18%, transparent), transparent 65%),
    radial-gradient(600px 300px at 10% 120%, color-mix(in srgb, var(--c-primary) 55%, transparent), transparent 70%),
    linear-gradient(120deg, var(--c-dark) 30%, color-mix(in srgb, var(--c-dark) 72%, var(--c-primary)) 100%);
}

@media (max-width: 1023px) {
  #sidebar { position: fixed; inset-block: 0; right: -300px; z-index: 80; transition: right .32s cubic-bezier(.22,.8,.32,1); box-shadow: -20px 0 60px -20px rgba(0,0,0,.5); }
  #sidebar.open { right: 0; }
  #sidebar-backdrop { position: fixed; inset: 0; z-index: 79; background: rgba(10,16,10,.55); backdrop-filter: blur(3px); animation: fadeIn .25s ease; }
}

.no-select { user-select: none; -webkit-user-select: none; }
.watermark { position: relative; }
.watermark::after {
  content: 'وزارة الدفاع — سري'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: color-mix(in srgb, var(--c-primary) 6%, transparent); transform: rotate(-20deg); pointer-events: none; font-weight: 700;
}

/* لوحة الألوان في لوحة التحكم */
.swatch { width: 100%; height: 44px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; transition: all .15s; }
.swatch:hover { transform: scale(1.05); }
.swatch.selected { border-color: var(--c-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 30%, transparent); }

.preset-card { border: 2px solid transparent; cursor: pointer; transition: all .2s; }
.preset-card:hover { transform: translateY(-2px); }
.preset-card.selected { border-color: var(--c-gold); box-shadow: var(--shadow-gold); }

/* حقول الإدخال الفاخرة */
.input-luxe {
  width: 100%; border: 1.5px solid #e5e2d8; border-radius: 12px;
  padding: 10px 14px; background: #fff; transition: all .15s; outline: none;
}
.input-luxe:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 18%, transparent);
}
select.input-luxe { appearance: auto; }

/* ============================================================
   v3 — الهوية الرسمية + محرك الموشن + المساعد الذكي
   ============================================================ */

/* الشعار الرسمي على الخلفية الداكنة: قرص أبيض ناعم بهالة ذهبية */
.logo-official {
  background: radial-gradient(circle at 30% 25%, #ffffff, #f2f4ef);
  border-radius: 50%;
  padding: 7px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-gold) 65%, transparent),
              0 0 22px -4px color-mix(in srgb, var(--c-gold) 55%, transparent),
              0 8px 20px -8px rgba(0,0,0,.5);
}

/* طفو ناعم للشعار */
@keyframes floatSoft { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
.float-soft { animation: floatSoft 8s ease-in-out infinite; }

/* دخول الصفحات */
@keyframes pageEnter { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.page-enter { animation: pageEnter .45s cubic-bezier(.22,.8,.32,1) both; }

/* الكشف عند التمرير */
.will-reveal { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .6s cubic-bezier(.22,.8,.32,1), transform .6s cubic-bezier(.22,.8,.32,1); }
.will-reveal.revealed { opacity: 1; transform: none; }

/* لمعان ذهبي يمر على البطاقات المميزة */
@keyframes shimmerPass { 0% { transform: translateX(120%) skewX(-18deg) } 100% { transform: translateX(-220%) skewX(-18deg) } }
.shimmer-host { position: relative; overflow: hidden; }
.shimmer-host::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 45%;
  background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--c-gold) 7%, transparent), transparent);
  animation: shimmerPass 11s ease-in-out infinite; pointer-events: none;
}

/* رفع تفاعلي أعمق للبطاقات */
.card-luxe { transition: transform .3s cubic-bezier(.22,.8,.32,1), box-shadow .3s; }
.card-luxe:hover { transform: translateY(-3px); box-shadow: 0 18px 50px -18px rgba(14,36,23,.28), 0 0 0 1px color-mix(in srgb, var(--c-gold) 25%, transparent); }

/* المساعد الذكي العائم */
#ai-fab { position: fixed; bottom: 22px; left: 22px; z-index: 80; }
.ai-fab-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-dark), var(--c-primary));
  color: var(--c-gold); font-size: 20px; position: relative;
  box-shadow: 0 8px 28px -6px color-mix(in srgb, var(--c-primary) 70%, #000), 0 0 0 2px color-mix(in srgb, var(--c-gold) 40%, transparent);
  transition: transform .25s, box-shadow .25s;
}
.ai-fab-btn:hover { transform: scale(1.09) rotate(-6deg); }
.ai-fab-pulse {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--c-gold) 55%, transparent);
  animation: aiPulse 2.4s ease-out infinite; pointer-events: none;
}
@keyframes aiPulse { 0% { transform: scale(.9); opacity: .9 } 100% { transform: scale(1.45); opacity: 0 } }

.ai-panel {
  position: absolute; bottom: 68px; left: 0; width: 340px; max-width: calc(100vw - 44px);
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 70px -18px rgba(14,36,23,.45), 0 0 0 1px color-mix(in srgb, var(--c-gold) 30%, transparent);
  animation: pageEnter .3s cubic-bezier(.22,.8,.32,1) both;
}
.ai-messages { height: 280px; overflow-y: auto; padding: 14px; background: color-mix(in srgb, var(--c-sand) 55%, #fff); display: flex; flex-direction: column; gap: 8px; }
.ai-msg-ai {
  background: #fff; border: 1px solid #eee8d8; border-radius: 14px 14px 14px 4px;
  padding: 9px 12px; font-size: 12px; line-height: 1.7; max-width: 92%; align-self: flex-start;
  box-shadow: 0 2px 8px -4px rgba(0,0,0,.08);
}
.ai-msg-user {
  background: linear-gradient(135deg, var(--c-primary), var(--c-dark)); color: #fff;
  border-radius: 14px 14px 4px 14px; padding: 9px 12px; font-size: 12px; max-width: 85%; align-self: flex-end;
}
.ai-chip {
  font-size: 10.5px; padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 8%, #fff); color: var(--c-primary);
  border: 1px solid color-mix(in srgb, var(--c-primary) 22%, transparent);
  transition: all .15s; font-weight: 600;
}
.ai-chip:hover { background: var(--c-primary); color: #fff; transform: translateY(-1px); }

/* شريط تقدم علوي رفيع عند تحميل الصفحات */
@keyframes topProgress { 0% { width: 0 } 60% { width: 70% } 100% { width: 100%; opacity: 0 } }

/* تحسين شارة الإشعارات */
@keyframes bellRing { 0%,100% { transform: rotate(0) } 10% { transform: rotate(14deg) } 20% { transform: rotate(-12deg) } 30% { transform: rotate(8deg) } 40% { transform: rotate(-6deg) } 50% { transform: rotate(0) } }
.bell-ring i { animation: bellRing 2.8s ease-in-out infinite; transform-origin: top center; }

/* خلفية hero متحركة بتدرج بطيء */
@keyframes heroDrift { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
.hero-animated {
  background: linear-gradient(120deg, var(--c-dark), color-mix(in srgb, var(--c-dark) 62%, var(--c-primary)), var(--c-dark));
  background-size: 200% 200%;
  animation: heroDrift 32s ease-in-out infinite;
}

/* ============ v7: أسلوب الهوية الرسمية — صورة عسكرية + طبقة خضراء داكنة + شريط أخضر فاتح (مطابق لدليل الهوية) ============ */
.hero-official {
  background-color: var(--c-dark);
  background-image:
    radial-gradient(120% 160% at 88% -20%, rgba(var(--c-navy-rgb) / .22), transparent 55%),
    linear-gradient(100deg, rgba(var(--c-dark-rgb) / .97) 0%, rgba(var(--c-dark-rgb) / .9) 42%, rgba(var(--c-primary-rgb) / .68) 100%),
    var(--hero-bg);
  background-size: cover, cover, cover;
  background-position: center, center, center 30%;
  animation: none;
  box-shadow: 0 24px 60px -24px rgba(var(--c-dark-rgb) / .55), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-official::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(0deg, rgba(var(--c-dark-rgb) / .35), transparent 32%);
}

/* v8: إطار شعار البنر — حلقة مزدوجة ذهبية راقية بدل الإطار الثقيل */
.hero-logo-ring {
  position: relative; border-radius: 50%; padding: 8px;
  background:
    linear-gradient(#ffffff, #f4f6f3) padding-box,
    conic-gradient(from 210deg, rgba(var(--c-gold-rgb) / .95), rgba(var(--c-navy-rgb) / .5), rgba(var(--c-gold-rgb) / .35), rgba(var(--c-gold-rgb) / .95)) border-box;
  border: 2px solid transparent;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.05),
    0 0 34px -6px rgba(var(--c-gold-rgb) / .45),
    0 14px 30px -12px rgba(0,0,0,.55);
}
.hero-logo-ring::after {
  content: ''; position: absolute; inset: -13px; border-radius: 50%; pointer-events: none;
  border: 1px dashed rgba(var(--c-gold-rgb) / .35);
}

/* v8: باج البنر — كبسولة زجاجية بحد ذهبي دقيق */
.hero-role-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.07); backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--c-gold-rgb) / .4);
  color: var(--c-gold-light); font-size: 11px; font-weight: 700;
  padding: 5px 13px; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 12px -5px rgba(0,0,0,.4);
}
.hero-role-chip .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--c-navy-rgb) / 1); box-shadow: 0 0 8px rgb(var(--c-navy-rgb) / .9); }

/* v8: شريحة مزايا سريعة أسفل البنر */
.hero-feature { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.75); font-size: 11px; }
.hero-feature i { color: var(--c-gold); font-size: 10px; }
.hero-feature + .hero-feature { border-inline-start: 1px solid rgba(255,255,255,.14); padding-inline-start: 14px; }

/* v8: بطاقة الهاكاثون المميز داخل البنر — زجاج أرقى بحد ذهبي */
.hero-featured-card {
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--c-gold-rgb) / .32);
  border-radius: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 32px -14px rgba(0,0,0,.5);
  position: relative; overflow: hidden;
}
.hero-featured-card::before {
  content: ''; position: absolute; top: 0; right: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--c-gold-rgb) / .85), transparent);
}
.hero-official::before {
  content: '';
  position: absolute; top: 0; bottom: 0; right: 0; width: 5px; z-index: 5;
  background: linear-gradient(180deg, var(--c-navy, #00A05A), color-mix(in srgb, var(--c-navy, #00A05A) 55%, var(--c-gold)));
  background: linear-gradient(180deg, rgb(var(--c-navy-rgb) / 1), rgb(var(--c-gold-rgb) / .85));
  box-shadow: -4px 0 18px -4px rgba(var(--c-navy-rgb) / .55);
}
.mod-photo-card {
  position: relative; overflow: hidden; border-radius: 1rem;
  background-color: var(--c-dark);
  background-size: cover; background-position: center;
  box-shadow: 0 14px 40px -14px rgba(var(--c-dark-rgb) / .55);
}
.mod-photo-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(var(--c-dark-rgb) / .55), rgba(var(--c-dark-rgb) / .92));
}
.mod-photo-card::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 4px;
  background: rgb(var(--c-navy-rgb) / .95);
}

/* v8: غلاف مصور لبطاقة الهاكاثون */
.hack-cover {
  position: relative; height: 118px; overflow: hidden;
  background-size: cover; background-position: center;
}
.hack-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, #ffffff 2%, rgba(255,255,255,.06) 55%, rgba(var(--c-dark-rgb) / .18));
}
.hack-cover .hack-cover-status { position: absolute; top: 10px; right: 10px; z-index: 2; }
.hack-cover .hack-cover-class { position: absolute; top: 10px; left: 10px; z-index: 2; }

/* v8: غلاف صفحة تفاصيل الهاكاثون */
.hack-hero {
  position: relative; overflow: hidden; border-radius: 1rem; color: #fff;
  background-color: var(--c-dark);
  background-size: cover; background-position: center;
  box-shadow: 0 20px 50px -20px rgba(var(--c-dark-rgb) / .6);
}
.hack-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(var(--c-dark-rgb) / .95) 8%, rgba(var(--c-dark-rgb) / .72) 55%, rgba(var(--c-dark-rgb) / .38));
}
.hack-hero::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 5px;
  background: linear-gradient(180deg, rgb(var(--c-navy-rgb) / 1), rgb(var(--c-gold-rgb) / .8));
}

/* v8: شبكة أفاتارات متراكبة */
.avatar-stack { display: inline-flex; }
.avatar-stack > * { margin-inline-start: -8px; }
.avatar-stack > *:first-child { margin-inline-start: 0; }

/* v8: بطاقة رحلة المشارك */
.journey-step { position: relative; text-align: center; padding: 18px 10px 14px; }
.journey-step .j-ic {
  width: 46px; height: 46px; border-radius: 14px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-dark)); color: var(--c-gold);
  box-shadow: inset 0 0 0 1px rgba(var(--c-gold-rgb) / .35), 0 8px 18px -8px rgba(var(--c-dark-rgb) / .5);
}
.journey-step .j-num {
  position: absolute; top: 8px; right: 12px; font-size: 22px; font-weight: 900;
  color: rgba(var(--c-gold-rgb) / .18);
}
.journey-arrow { color: rgba(var(--c-gold-rgb) / .55); font-size: 13px; align-self: center; }

/* بطاقات بيانات الدخول التجريبية */
.cred-card {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid rgba(var(--c-gold-rgb) / .25);
  border-radius: 14px; padding: 10px 12px; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cred-card:hover {
  border-color: rgba(var(--c-gold-rgb) / .6);
  box-shadow: 0 8px 22px -10px rgba(var(--c-gold-rgb) / .5);
  transform: translateY(-1px);
}
.cred-role-ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-dark));
  color: var(--c-gold); font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(var(--c-gold-rgb) / .3);
}

/* نجوم/جسيمات دقيقة فوق الـ hero */
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particles span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--c-gold) 80%, #fff);
  opacity: .22; animation: particleFloat linear infinite;
}
@keyframes particleFloat { from { transform: translateY(105%) scale(.6); opacity: 0 } 12% { opacity: .5 } 88% { opacity: .35 } to { transform: translateY(-15%) scale(1.1); opacity: 0 } }

/* شاشة البداية بالشعار الرسمي */
@keyframes splashLogo { 0% { transform: scale(.85); opacity: 0 } 55% { transform: scale(1.04) } 100% { transform: scale(1); opacity: 1 } }
.splash-logo { animation: splashLogo .9s cubic-bezier(.22,.8,.32,1) both; }

/* ============================================================
   v4 — إصدار الإبهار الأقصى: Glassmorphism + Aurora + 3D Tilt
   ============================================================ */

/* --- خلفية أورورا حية للمنصة كلها --- */
.aurora-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora-bg::before, .aurora-bg::after {
  content: ''; position: absolute; width: 55vw; height: 55vw; border-radius: 50%;
  filter: blur(110px); opacity: .05;
}
.aurora-bg::before {
  background: radial-gradient(circle, var(--c-primary), transparent 60%);
  top: -24vw; left: -20vw; animation: auroraA 48s ease-in-out infinite alternate;
}
.aurora-bg::after {
  background: radial-gradient(circle, var(--c-gold), transparent 60%);
  bottom: -27vw; right: -17vw; animation: auroraB 56s ease-in-out infinite alternate;
}
@keyframes auroraA { from { transform: translate(0,0) } to { transform: translate(5vw,4vh) } }
@keyframes auroraB { from { transform: translate(0,0) } to { transform: translate(-4vw,-3vh) } }

/* --- زجاجية (Glassmorphism) --- */
.glass {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 8px 32px -12px rgba(14,36,23,.14), inset 0 1px 0 rgba(255,255,255,.8);
}
.glass-dark {
  background: rgba(var(--c-dark-rgb) / .85); /* fallback ثابت لكل المتصفحات */
  background: color-mix(in srgb, var(--c-dark) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(var(--c-gold-rgb) / .28);
  color: #fff;
}

/* --- 3D Tilt للبطاقات --- */
.tilt-card { transform-style: preserve-3d; will-change: transform; transition: transform .18s ease-out, box-shadow .3s; }
.tilt-card.tilting { transition: none; }
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.16), transparent 45%);
  transition: opacity .25s; mix-blend-mode: overlay;
}
.tilt-card:hover .tilt-glare { opacity: 1; }

/* --- نص بتدرج ذهبي (ثابت واضح التباين، لمعة بطيئة جدًا) --- */
.text-gold-shine {
  background: linear-gradient(100deg, var(--c-gold-light) 15%, #fdf3d0 40%, var(--c-gold-light) 65%, var(--c-gold) 90%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: goldShine 14s linear infinite;
}
@keyframes goldShine { to { background-position: -220% center } }

/* --- إطار ذهبي متحرك (conic) للعناصر الملكية --- */
.royal-frame { position: relative; border-radius: 22px; padding: 1.5px; overflow: hidden; }
.royal-frame::before {
  content: ''; position: absolute; inset: -60%;
  background: conic-gradient(from var(--rf,0deg), transparent 0 30%, color-mix(in srgb, var(--c-gold) 75%, transparent) 36%, #f4e6bd 40%, color-mix(in srgb, var(--c-gold) 75%, transparent) 44%, transparent 50% 100%);
  animation: royalSpin 14s linear infinite;
}
@property --rf { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes royalSpin { to { --rf: 360deg } }
.royal-frame > .royal-inner { position: relative; border-radius: 20.5px; }

/* --- زخرفة النجمة الثمانية الإسلامية --- */
.pattern-octa {
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c3a54b' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M28 4l6 12 12 6-12 6-6 12-6-12-12-6 12-6z'/%3E%3Ccircle cx='28' cy='28' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- شريط الإحصاءات الحي (Ticker) --- */
.ticker-luxe {
  background: linear-gradient(90deg, var(--c-dark), color-mix(in srgb, var(--c-dark) 82%, var(--c-primary)), var(--c-dark));
  border-block: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
  overflow: hidden; position: relative;
}
.ticker-luxe::before, .ticker-luxe::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.ticker-luxe::before { right: 0; background: linear-gradient(270deg, var(--c-dark), transparent); }
.ticker-luxe::after { left: 0; background: linear-gradient(90deg, var(--c-dark), transparent); }
/* v8: مسار مزدوج المحتوى يبدأ مملوءًا فورًا (بلا فراغ طويل) */
.ticker-track { display: inline-flex; gap: 56px; white-space: nowrap; animation: tickerMove 60s linear infinite; will-change: transform; padding-inline-end: 56px; }
.ticker-luxe:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerMove { from { transform: translateX(0) } to { transform: translateX(50%) } }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: 12px; }
.ticker-item b { color: var(--c-gold-light); font-size: 14px; }
.ticker-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold); box-shadow: 0 0 8px var(--c-gold); }

/* --- نبض المنصة (Activity Pulse) --- */
.pulse-line { position: relative; padding-right: 22px; }
.pulse-line::before {
  content: ''; position: absolute; right: 6px; top: 8px; bottom: -8px; width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-gold) 45%, transparent), transparent);
}
.pulse-line:last-child::before { display: none; }
.pulse-dot {
  position: absolute; right: 0; top: 5px; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c-gold-light), var(--c-gold));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 20%, transparent);
}
.pulse-dot.live { animation: pulseDot 2s ease-out infinite; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-gold) 50%, transparent) } 100% { box-shadow: 0 0 0 9px transparent } }

/* --- الجدول الزمني الأفقي الفاخر --- */
.timeline-h { display: flex; overflow-x: auto; gap: 0; padding-bottom: 8px; }
.timeline-h::-webkit-scrollbar { height: 5px; }
.tl-node { min-width: 170px; position: relative; padding-top: 34px; }
.tl-node::before {
  content: ''; position: absolute; top: 13px; right: 0; left: 0; height: 2.5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-gold) 55%, transparent), color-mix(in srgb, var(--c-gold) 25%, transparent));
}
.tl-node:first-child::before { right: 50%; }
.tl-node:last-child::before { left: 50%; }
.tl-pin {
  position: absolute; top: 4px; right: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 8px; z-index: 1;
  background: #fff; border: 2.5px solid var(--c-gold); color: var(--c-primary);
}
.tl-pin.done { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.tl-pin.now { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-dark); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-gold) 22%, transparent); animation: pulseDot 2s ease-out infinite; }

/* --- Command Palette (البحث الشامل) --- */
.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 95; background: rgba(10,20,14,.55);
  backdrop-filter: blur(6px); animation: fadeIn .18s ease; display: flex; justify-content: center; padding-top: 12vh;
}
.cmdk {
  width: 620px; max-width: calc(100vw - 32px); height: fit-content; max-height: 65vh;
  background: rgba(255,255,255,.96); backdrop-filter: blur(18px);
  border-radius: 20px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--c-gold) 40%, transparent);
  animation: cmdkIn .25s cubic-bezier(.22,.8,.32,1) both;
}
@keyframes cmdkIn { from { opacity: 0; transform: translateY(-14px) scale(.98) } to { opacity: 1; transform: none } }
.cmdk-input { width: 100%; border: 0; outline: none; padding: 17px 18px; font-size: 15px; background: transparent; }
.cmdk-results { overflow-y: auto; padding: 6px; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 12px;
  cursor: pointer; transition: background .12s;
}
.cmdk-item:hover, .cmdk-item.active { background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.cmdk-kbd {
  font-size: 10px; background: #f1efe6; border: 1px solid #ddd8c8; border-bottom-width: 2px;
  border-radius: 6px; padding: 2px 7px; color: #777; font-family: monospace;
}

/* --- مركز الإشعارات المنسدل --- */
.notif-pop {
  position: absolute; top: 48px; left: 0; width: 360px; max-width: calc(100vw - 30px); z-index: 70;
  background: rgba(255,255,255,.97); backdrop-filter: blur(16px);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 28px 70px -16px rgba(14,36,23,.4), 0 0 0 1px color-mix(in srgb, var(--c-gold) 30%, transparent);
  animation: cmdkIn .22s cubic-bezier(.22,.8,.32,1) both;
}
.notif-item { transition: background .15s; }
.notif-item:hover { background: color-mix(in srgb, var(--c-sand) 60%, #fff); }
.notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); box-shadow: 0 0 7px var(--c-gold); }

/* --- بطاقات KPI فاخرة v4 (زجاج + توهج) --- */
.kpi-v4 {
  position: relative; border-radius: 20px; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 4px 24px -10px rgba(14,36,23,.13);
  transition: transform .3s cubic-bezier(.22,.8,.32,1), box-shadow .3s;
}
.kpi-v4::before {
  content: ''; position: absolute; top: -34px; left: -34px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, var(--kpi-glow, color-mix(in srgb, var(--c-gold) 22%, transparent)), transparent 70%);
  transition: transform .4s;
}
.kpi-v4:hover { transform: translateY(-5px); box-shadow: 0 22px 50px -18px rgba(14,36,23,.3), 0 0 0 1px color-mix(in srgb, var(--c-gold) 35%, transparent); }
.kpi-v4:hover::before { transform: scale(1.6); }

/* --- عنوان قسم ملكي بزخرفة جانبية --- */
.royal-title { display: flex; align-items: center; gap: 14px; }
.royal-title .rt-orn { display: inline-flex; align-items: center; gap: 4px; }
.royal-title .rt-orn i { color: var(--c-gold); font-size: 8px; opacity: .8; }
.royal-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--c-gold) 50%, transparent), transparent); }

/* --- شريط تقدم ذهبي متلألئ --- */
.progress-luxe { height: 9px; border-radius: 999px; background: #edeadd; overflow: hidden; position: relative; }
.progress-luxe > span {
  display: block; height: 100%; border-radius: 999px; position: relative;
  background: linear-gradient(90deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 45%, var(--c-gold)), var(--c-gold));
  transition: width .9s cubic-bezier(.22,.8,.32,1);
}
.progress-luxe > span::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  background-size: 180% 100%; animation: progShine 5s linear infinite;
}
@keyframes progShine { from { background-position: 180% 0 } to { background-position: -80% 0 } }

/* --- عداد دائري SVG --- */
.ring-stat { transform: rotate(-90deg); }
.ring-stat .ring-fill { transition: stroke-dashoffset 1.3s cubic-bezier(.22,.8,.32,1); stroke-linecap: round; }

/* --- شارة "مباشر" --- */
.live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; color: #e35d5d; }
.live-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #e35d5d; animation: pulseDot 1.6s ease-out infinite; }

/* --- أزرار الطيران السريع (hero) --- */
.hero-cta { position: relative; overflow: hidden; }
.hero-cta::after {
  content: ''; position: absolute; top: 0; height: 100%; width: 38px; left: -60px;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .5s ease;
}
.hero-cta:hover::after { left: 130%; }

/* --- وضع الحد من الحركة --- */
.fx-off .particles, .fx-off .aurora-bg { display: none !important; }
.fx-off .shimmer-host::after, .fx-off .hero-animated, .fx-off .float-soft, .fx-off .ticker-track { animation: none !important; }
.fx-off .tilt-card { transform: none !important; }

/* --- سويتش فاخر للوحة التحكم --- */
.switch-luxe { position: relative; width: 46px; height: 26px; cursor: pointer; flex-shrink: 0; }
.switch-luxe input { opacity: 0; width: 0; height: 0; }
.switch-luxe .sl-track {
  position: absolute; inset: 0; border-radius: 999px; background: #d9d5c6; transition: background .25s;
}
.switch-luxe .sl-track::before {
  content: ''; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.22,.8,.32,1);
}
.switch-luxe input:checked + .sl-track { background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 60%, var(--c-gold))); }
.switch-luxe input:checked + .sl-track::before { transform: translateX(-20px); }

/* --- بطاقة إنجاز/تكريم --- */
.honor-card {
  background: linear-gradient(155deg, var(--c-dark) 20%, color-mix(in srgb, var(--c-dark) 75%, var(--c-primary)));
  border: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
  border-radius: 20px; color: #fff; position: relative; overflow: hidden;
}
.honor-card::before {
  content: ''; position: absolute; top: -45%; right: -18%; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-gold) 22%, transparent), transparent 70%);
}

/* طباعة التقرير */
@media print {
  #sidebar, #topbar, #ai-fab, .gov-bar, footer, .no-print { display: none !important; }
  main { padding: 0 !important; max-width: 100% !important; }
  .card-luxe, .glass { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ============================================================
   v5 — إصدار الصقل والاتزان: بروفايل + قائمة مستخدم + هدوء الحركة
   ============================================================ */

/* احترام تفضيل تقليل الحركة على مستوى النظام */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
  .aurora-bg, .particles { display: none !important; }
}

/* --- ترويسة البروفايل الفاخرة --- */
.profile-hero {
  background: linear-gradient(135deg, var(--c-dark) 30%, color-mix(in srgb, var(--c-dark) 68%, var(--c-primary)));
  border: 1px solid color-mix(in srgb, var(--c-gold) 25%, transparent);
  border-radius: 22px; position: relative; overflow: hidden; color: #fff;
}
.profile-hero::before {
  content: ''; position: absolute; top: -60px; left: -60px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-gold) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.profile-avatar-ring {
  padding: 4px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-gold), #f4e6bd 45%, var(--c-gold));
  box-shadow: 0 6px 24px -8px rgba(0,0,0,.4);
  display: inline-flex;
}
.profile-avatar {
  width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: #fff; border: 3px solid var(--c-dark);
}
.profile-stat { text-align: center; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); min-width: 86px; }
.profile-stat b { display: block; font-size: 20px; color: var(--c-gold-light); }
.profile-stat span { font-size: 10px; color: rgba(255,255,255,.65); }
.clearance-stars i { color: var(--c-gold); font-size: 11px; }
.clearance-stars i.off { color: rgba(255,255,255,.18); }

/* --- شارة إنجاز في البروفايل --- */
.achv {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line, #e8e4d8);
}
.achv-ic {
  width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}

/* --- قائمة المستخدم المنسدلة --- */
.user-menu-pop {
  position: absolute; top: calc(100% + 10px); left: 0; width: 300px; z-index: 70;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px -18px rgba(14,36,23,.35), 0 0 0 1px color-mix(in srgb, var(--c-gold) 22%, transparent);
  animation: cmdkIn .2s cubic-bezier(.22,.8,.32,1) both;
}
.user-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 12.5px; font-weight: 600;
  color: var(--c-dark); cursor: pointer; transition: background .15s;
}
.user-menu-item:hover { background: color-mix(in srgb, var(--c-gold) 9%, #fff); }
.user-menu-item i { width: 18px; text-align: center; color: var(--c-primary); }

/* --- زر لوحة التحكم في الترويسة --- */
.control-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px;
  font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, var(--c-dark), color-mix(in srgb, var(--c-dark) 60%, var(--c-primary)));
  border: 1px solid color-mix(in srgb, var(--c-gold) 45%, transparent);
  box-shadow: 0 4px 14px -6px rgba(14,36,23,.4);
  transition: box-shadow .25s, transform .25s;
}
.control-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--c-gold) 55%, transparent); }
.control-btn i { color: var(--c-gold-light); }

/* --- توحيد التباين: نصوص فوق الخلفيات الداكنة دائمًا فاتحة --- */
.hero-animated, .glass-dark, .honor-card, .profile-hero { color: #fff; }
.hero-animated .text-gray-300 { color: rgba(255,255,255,.78) !important; }

/* تخفيف زخرفة الأوكتا فوق الخلفيات الداكنة كي لا تتداخل مع النص */
.hero-animated.pattern-octa { background-blend-mode: normal; }
.hero-animated.pattern-octa::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--c-dark) 45%, transparent));
}
.hero-animated > * { position: relative; z-index: 2; }

/* رأس موحد لصفحات لوحة التحكم */
.control-head {
  background: linear-gradient(135deg, var(--c-dark), color-mix(in srgb, var(--c-dark) 70%, var(--c-primary)));
  border: 1px solid color-mix(in srgb, var(--c-gold) 25%, transparent);
  border-radius: 20px; color: #fff;
}

/* ============================================================
   v6 — الصقل البصري العميق: هوية موحدة + جوال مثالي
   ============================================================ */

/* --- KPI ملكي موحد بالهوية (بديل الألوان المتنافرة) --- */
.kpi-royal {
  position: relative; border-radius: 18px; overflow: hidden;
  background: #fff;
  border: 1px solid rgba(var(--c-gold-rgb) / .22);
  box-shadow: 0 4px 20px -10px rgba(var(--c-dark-rgb) / .15);
  transition: transform .3s cubic-bezier(.22,.8,.32,1), box-shadow .3s, border-color .3s;
}
.kpi-royal::before {
  content: ''; position: absolute; top: -30px; left: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c-gold-rgb) / .12), transparent 70%);
  transition: transform .4s;
}
.kpi-royal:hover { transform: translateY(-4px); border-color: rgba(var(--c-gold-rgb) / .5); box-shadow: 0 18px 44px -16px rgba(var(--c-dark-rgb) / .25); }
.kpi-royal:hover::before { transform: scale(1.5); }
.kpi-royal-ic {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  color: var(--c-gold); background: linear-gradient(145deg, rgba(var(--c-dark-rgb) / .95), rgba(var(--c-primary-rgb) / .9));
  box-shadow: 0 4px 12px -4px rgba(var(--c-dark-rgb) / .4), inset 0 1px 0 rgba(255,255,255,.12);
}
.kpi-royal-bar {
  position: absolute; bottom: 0; right: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb) / .15));
}

/* --- الجوال: تروس أنعم وأحجام مضبوطة --- */
@media (max-width: 767px) {
  main#page { padding: 14px !important; }
  #topbar { padding-inline: 14px !important; }
  .royal-frame { border-radius: 50%; }
  .royal-frame > .royal-inner { border-radius: 50%; }
  .hero-cta { white-space: nowrap; }
  .ticker-item { font-size: 11px; }
  .profile-hero { padding: 20px !important; }
  .cmdk-backdrop { padding-top: 6vh; padding-inline: 10px; }
  .notif-pop, .user-menu-pop {
    position: fixed !important; top: 64px !important; left: 12px !important; right: 12px !important;
    width: auto !important; max-width: none;
  }
  /* الأورورا أخف على الجوال لتوفير البطارية */
  .aurora-bg::before, .aurora-bg::after { opacity: .035; }
}

/* منع أي كسر أفقي من عناصر مطلقة */
#page, #app { overflow-x: clip; }

/* --- زر الشعار في hero: توهج هادئ موحد --- */
.logo-official {
  background: radial-gradient(circle at 50% 38%, #ffffff, #f3efe2 78%);
  box-shadow: 0 10px 34px -10px rgba(var(--c-dark-rgb) / .5), 0 0 0 1px rgba(var(--c-gold-rgb) / .3);
}

/* --- عناوين الأقسام: خط ذهبي متقن تحت العنوان --- */
.royal-title { position: relative; padding-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.royal-title::after {
  content: ''; position: absolute; bottom: 0; right: 0; width: 64px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--c-gold), transparent);
}
.royal-title .rt-orn { display: none; }

/* --- بطاقة الهاكاثون المميز داخل hero: تباين مضمون --- */
#hero-section .glass-dark { background: rgba(var(--c-dark-rgb) / .68); border-color: rgba(var(--c-gold-rgb) / .35); }

/* --- توحيد شارات الحالة فوق الأبيض --- */
.badge { letter-spacing: .1px; }

/* --- فوتر أنظف على الجوال --- */
@media (max-width: 640px) {
  footer .max-w-\[1440px\] { flex-direction: column; text-align: center; }
}