/* ===================================================================
   صفحة (من نحن) العامة — كل الأصناف بادئة au-
   مستخرَج حرفياً من: اعصار (2).html  (الأسطر 968-2030)
   ⚠️ ترتيب الملفات في index.html يطابق ترتيب الكتل الأصلي — لا تغيّره (cascade).
   =================================================================== */

/* ══════════════════════════════════════════════════════════════
   صفحة "من نحن" العامة (?about=1) — تجربة سردية لشاشات المكان
   كل الأصناف بادئة بـ au- عمداً حتى ما تتصادم مع أي صنف موجود
   ══════════════════════════════════════════════════════════════ */
#about-screen {
    font-family: 'Cairo', sans-serif; color: #eee;
    /* ✅ إصلاح 1+2: نجبر ارتفاع الشاشة كاملة يتساوى مع المساحة المرئية
       الحقيقية بالجوال (وليس الافتراضية اللي تحسب مساحة شريط المتصفح
       وكأنه مختفي دائماً) — هذا يمنع ظهور شريط تمرير غير مرغوب ويخلي
       زر "ابدأ الكابوس" يترسم بمنتصف الشاشة الحقيقي دائماً بدون سكرول. */
    height: 100vh; height: 100dvh; width: 100vw;
    display: none;
}

/* 🛡️ الحالة الابتدائية للموقع — تُقرَّر من الرابط بسكربت سطري (كتلة وضع الصرفيات
   بالرأس) يضيف html.kb-public قبل الرسم، بلا أي اعتماد على رسم الوحدات.

   ليش هذا موجود: #admin-interface عليه display:flex بـ main.css، يعني شاشة دخول
   الموظفين هي الظاهر الافتراضي بالـHTML الخام، وصفحة الزبون كانت مخفية بسمة
   سطرية ما يشيلها غير auShowDefault() — النداء ٢٦ من ٥٩ داخل bootAdmin() وبلا
   try/catch على أي نداء. فأي استثناء بأي init() قبله، أو أي فشل بتحميل وحدة،
   كان يفشل "مفتوحاً": الزبون يشوف شاشة دخول الموظفين. الآن يفشل آمناً — يبقى
   على صفحة الزبون بلا حركات بدل ما تنكشف واجهة داخلية.

   ⚠️ بدون !important عمداً: السمة السطرية تغلب ورقة الأنماط، فكل إسنادات
   element.style.display الموجودة تبقى تشتغل كما هي بلا أي تعديل — auShowDefault
   وauGoToStaffLogin (الضغطتان السريتان على اللوغو) وauBackToSite وplayerScreen
   وbriefing. أي !important هنا يكسر الانتقال لشاشة الدخول. */
html.kb-public #about-screen    { display: block; }
html.kb-public #admin-interface { display: none; }

/* ── البوابة (شاشة البداية) ── */
#au-gateway {
    position: absolute; inset: 0; background: #000; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(20px, 5vh, 40px);
    /* ✅ الإصلاح الحقيقي لمشكلة شريط التمرير: كانت overflow-y:auto، وقطرات
       الدم (والشعاع المضاف لاحقاً) تتحرك بـ transform لمسافة أبعد من حدود
       هذا العنصر نفسه (115vh) — أي عنصر متحرك يتجاوز حدود عنصر عنده
       overflow:auto يُحتسب ضمن "المساحة القابلة للتمرير" فيه، حتى لو
       ماله علاقة بالصورة نهائياً. هذا كان يخلق شريط تمرير داخلي (يبان
       ويختفي باستمرار مع كل قطرة) من قبل ما نلمس أي صورة أصلاً.
       overflow:hidden يقصّ أي تجاوز فوراً ونهائياً — والمحتوى الفعلي
       (الشعار + الزر) صغير بما يكفي إنه يترسم بمنتصف الشاشة بأي حال. */
    overflow: hidden;
    padding: 24px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
@media (max-height: 480px) {
    /* شبكة أمان لشاشات قصيرة جداً (جوال بوضع أفقي) حتى يبقى المحتوى مضمون الظهور */
    #au-gateway { gap: 10px; padding: 10px 20px; }
    .au-gate-logo { max-height: 18vh; }
}
.au-drip {
    position: absolute; top: -60px; width: 2px; height: 60px;
    background: linear-gradient(180deg, transparent, #8a0000 40%, #ff0000);
    animation: auDripFall 4.5s linear infinite;
    opacity: .8;
}
@keyframes auDripFall {
    0%   { transform: translateY(0); opacity: 0; }
    8%   { opacity: .9; }
    92%  { opacity: .5; }
    100% { transform: translateY(115vh); opacity: 0; }
}
.au-gate-logo {
    width: min(55vw, 280px); max-height: 26vh; object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(255,0,0,.55));
    animation: auLogoPulse 2.6s ease-in-out infinite; flex-shrink: 0;
    /* ✅ ضغطتين على اللوغو = دخول الموظفين (سري) — نمنع زوم "double-tap" الافتراضي
       بالجوال حتى ما يسرق الضغطة الثانية، ونمنع تحديد/سحب الصورة بالغلط */
    touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
@keyframes auLogoPulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255,0,0,.35)) drop-shadow(0 0 22px rgba(138,0,0,.3)); opacity: .88; }
    50%      { filter: drop-shadow(0 0 22px rgba(255,0,0,.75)) drop-shadow(0 0 40px rgba(255,0,0,.4)); opacity: 1; }
}
/* 🔑 "المفتاح السري" — ضغطتين متتاليتين على اللوغو تفتح دخول الموظفين. الأنيميشن
   هذا هو التغذية الراجعة الوحيدة (ما فيه أي نص أو زر يفضح الموضوع للزبون العادي):
   وميض أحمر + اهتزاز خفيف كأن "القناع تشقق" للحظة، وبعدها ينتقل لتسجيل الدخول. */
.au-gate-logo.au-staff-unlock { animation: auLogoPulse 2.6s ease-in-out infinite, auStaffUnlock .55s ease; }
@keyframes auStaffUnlock {
    0%   { filter: drop-shadow(0 0 18px rgba(255,0,0,.55)); transform: scale(1); }
    15%  { filter: drop-shadow(0 0 55px rgba(255,30,30,1)) brightness(1.8); transform: scale(1.06) translateX(-3px); }
    30%  { filter: drop-shadow(0 0 55px rgba(255,30,30,1)) brightness(1.8); transform: scale(1.06) translateX(3px); }
    45%  { filter: drop-shadow(0 0 40px rgba(255,0,0,.9)) brightness(1.4); transform: scale(1.02); }
    100% { filter: drop-shadow(0 0 18px rgba(255,0,0,.55)); transform: scale(1); }
}
#au-enter-btn {
    background: rgba(138,0,0,.15); border: 1px solid var(--neon-red, #ff0000);
    color: #fff; padding: 16px 30px; border-radius: 8px;
    font-family: 'Cairo', sans-serif; font-size: 1.05rem; font-weight: bold;
    letter-spacing: .03em; cursor: pointer;
    text-shadow: 0 0 10px rgba(255,0,0,.7);
    box-shadow: 0 0 20px rgba(255,0,0,.25);
    animation: auBtnShake 3.2s ease-in-out infinite;
    /* ✅ إصلاح 2: توسيط مضمون للأيقونة والنص كصف واحد بمنتصف الزر تماماً،
       بدل ما نعتمد على المحاذاة الافتراضية للمتصفح اللي تختلف حسب الجهاز */
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5em; text-align: center; white-space: nowrap; flex-shrink: 0;
}
@keyframes auBtnShake {
    0%, 88%, 100% { transform: translateX(0) rotate(0); }
    89% { transform: translateX(-3px) rotate(-1deg); }
    90% { transform: translateX(3px) rotate(1deg); }
    91% { transform: translateX(-3px) rotate(-1deg); }
    92% { transform: translateX(2px) rotate(0.5deg); }
    93% { transform: translateX(0) rotate(0); }
}
#au-gateway.au-fading { animation: auGateFade .9s ease forwards; }
@keyframes auGateFade { to { opacity: 0; visibility: hidden; } }

/* ── الحاوية الرئيسية ── */
#au-main {
    position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    /* ✅ سكرول بار مخصص بلون دم — نفس فكرة شريط الغاليري، معمّمة على الصفحة كاملة */
    scrollbar-width: thin; scrollbar-color: rgba(255,0,0,.45) rgba(0,0,0,.3);
}
#au-main::-webkit-scrollbar { width: 8px; }
#au-main::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }
#au-main::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255,40,40,.55), rgba(138,0,0,.65));
    border-radius: 5px; border: 1px solid rgba(0,0,0,.4);
}
#au-main::-webkit-scrollbar-thumb:hover { background: rgba(255,0,0,.75); }

/* 📺 مقدمة "تشويش تلفزيون" قبل ظهور اللوغو */
#au-tv-static {
    position: absolute; inset: 0; z-index: 20; background: #050505;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    pointer-events: none; opacity: 1; transition: opacity .3s ease;
}
#au-tv-static.au-tv-out { opacity: 0; }
#au-tv-static-canvas {
    width: 100%; height: 100%; image-rendering: pixelated; opacity: .8;
}
.au-tv-static-scan {
    position: absolute; left: 0; right: 0; height: 60px; top: -60px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.3), transparent);
    animation: auTvScan .45s linear 2;
}
@keyframes auTvScan { from { top: -60px; } to { top: 100%; } }
#about-screen .au-scanlines {
    position: fixed; inset: 0; pointer-events: none; z-index: 3;
    background: repeating-linear-gradient(0deg, rgba(255,0,0,.035) 0px, rgba(255,0,0,.035) 1px, transparent 1px, transparent 3px);
}
.au-section {
    /* ✅ إصلاح رقم 1: استخدام 100vh وحده على الجوال يخلي الأقسام أطول من
       المساحة المرئية الفعلية (شريط عنوان المتصفح يدخل بالحساب)، فيظهر
       شريط تمرير غير مرغوب ويختل شكل الشاشة لحظة تبدّل الصورة/الانتقال
       بين البوابة والمحتوى. 100dvh يحسب الارتفاع المرئي الفعلي؛ نبقي
       100vh كـ fallback للمتصفحات القديمة اللي ما تدعم dvh. */
    min-height: 100vh; min-height: 100dvh;
    box-sizing: border-box; padding: 60px 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}

/* ── قسم السرد (المحطة المخترقة) ── */
#au-sec-story {
    background: radial-gradient(ellipse at 50% 20%, rgba(40,0,0,.4) 0%, #000 70%);
}
.au-term-box {
    max-width: 640px; width: 100%; min-height: 220px;
    border: 1px solid rgba(255,0,0,.3); border-radius: 8px;
    background: rgba(10,0,0,.5); padding: 26px 22px; box-sizing: border-box;
    box-shadow: 0 0 30px rgba(255,0,0,.08), inset 0 0 40px rgba(0,0,0,.5);
    position: relative; overflow: hidden;
}
/* ✅ إعادة تصميم قسم السرد: زوايا HUD + خط مسح متحرك + رأس "فك تشفير" حي */
.au-term-corner { position: absolute; width: 20px; height: 20px; border-color: rgba(255,0,0,.55); z-index: 2; }
.au-term-tl { top: 9px; left: 9px; border-top: 2px solid; border-left: 2px solid; }
.au-term-tr { top: 9px; right: 9px; border-top: 2px solid; border-right: 2px solid; }
.au-term-bl { bottom: 9px; left: 9px; border-bottom: 2px solid; border-left: 2px solid; }
.au-term-br { bottom: 9px; right: 9px; border-bottom: 2px solid; border-right: 2px solid; }
.au-term-scan {
    position: absolute; left: 0; right: 0; height: 45%; top: -45%; pointer-events: none; z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(255,0,0,.1), transparent);
    animation: auTermScan 3.4s linear infinite;
}
@keyframes auTermScan { 0% { top: -45%; } 100% { top: 100%; } }
.au-term-head {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
    font-family: 'Share Tech Mono', monospace; font-size: .66rem; color: #a83333; letter-spacing: .04em;
    position: relative; z-index: 2; border-bottom: 1px dashed rgba(255,0,0,.25); padding-bottom: 9px;
}
#au-term-pct { color: #ff5b5b; }
.au-term-box.au-glitch { animation: auTermGlitch .28s steps(2,end); }
@keyframes auTermGlitch { 0%,100% { transform: translate(0); } 50% { transform: translate(-2px,1px); } }
.au-story-cursor { display: inline-block; width: .5em; background: #ff5b5b; margin-right: 1px;
    animation: auCursorBlink 1s steps(1) infinite; }
@keyframes auCursorBlink { 50% { opacity: 0; } }
.au-story-text {
    font-family: 'Share Tech Mono', monospace; font-size: clamp(.95rem, 2.6vw, 1.15rem);
    line-height: 2; color: #ff5b5b; text-shadow: 0 0 8px rgba(255,0,0,.5);
    white-space: pre-wrap; margin: 0; min-height: 1.4em;
}
.au-scroll-hint {
    position: absolute; bottom: 26px; color: #883; opacity: .6;
    font-size: .8rem; animation: auBounce 1.8s ease-in-out infinite;
}
@keyframes auBounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }
.au-stamp-secret {
    position: absolute; top: 14%; border: 3px solid #ff0000; color: #ff0000;
    padding: 10px 24px; font-weight: 900; font-size: 1.3rem; letter-spacing: .1em;
    transform: rotate(-8deg) scale(0); opacity: 0;
    text-shadow: 0 0 14px rgba(255,0,0,.8);
    transition: transform .35s var(--kb-ease-bounce), opacity .2s;
}
.au-stamp-secret.au-show { transform: rotate(-8deg) scale(1); opacity: 1; }

/* ── قسم الفريق (المشتبه بهم) ── */
.au-sec-title { font-size: clamp(1.3rem, 4vw, 1.9rem); color: #fff; text-shadow: 0 0 12px rgba(255,0,0,.5); margin-bottom: 34px; text-align: center; }
.au-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; max-width: 780px; width: 100%; }
.au-team-card {
    background: #0d0d0d; border: 1px solid rgba(200,0,0,.3); border-radius: 10px;
    overflow: hidden; cursor: pointer; position: relative; aspect-ratio: 3/4;
    transition: border-color .2s, box-shadow .2s;
    /* ✅ إصلاح 3: نفس الصورة المستخدمة ببطاقات "اختر كابوسك" — بس هنا نعرضها
       بمعالجة "ملف قضية" مختلفة تماماً بالشكل (تدرج رمادي/أحمر + تباين عالي
       + إطار/زاوية مقصوصة + تكبير وزاوية مختلفة) حتى ما تحس إنها نفس الصورة
       مكررة، رغم إنها فعلياً نفس ملف الصورة بالخلفية. */
    filter: grayscale(.88) contrast(1.35) brightness(.5) sepia(.3) hue-rotate(-8deg);
    background-size: 165% auto !important; background-position: 38% 12% !important;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
}
.au-team-card:hover, .au-team-card:active { border-color: var(--neon-red,#ff0000); box-shadow: 0 0 22px rgba(255,0,0,.3); }
.au-team-card:hover, .au-team-card:active { filter: grayscale(.6) contrast(1.3) brightness(.65) sepia(.22) hue-rotate(-8deg); }
/* حبيبات فيلم قديم + خطوط مسح فوق صورة الملف */
.au-team-card::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: multiply;
}
/* شريط لاصق بزاوية الملف — يعزّز إحساس "ملف قضية ورقي" */
.au-team-card::after {
    content: ''; position: absolute; top: 6px; left: -14px; width: 60px; height: 16px; z-index: 4;
    background: rgba(210,190,120,.55); transform: rotate(-45deg);
    box-shadow: 0 0 4px rgba(0,0,0,.4); pointer-events: none;
}
.au-team-card-stamp {
    position: absolute; top: 8px; left: 8px; z-index: 3; color: rgba(255,60,60,.55);
    border: 1.5px solid rgba(255,60,60,.55); border-radius: 3px; padding: 1px 6px;
    font-family: 'Share Tech Mono', monospace; font-size: .58rem; letter-spacing: .06em;
    transform: rotate(-6deg); text-transform: uppercase;
}

/* ══ إصلاح 5+6: نافذة "تكبير البطاقة" المشتركة — تنفتح بحركة نمو من نفس مكان
   الضغطة، تعطي إحساس إن البطاقة نفسها كبرت وصارت الملف الكامل ══ */
.au-detail-modal {
    position: fixed; inset: 0; z-index: 9982; display: none;
    align-items: center; justify-content: center; padding: 20px;
    box-sizing: border-box; background: rgba(0,0,0,0);
    transition: background-color .3s ease;
}
.au-detail-modal.au-open { display: flex; background: rgba(0,0,0,.88); backdrop-filter: blur(5px); }
.au-detail-box {
    width: min(460px, 92vw); max-height: 86dvh; max-height: 86vh; overflow-y: auto;
    background: #0a0000; border: 1px solid rgba(255,0,0,.4); border-radius: 16px;
    position: relative; box-shadow: 0 25px 80px rgba(0,0,0,.85), 0 0 45px rgba(255,0,0,.18);
    transform: scale(.55); opacity: 0;
    transition: transform .4s var(--kb-ease-pop), opacity .25s ease;
}
.au-detail-modal.au-open .au-detail-box { transform: scale(1); opacity: 1; }
.au-detail-img {
    width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center;
    filter: grayscale(.5) contrast(1.2) brightness(.62) sepia(.15);
    border-bottom: 1px solid rgba(255,0,0,.3);
}
.au-detail-close {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3); color: #fff;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1;
}
.au-detail-stamp {
    position: absolute; top: 14px; right: 14px; z-index: 3; color: rgba(255,70,70,.75);
    border: 1.5px solid rgba(255,70,70,.75); border-radius: 4px; padding: 2px 9px;
    font-family: 'Share Tech Mono', monospace; font-size: .64rem; letter-spacing: .05em;
    transform: rotate(-6deg); text-transform: uppercase;
}
.au-detail-title { padding: 18px 20px 2px; margin: 0; font-size: 1.3rem; color: #fff; text-shadow: 0 0 12px rgba(255,0,0,.6); }
.au-detail-tag { padding: 0 20px; color: #ff8080; font-size: .85rem; margin-bottom: 12px; }
.au-detail-body { padding: 0 20px 24px; color: #ccc; font-size: .9rem; line-height: 1.95; }
.au-detail-body ul { margin: 12px 0 0; padding-right: 20px; }
.au-detail-body li { margin-bottom: 9px; color: #ffb3b3; }
.au-team-silhouette {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 3.4rem; background: radial-gradient(circle at 50% 35%, #1a1a1a 0%, #000 80%);
    filter: blur(1.5px); transition: opacity .12s;
}
.au-team-card.au-revealed .au-team-silhouette { opacity: 0; pointer-events: none; }
.au-team-flash {
    position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
}
.au-team-card.au-flashing .au-team-flash { animation: auFlash .35s steps(2,end); }
@keyframes auFlash { 0%{opacity:.95;} 50%{opacity:.2;} 100%{opacity:0;} }
.au-team-name {
    position: absolute; bottom: 0; right: 0; left: 0; padding: 8px 10px;
    background: linear-gradient(0deg, rgba(0,0,0,.9), transparent);
    font-size: .82rem; font-weight: bold; text-align: center;
}
.au-team-role { color: #888; font-size: .68rem; }

/* ── قسم الخطر والحجز (CTA) ── */
#au-sec-cta { background: #0a0000; transition: background-color .4s; }
#au-sec-cta.au-danger { animation: auHeartbg 1.4s ease-in-out infinite; }
@keyframes auHeartbg { 0%,100%{ background-color:#0a0000; } 45%{ background-color:#2a0000; } }
#au-sec-cta.au-danger.au-danger-2 { animation-duration: .9s; }
#au-sec-cta.au-danger.au-danger-3 { animation-duration: .55s; }
.au-cta-timer {
    font-family: 'Share Tech Mono', monospace; font-size: 1rem; color: #ff8080;
    border: 1px solid rgba(255,0,0,.4); padding: 8px 18px; border-radius: 20px;
    margin-bottom: 22px; background: rgba(255,0,0,.06);
}
.au-cta-title { font-size: clamp(1.4rem, 5vw, 2.2rem); text-align: center; color: #fff; text-shadow: 0 0 18px rgba(255,0,0,.7); margin: 0 0 10px; }
.au-cta-sub { color: #999; margin-bottom: 34px; text-align: center; }
.au-cta-btn {
    background: linear-gradient(135deg, #8a0000, #ff0000); border: none; color: #fff;
    padding: 18px 40px; border-radius: 10px; font-family: 'Cairo'; font-weight: 900;
    font-size: 1.15rem; cursor: pointer; box-shadow: 0 0 30px rgba(255,0,0,.5);
}
.au-cta-btn.au-shake { animation: auCtaShake .4s ease; }
@keyframes auCtaShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-6px) rotate(-2deg); }
    40% { transform: translateX(6px) rotate(2deg); }
    60% { transform: translateX(-4px) rotate(-1deg); }
    80% { transform: translateX(4px) rotate(1deg); }
}

/* ✅ إصلاح 8: قسم "ليش كابوس؟" — بطاقات ثقة سريعة */
/* ✅ إصلاح: بطاقات "ليش كابوس؟" تفاعلية بالكامل — ميلان 3D عند اللمس/الماوس
   (نفس auSetupTilt المستخدم ببطاقات الغرف)، بريق يمر عبرها، أيقونة عائمة،
   وخط سفلي متوهج يظهر عند التفاعل */
/* ✅ إصلاح 1: البطاقات الان تنقلب (flip) عند الضغط بدل الميلان فقط —
   وجه أمامي (خطاف قصير) ووجه خلفي (تفصيل أطول ومخيف أكثر) */
.au-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 640px; width: 100%; -webkit-perspective: 900px; perspective: 900px; }
.au-why-item {
    position: relative; cursor: pointer; min-height: 190px;
    opacity: 0; transform: translateY(16px); animation: auWhyIn .5s ease forwards;
}
.au-why-item:nth-child(1) { animation-delay: .05s; }
.au-why-item:nth-child(2) { animation-delay: .15s; }
.au-why-item:nth-child(3) { animation-delay: .25s; }
.au-why-item:nth-child(4) { animation-delay: .35s; }
@keyframes auWhyIn { to { opacity: 1; transform: translateY(0); } }
.au-why-inner {
    position: relative; width: 100%; height: 100%; min-height: 190px;
    -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
    -webkit-transform: translateZ(0); transform: translateZ(0);
    transition: transform .65s var(--kb-ease-move), -webkit-transform .65s var(--kb-ease-move);
}
/* ✅ إصلاح: البطاقات كانت تنقلب صح بالمتصفحات العادية بس "يتخربط" وجهها ووجه ظهرها فوق بعض
   بمتصفحات الجوال المبنية على WebKit (سفاري آيفون تحديداً) — لأن -webkit-backface-visibility
   و -webkit-transform-style ناقصين. بدون البادئة، سفاري يتجاهل الخاصية ويخلي الوجهين
   ظاهرين بنفس الوقت وقت الانقلاب، فيصير النص متراكب/متخربط بصرياً.
   ✅ تقوية إضافية: أضفنا translateZ(0) حتى نجبر المتصفح يفتح طبقة تسريع رسومي (GPU) —
   بعض نسخ سفاري القديمة تحتاجها بالإضافة لـ preserve-3d حتى الانقلاب ثلاثي الأبعاد يشتغل صح. */
.au-why-item.au-flipped .au-why-inner { -webkit-transform: rotateY(180deg) translateZ(0); transform: rotateY(180deg) translateZ(0); }
/* اهتزاز خفيف مرعب يرافق لحظة الانقلاب بالضبط */
.au-why-item.au-flip-shake .au-why-inner { animation: auWhyShake .35s ease; }
@keyframes auWhyShake { 0%,100% { } 20% { transform: rotateY(45deg) translateX(-4px); } 40% { transform: rotateY(90deg) translateX(3px); } 60% { transform: rotateY(135deg) translateX(-2px); } 80% { transform: rotateY(170deg); } }
.au-why-front, .au-why-back {
    position: absolute; inset: 0; overflow: hidden;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px 14px; text-align: center; border-radius: 14px; box-sizing: border-box;
    transition: border-color .25s, box-shadow .25s;
}
.au-why-front { background: rgba(20,0,0,.5); border: 1px solid rgba(255,0,0,.25); }
.au-why-item:hover .au-why-front, .au-why-item.au-tilting .au-why-front { border-color: rgba(255,0,0,.6); box-shadow: 0 12px 32px rgba(255,0,0,.28); }
.au-why-back {
    background: radial-gradient(ellipse at 50% 30%, rgba(60,0,0,.85), rgba(10,0,0,.92));
    border: 1px solid rgba(255,0,0,.55); -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
    box-shadow: inset 0 0 30px rgba(0,0,0,.6);
}
/* ✅ ضمانة إضافية مستقلة عن backface-visibility تماماً — تُتحكم بالجافاسكربت
   (auWhyFlip) بمنتصف حركة الانقلاب بالضبط. حتى لو متصفح معيّن ما يطبّق
   backface-visibility صح (مشكلة معروفة ببعض نسخ/سياقات WebKit)، display:none
   مضمونة تشتغل بكل متصفح بدون أي استثناء — فما يصير تراكب نص إطلاقاً. */
.au-why-front.au-face-hidden, .au-why-back.au-face-hidden { display: none !important; }
.au-why-front::before {
    content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; z-index: 2;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.2), transparent);
    transform: rotate(20deg) translateX(-120%); transition: transform .7s ease; pointer-events: none;
}
.au-why-item:hover .au-why-front::before, .au-why-item.au-tilting .au-why-front::before { transform: rotate(20deg) translateX(320%); }
.au-why-front::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-red,#ff0000), transparent);
    transform: translateX(-50%); transition: width .3s ease;
}
.au-why-item:hover .au-why-front::after, .au-why-item.au-tilting .au-why-front::after { width: 72%; }
.au-why-icon { font-size: 2rem; margin-bottom: 10px; position: relative; z-index: 1; animation: auWhyFloat 3s ease-in-out infinite; }
@keyframes auWhyFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.au-why-txt { color: #ddd; font-size: .85rem; line-height: 1.7; position: relative; z-index: 1; }
.au-why-flip-hint { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: .6rem; color: #664; letter-spacing: .04em; }
.au-why-back-title { color: #ff6b6b; font-weight: 900; font-size: .78rem; margin-bottom: 8px; letter-spacing: .03em; }
.au-why-back-txt { color: #eee; font-size: .78rem; line-height: 1.75; }
.au-why-back-txt b { color: #ff9d9d; }
.au-why-back-list { list-style: none; margin: 0; padding: 0; text-align: right; width: 100%; }
.au-why-back-list li { color: #ddd; font-size: .72rem; line-height: 1.6; margin-bottom: 7px; padding-right: 14px; position: relative; }
.au-why-back-list li::before { content: '☠'; position: absolute; right: 0; color: #ff4d4d; font-size: .65rem; }
.au-why-back-list b { color: #ff9d9d; }
@media (max-width: 480px) { .au-why-grid { grid-template-columns: 1fr; } }

/* ✅ زر تبديل اللغة (عربي/English) — ظاهر طول صفحة "من نحن"، خفيف الوزن وما يفسد التصميم */
#au-lang-toggle {
    position: fixed; top: 12px; left: 12px; z-index: 9981;
    background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25); color: #ddd;
    padding: 7px 14px; border-radius: 16px; font-family: 'Cairo', sans-serif; font-size: .72rem;
    font-weight: bold; letter-spacing: .03em; cursor: pointer; backdrop-filter: blur(3px);
    transition: border-color .2s, color .2s;
}
#au-lang-toggle:hover { border-color: rgba(255,0,0,.5); color: #fff; }
@media (max-width: 480px) { #au-lang-toggle { top: auto; bottom: 10px; left: auto; right: 10px; } }

/* ✅ قسم "الأسئلة الشائعة" — أكورديون بسيط ينسجم مع باقي أقسام الصفحة */
.au-faq-list { max-width: 640px; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.au-faq-item {
    background: rgba(20,0,0,.5); border: 1px solid rgba(255,0,0,.25); border-radius: 10px;
    overflow: hidden; transition: border-color .25s;
}
.au-faq-item.au-faq-open { border-color: rgba(255,0,0,.55); }
.au-faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px; cursor: pointer; color: #fff; font-family: 'Cairo', sans-serif;
    font-weight: bold; font-size: .85rem; text-align: right;
}
.au-faq-q-icon {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid rgba(255,0,0,.45); color: #ff6b6b; font-size: .8rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center; transition: transform .25s ease;
}
.au-faq-item.au-faq-open .au-faq-q-icon { transform: rotate(45deg); }
.au-faq-a {
    max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease;
    padding: 0 16px; color: #ccc; font-size: .8rem; line-height: 1.8;
}
.au-faq-item.au-faq-open .au-faq-a { max-height: 260px; padding: 0 16px 16px; }

/* ✅ تحميل تدريجي "ضبابي" للصور — تبدأ مموّهة وتتضح بحركة ناعمة أول ما تدخل الشاشة،
   بدل ما تطلع فجأة حادة دفعة وحدة (بطاقات الغرف/الفريق/الغاليري) */
.au-img-blur-load {
    filter: blur(16px) saturate(1.1); opacity: .35; transform: scale(1.06);
    transition: filter .7s ease, opacity .7s ease, transform .7s ease;
}
.au-img-blur-load.au-img-in { filter: blur(0) saturate(1); opacity: 1; transform: scale(1); }

/* ✅ حركة "كشف" بسيطة بين أقسام الصفحة — يدخل القسم بتلاشي + انزلاق خفيف لفوگ،
   مع "نبضة نزيف" حمراء خفيفة على الحواف تنسجم مع هوية الموقع بدل ظهور فجائي جاف */
.au-section { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.au-section.au-section-in { opacity: 1; transform: translateY(0); }
.au-section.au-section-in::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(200,0,0,.35) 0%, rgba(200,0,0,0) 60%);
    animation: auSectionBleed 1.1s ease forwards;
}
@keyframes auSectionBleed { 0% { opacity: .9; } 100% { opacity: 0; } }

/* ✅ أيقونات SVG موحّدة الستايل لعناوين الأقسام — بديل عن الإيموجي (شكله يختلف
   بين آيفون/أندرويد/ويندوز) بأيقونة خط بسيطة بنفس هوية الموقع الحمراء */
.au-sec-icon {
    width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin-left: .35em;
    stroke: #ff3b3b; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(255,0,0,.45));
}
[dir="ltr"] .au-sec-icon { margin-left: 0; margin-right: .35em; }

/* ✅ مؤشر ماوس مخصص بثيم الرعب (نقطة دم) — بس على أجهزة الماوس الحقيقية (لابتوب/كمبيوتر)،
   ما يأثر على الجوال/التاتش إطلاقاً */
@media (hover: hover) and (pointer: fine) {
    #about-screen {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><path d="M13 2 C13 2 5 13 5 18 A8 8 0 0 0 21 18 C21 13 13 2 13 2 Z" fill="%238a0000" stroke="%23ff2a2a" stroke-width="1.3"/><ellipse cx="10.3" cy="15" rx="1.5" ry="2.1" fill="%23ff5b5b" opacity="0.6"/></svg>') 13 4, auto;
    }
}


/* ✅ فكرة إضافية: مسار زمني "شلون تصير تجربتك؟" — خط عمودي متصل + خطوات متحركة */
.au-how-timeline { position: relative; max-width: 520px; width: 100%; }
.au-how-timeline::before {
    content: ''; position: absolute; top: 6px; bottom: 6px; right: 27px; width: 2px;
    background: linear-gradient(180deg, rgba(255,0,0,.55), rgba(255,0,0,.08));
}
.au-how-step {
    position: relative; display: flex; align-items: flex-start; gap: 16px; padding-bottom: 34px;
    opacity: 0; transform: translateX(18px); animation: auHowIn .5s ease forwards; animation-delay: var(--au-date-delay, 0s);
}
.au-how-step:last-child { padding-bottom: 0; }
@keyframes auHowIn { to { opacity: 1; transform: translateX(0); } }
.au-how-num {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: rgba(20,0,0,.75);
    border: 2px solid var(--neon-red,#ff0000); display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; position: relative; z-index: 1; box-shadow: 0 0 16px rgba(255,0,0,.35);
    transition: transform .2s, box-shadow .2s;
}
.au-how-step:hover .au-how-num, .au-how-step:active .au-how-num { transform: scale(1.12); box-shadow: 0 0 28px rgba(255,0,0,.65); }
/* ✅ إصلاح 2: أيقونة "تحجز موعدك" تنبض بخفة وتنقلك لقسم الحجز عند الضغط */
.au-how-num-clickable { cursor: pointer; animation: auHowNumPulse 2.2s ease-in-out infinite; }
@keyframes auHowNumPulse { 0%,100% { box-shadow: 0 0 16px rgba(255,0,0,.35); } 50% { box-shadow: 0 0 26px rgba(255,0,0,.6); } }
.au-how-badge {
    position: absolute; bottom: -4px; left: -4px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--neon-red,#ff0000); color: #fff; font-size: .68rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(0,0,0,.6);
    font-family: 'Cairo';
}
.au-how-txt { flex: 1; color: #ddd; font-family: 'Cairo'; font-size: .92rem; line-height: 1.8; padding-top: 14px; }

/* ✅ فكرة إضافية: معرّض "لقطات من الداخل" — صور بولارويد متناثرة بزوايا مختلفة */
.au-gallery-strip {
    display: flex; gap: 20px; overflow-x: auto; padding: 24px 12px 40px; max-width: 100%;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: rgba(255,0,0,.4) transparent;
}
.au-gallery-strip::-webkit-scrollbar { height: 5px; }
.au-gallery-strip::-webkit-scrollbar-thumb { background: rgba(255,0,0,.4); border-radius: 4px; }
.au-gallery-item {
    flex: 0 0 auto; width: 165px; height: 215px; background: #111; background-size: cover; background-position: center;
    border: 7px solid #eee; border-radius: 2px; box-shadow: 0 12px 26px rgba(0,0,0,.65);
    position: relative; scroll-snap-align: center; cursor: pointer;
    transform: rotate(var(--au-rot, 0deg));
    opacity: 0; animation: auGalleryIn .5s ease forwards; animation-delay: var(--au-date-delay, 0s);
    transition: transform .25s ease, box-shadow .25s ease, z-index 0s;
}
@keyframes auGalleryIn {
    from { opacity: 0; transform: rotate(var(--au-rot,0deg)) translateY(20px) scale(.9); }
    to   { opacity: 1; transform: rotate(var(--au-rot,0deg)) translateY(0) scale(1); }
}
.au-gallery-item:hover, .au-gallery-item:active {
    transform: rotate(0deg) scale(1.1); box-shadow: 0 18px 40px rgba(255,0,0,.4); z-index: 2;
}
.au-gallery-cap {
    position: absolute; bottom: -30px; left: -7px; right: -7px; text-align: center;
    color: #888; font-family: 'Cairo'; font-size: .7rem; opacity: 0; transition: opacity .25s;
}
.au-gallery-item:hover .au-gallery-cap, .au-gallery-item:active .au-gallery-cap { opacity: 1; color: #ff8080; }

/* ✅ فقرة إضافية: بطاقات القوانين — كل وحدة "تُختم" بحركة دخول قوية ثم ترتد بخفة */
.au-rules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 640px; width: 100%; }
.au-rule-card {
    background: rgba(15,15,15,.6); border: 2px solid rgba(255,0,0,.3); border-radius: 12px;
    padding: 18px 12px; text-align: center; position: relative; cursor: pointer; overflow: hidden;
    opacity: 0; transform: scale(2.2) rotate(-8deg); transition: border-color .25s, box-shadow .25s, transform .15s;
    animation: auRuleStamp .5s var(--kb-ease-out) forwards; animation-delay: var(--au-date-delay, 0s);
}
@keyframes auRuleStamp {
    0%   { opacity: 0; transform: scale(2.2) rotate(-8deg); }
    60%  { opacity: 1; transform: scale(.92) rotate(2deg); }
    80%  { transform: scale(1.04) rotate(-1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
.au-rule-card:active { transform: scale(.96); }
.au-rule-icon { font-size: 1.7rem; margin-bottom: 8px; transition: transform .3s; }
.au-rule-txt { color: #ddd; font-size: .8rem; line-height: 1.65; }
/* ✅ إصلاح 1: حالة "اطّلعت عليها" — نبضة خضراء وعلامة صح تظهر بحركة مرضية */
.au-rule-check {
    position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%;
    background: #00dc3c; color: #fff; font-size: .75rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0); transition: opacity .2s, transform .3s var(--kb-ease-pop);
    box-shadow: 0 0 10px rgba(0,220,60,.7);
}
.au-rule-card.au-rule-checked { border-color: rgba(0,220,60,.6); box-shadow: 0 0 18px rgba(0,220,60,.25); }
.au-rule-card.au-rule-checked .au-rule-check { opacity: 1; transform: scale(1); }
.au-rule-card.au-rule-checked .au-rule-icon { transform: scale(1.15); }
@media (max-width: 480px) { .au-rules-grid { grid-template-columns: 1fr; } }
#au-rules-done-hint {
    margin-top: 14px; color: #6dff8a; font-family: 'Cairo'; font-size: .82rem; font-weight: bold;
    text-align: center; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .4s, max-height .4s;
}
#au-rules-done-hint.au-show { opacity: 1; max-height: 40px; }

/* ✅ إصلاح 8+9: قسم التواصل الختامي (يحتوي رابط انستغرام الرسمي) */
.au-contact-box { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 380px; }
.au-contact-row {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: rgba(20,0,0,.5); border: 1px solid rgba(255,0,0,.25); border-radius: 12px;
    padding: 16px; color: #eee; text-decoration: none; font-family: 'Cairo'; font-size: .95rem;
    transition: border-color .2s, transform .15s;
}
.au-contact-row:hover, .au-contact-row:active { border-color: var(--neon-red,#ff0000); transform: scale(1.02); }
.au-contact-ig { background: linear-gradient(135deg, rgba(255,0,80,.16), rgba(120,0,255,.14)); }

/* ✅ قسم "أي كابوس يناسبك؟" — اختبار تفاعلي بالكامل */
.au-quiz-box {
    width: 100%; max-width: 460px; background: rgba(10,0,0,.68);
    border: 1px solid rgba(255,0,0,.3); border-radius: 16px;
    padding: 26px 20px; box-sizing: border-box; backdrop-filter: blur(6px);
    box-shadow: 0 20px 60px rgba(0,0,0,.6); position: relative; overflow: hidden;
}
.au-quiz-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.au-quiz-dot { width: 8px; height: 8px; border-radius: 50%; background: #444; transition: background .3s, transform .3s; }
.au-quiz-dot.au-active { background: var(--neon-red,#ff0000); transform: scale(1.4); box-shadow: 0 0 8px rgba(255,0,0,.6); }
.au-quiz-panel { display: none; }
.au-quiz-panel.au-quiz-panel-active { display: block; animation: auSlideInFwd .35s ease; }
.au-quiz-q { text-align: center; color: #fff; font-family: 'Cairo'; font-weight: bold; font-size: 1.05rem; margin-bottom: 20px; line-height: 1.6; }
.au-quiz-opts { display: flex; flex-direction: column; gap: 12px; }
.au-quiz-opt {
    background: #111; border: 1px solid #333; color: #ddd; padding: 16px; border-radius: 10px;
    font-family: 'Cairo'; font-size: .92rem; cursor: pointer; text-align: center;
    transition: border-color .2s, background .2s, transform .15s;
}
.au-quiz-opt:hover, .au-quiz-opt:active { border-color: var(--neon-red,#ff0000); background: rgba(255,0,0,.1); transform: scale(1.02); }
.au-quiz-result { display: none; text-align: center; }
.au-quiz-result.au-quiz-result-active { display: block; animation: auQuizPop .5s var(--kb-ease-pop); }
@keyframes auQuizPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.au-quiz-result-img {
    width: 120px; height: 120px; border-radius: 50%; background-size: cover; background-position: center;
    margin: 0 auto 16px; border: 3px solid var(--neon-red,#ff0000);
    animation: auQuizGlow 2s ease-in-out infinite;
}
@keyframes auQuizGlow { 0%,100% { box-shadow: 0 0 20px rgba(255,0,0,.4); } 50% { box-shadow: 0 0 40px rgba(255,0,0,.7); } }
.au-quiz-result-label { color: #888; font-size: .8rem; margin-bottom: 4px; }
.au-quiz-result-name { color: #fff; font-family: 'Cairo'; font-weight: 900; font-size: 1.4rem; text-shadow: 0 0 14px rgba(255,0,0,.6); margin-bottom: 6px; }
.au-quiz-result-tag { color: #ff8080; font-size: .85rem; margin-bottom: 14px; }
.au-quiz-result-reason { color: #999; font-size: .76rem; line-height: 1.7; margin-bottom: 12px; font-style: italic; }
.au-quiz-result-diff {
    color: #ddd; font-size: .78rem; line-height: 1.8; background: rgba(255,0,0,.08);
    border: 1px solid rgba(255,0,0,.25); border-radius: 10px; padding: 10px 12px; margin-bottom: 20px;
}
.au-quiz-result-actions { display: flex; gap: 10px; flex-direction: column; }
.au-quiz-result-actions .au-book-back { width: 100%; box-sizing: border-box; }

/* ══ عنصر الحجز الذاتي (3 خطوات) ══ */
.au-book {
    width: 100%; max-width: 480px; background: rgba(10,0,0,.68);
    border: 1px solid rgba(255,0,0,.3); border-radius: 16px;
    padding: 22px 18px; box-sizing: border-box; backdrop-filter: blur(6px);
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.au-book-steps { display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.au-book-step-dot {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid #444; color: #666;
    display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .85rem;
    position: relative; flex-shrink: 0; transition: border-color .3s, color .3s, background .3s;
}
.au-book-step-dot span:last-child {
    position: absolute; top: 38px; font-size: .62rem; color: #666; white-space: nowrap;
    font-weight: normal; left: 50%; transform: translateX(-50%);
}
.au-book-step-dot.au-active { border-color: var(--neon-red,#ff0000); color: #fff; background: rgba(255,0,0,.18);
    box-shadow: 0 0 14px rgba(255,0,0,.4); animation: auStepPulse 1.7s ease-in-out infinite; }
@keyframes auStepPulse { 0%,100% { box-shadow: 0 0 12px rgba(255,0,0,.4); } 50% { box-shadow: 0 0 22px rgba(255,0,0,.7); } }
.au-book-step-dot.au-active span:last-child { color: #ff8080; }
.au-book-step-dot.au-done { border-color: #6dff8a; color: #6dff8a; background: rgba(0,255,80,.08); animation: none; }
/* ✅ رقم الخطوة يتلاشى لصح صح "✓" عند الإنجاز بدل تبديل فوري */
.au-step-num { transition: opacity .2s, transform .25s; }
.au-step-check { position: absolute; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .3s var(--kb-ease-pop); }
.au-book-step-dot.au-done .au-step-num { opacity: 0; transform: scale(.4); }
.au-book-step-dot.au-done .au-step-check { opacity: 1; transform: scale(1); }
/* ✅ خط التقدم يمتلئ فعلياً (مو مجرد لون ثابت) كل ما تكمل خطوة */
.au-book-step-line { width: 40px; height: 2px; background: #333; margin: 0 6px; position: relative; overflow: hidden; border-radius: 2px; }
.au-book-step-line::after {
    content: ''; position: absolute; inset: 0; width: 0%;
    background: linear-gradient(90deg, #00ff44, #6dff8a); transition: width .5s ease;
}
.au-book-step-line.au-filled::after { width: 100%; }
.au-book-panel { display: none; }
.au-book-panel.au-book-panel-active { display: block; }
/* ✅ انتقال اتجاهي بين الخطوات: تقدّم يدخل من جهة، رجوع من الجهة المقابلة */
.au-book-panel.au-slide-in-fwd { animation: auSlideInFwd .38s ease; }
.au-book-panel.au-slide-in-back { animation: auSlideInBack .38s ease; }
@keyframes auSlideInFwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes auSlideInBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
/* [حُذف] @keyframes auBookIn — لا يستدعيه أي سلاكتور؛ auSlideInFwd/Back أعلاه
   هما حركتا تنقّل نموذج الحجز الفعليتان. */

.au-book-room-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.au-book-room-opt {
    aspect-ratio: 4/3; border-radius: 10px; background-size: cover; background-position: center;
    border: 2px solid rgba(255,255,255,.15); position: relative; cursor: pointer; overflow: hidden;
    transition: border-color .2s, transform .15s;
    opacity: 0; transform: translateY(12px) scale(.94);
    animation: auDateIn .45s ease forwards; animation-delay: var(--au-date-delay, 0s);
}
.au-book-room-opt:active { transform: scale(.96); }
.au-book-room-opt::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.88) 20%,rgba(0,0,0,.15) 70%); }
.au-book-room-opt span { position:absolute; bottom:8px; right:0; left:0; text-align:center; z-index:1; font-weight:900; font-size:.9rem; }
.au-book-room-opt.au-picked { border-color: var(--neon-red,#ff0000); transform: scale(1.03); box-shadow: 0 0 20px rgba(255,0,0,.4); }
.au-book-room-check {
    position: absolute; top: 8px; left: 8px; z-index: 2; width: 24px; height: 24px; border-radius: 50%;
    background: var(--neon-red,#ff0000); color: #fff; font-size: .8rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0); transition: opacity .25s, transform .3s var(--kb-ease-pop);
    box-shadow: 0 0 12px rgba(255,0,0,.7);
}
.au-book-room-opt.au-picked .au-book-room-check { opacity: 1; transform: scale(1); }

/* ✅ إصلاح 7: شريط أيام قابل للتمرير أفقياً (اليوم → أسبوع لكدام) بدل 4 أيام بس،
   بحركات دخول متتالية (stagger) وتأثيرات تفاعلية أقوى عند الاختيار */
.au-book-date-row {
    display: flex; gap: 10px; margin-bottom: 16px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
    padding: 4px 4px 10px; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: rgba(255,0,0,.4) transparent;
}
.au-book-date-row::-webkit-scrollbar { height: 5px; }
.au-book-date-row::-webkit-scrollbar-thumb { background: rgba(255,0,0,.4); border-radius: 4px; }
.au-book-date-opt {
    flex: 0 0 auto; scroll-snap-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    width: 62px; padding: 10px 6px; border-radius: 14px; border: 1px solid #444; color: #ccc; background: #111;
    cursor: pointer; font-family: 'Cairo'; font-size: .78rem;
    transition: border-color .2s, color .2s, background .2s, transform .2s;
    opacity: 0; transform: translateY(10px) scale(.9);
    animation: auDateIn .4s ease forwards; animation-delay: var(--au-date-delay, 0s);
}
@keyframes auDateIn { to { opacity: 1; transform: translateY(0) scale(1); } }
.au-book-date-opt .au-date-dow { font-size: .68rem; color: #888; }
.au-book-date-opt .au-date-num { font-size: 1.15rem; font-weight: 900; line-height: 1.1; }
.au-book-date-opt:active { transform: scale(.93); }
.au-book-date-opt.au-picked {
    border-color: var(--neon-red,#ff0000); color: #fff; background: rgba(255,0,0,.18);
    box-shadow: 0 0 18px rgba(255,0,0,.45); transform: scale(1.08);
    animation: auDateIn .4s ease forwards, auDatePulse 1.6s ease-in-out .4s infinite;
}
.au-book-date-opt.au-picked .au-date-dow { color: #ffb3b3; }
@keyframes auDatePulse { 0%,100%{ box-shadow:0 0 14px rgba(255,0,0,.35);} 50%{ box-shadow:0 0 26px rgba(255,0,0,.65);} }
.au-book-time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 260px; overflow-y: auto; margin-bottom: 16px; padding: 2px; }
.au-book-time-opt {
    padding: 10px 6px; border-radius: 8px; border: 1px solid #333; color: #ccc; background: #0d0d0d;
    cursor: pointer; font-family: 'Share Tech Mono', monospace; font-size: .85rem; text-align: center;
    transition: border-color .2s, color .2s, background .2s, transform .15s;
    opacity: 0; transform: scale(.85);
    animation: auTimeIn .3s ease forwards; animation-delay: var(--au-date-delay, 0s);
}
@keyframes auTimeIn { to { opacity: 1; transform: scale(1); } }
.au-book-time-opt:active { transform: scale(.92); }
.au-book-time-opt.au-picked { border-color: var(--neon-red,#ff0000); color: #fff; background: rgba(255,0,0,.18); box-shadow: 0 0 14px rgba(255,0,0,.4); }
/* ✅ الأوقات المحجوزة فعلاً تعرض "محجوز" بشكل واضح ومرتّب — بدون أي اسم أو رقم
   يخص الزبون اللي حجزها؛ والأوقات المنتهية توسم "انتهى" بشكل مختلف وأصدق */
.au-book-time-opt.au-taken {
    animation: auTimeIn .3s ease forwards; cursor: not-allowed;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: repeating-linear-gradient(135deg, #170606, #170606 6px, #120404 6px, #120404 12px);
    border-color: rgba(255,0,0,.22); color: #8a5555; opacity: .8;
}
.au-taken-lock { font-size: .82rem; }
.au-taken-label { font-size: .66rem; font-weight: bold; letter-spacing: .04em; }
.au-book-time-empty { grid-column: 1/-1; text-align: center; color: #777; font-size: .85rem; padding: 14px 0; }
/* ✅ عداد المواعيد المتاحة — رقم حقيقي محسوب فعلياً، مو رقم وهمي */
.au-book-avail-count {
    text-align: center; color: #6dff8a; font-family: 'Cairo'; font-size: .76rem; font-weight: bold;
    margin-bottom: 10px; opacity: 0; animation: auWhyIn .4s ease forwards;
}

.au-book-input {
    width: 100%; box-sizing: border-box; background: #0d0d0d; border: 1px solid #333; color: #fff;
    padding: 12px 14px; border-radius: 8px; font-family: 'Cairo'; font-size: .95rem; margin-bottom: 12px;
}
.au-book-input:focus { border-color: var(--neon-red,#ff0000); outline: none; }
.au-book-summary { background: rgba(255,0,0,.06); border: 1px dashed rgba(255,0,0,.3); border-radius: 8px; padding: 10px 14px; font-size: .82rem; color: #ff9d9d; margin-bottom: 14px; text-align: center; }
.au-book-error { color: #ff5050; font-size: .8rem; text-align: center; min-height: 1.2em; margin-bottom: 6px; }
.au-book-nav { display: flex; gap: 10px; align-items: center; }
.au-book-nav .au-cta-btn { flex: 1; padding: 13px 20px; font-size: .95rem; }
.au-book-back { background: transparent; border: 1px solid #333; color: #999; padding: 12px 16px; border-radius: 8px; font-family: 'Cairo'; cursor: pointer; }
.au-book-success { text-align: center; padding: 10px 0; }
.au-book-success-icon {
    font-size: 2.6rem; margin-bottom: 6px; display: inline-block;
    animation: auSuccessPop .55s var(--kb-ease-pop);
    filter: drop-shadow(0 0 16px rgba(109,255,138,.6));
}
@keyframes auSuccessPop { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.25) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.au-book-success-title {
    font-size: 1.2rem; font-weight: 900; color: #6dff8a; margin-bottom: 8px;
    opacity: 0; animation: auWhyIn .4s ease .2s forwards;
}
.au-book-success-sub {
    color: #aaa; font-size: .88rem; line-height: 1.7;
    opacity: 0; animation: auWhyIn .4s ease .35s forwards;
}
/* ✅ أنيميشن 2: بطاقة التذكرة القابلة للمشاركة */
.au-ticket {
    position: relative; max-width: 340px; margin: 22px auto 6px; background: linear-gradient(160deg, #150000, #0a0000);
    border: 1px solid rgba(255,0,0,.35); border-radius: 14px; overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.7), 0 0 30px rgba(255,0,0,.12);
    opacity: 0; transform: scale(.85) translateY(10px);
    animation: auTicketIn .55s var(--kb-ease-pop) .5s forwards;
}
@keyframes auTicketIn { to { opacity: 1; transform: scale(1) translateY(0); } }
.au-ticket-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; }
.au-ticket-logo { font-family: 'Cairo'; font-weight: 900; color: #ff4d4d; font-size: .95rem; letter-spacing: .04em; }
.au-ticket-status { background: rgba(0,220,60,.12); color: #6dff8a; border: 1px solid rgba(0,220,60,.4); border-radius: 20px; padding: 3px 10px; font-size: .68rem; font-family: 'Cairo'; font-weight: bold; }
.au-ticket-room { padding: 0 16px 14px; font-family: 'Cairo'; font-weight: 900; color: #fff; font-size: 1.15rem; text-shadow: 0 0 12px rgba(255,0,0,.5); }
/* خط التقطيع الكلاسيكي لتذكرة حقيقية — نتوءات دائرية بالطرفين + خط منقط */
.au-ticket-perf {
    position: relative; height: 0; border-top: 2px dashed rgba(255,255,255,.15); margin: 0 -1px;
}
.au-ticket-perf::before, .au-ticket-perf::after {
    content: ''; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #000;
}
.au-ticket-perf::before { left: -9px; }
.au-ticket-perf::after { right: -9px; }
.au-ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; }
.au-ticket-cell { text-align: right; }
.au-ticket-cell span { display: block; color: #888; font-size: .68rem; margin-bottom: 3px; }
.au-ticket-cell b { color: #fff; font-family: 'Cairo'; font-size: .92rem; }
.au-ticket-footer {
    text-align: center; padding: 10px; background: rgba(255,0,0,.06); color: #ff8080;
    font-family: 'Cairo'; font-size: .8rem; font-weight: bold; border-top: 1px solid rgba(255,0,0,.15);
}
.au-ticket-hint {
    color: #777; font-size: .76rem; font-family: 'Cairo'; margin-top: 10px;
    opacity: 0; animation: auWhyIn .4s ease .9s forwards;
}
@media (max-width: 380px) {
    .au-book-time-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .au-section { padding: 40px 14px; }
    .au-team-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .au-room-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══ إضافات: تفاعلية وحركة أثقل لصفحة "من نحن" ══ */

/* مقياس التمرير الدموي */
#au-blood-meter {
    position: fixed; top: 0; bottom: 0; left: 0; width: 4px; z-index: 9979;
    background: rgba(255,255,255,.05); pointer-events: none;
}
#au-blood-meter-fill {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 0%;
    background: linear-gradient(0deg, #ff0000, #8a0000);
    box-shadow: 0 0 12px rgba(255,0,0,.7);
    transition: height .15s linear;
}

/* جزيئات جمر عائمة */
#au-embers { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.au-ember {
    position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
    background: #ff6a00; box-shadow: 0 0 6px 2px rgba(255,106,0,.8);
    animation: auEmberRise linear infinite;
}
@keyframes auEmberRise {
    0%   { transform: translate(0,0) scale(1); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: .5; }
    100% { transform: translate(var(--au-drift,20px), -110vh) scale(.3); opacity: 0; }
}

/* خلفيات الصور (تُستخدم بأكثر من قسم) — تأثير Ken Burns بطيء */
.au-bg-img {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    opacity: 0; filter: saturate(1.1) contrast(1.05);
    animation: auKenBurns 22s ease-in-out infinite alternate;
    transition: opacity 1.4s ease;
}
/* ✅ تظهر بتلاشي سلس بعد ما تكون الصورة محمّلة فعلاً بالذاكرة (JS يضيف هذا الكلاس) */
.au-bg-img.au-bg-ready { opacity: .32; }
.au-section > *:not(.au-bg-img) { position: relative; z-index: 1; }
@keyframes auKenBurns { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.15) translate(-1.5%,-1.5%); } }

/* ✅ الصورة نفسها ثابتة تمامًا (بدون أي تكبير/تحريك) — الحركة الان كلها بطبقات
   فوقها فقط (ضباب، نبض تعتيم، شعاع ضوء)، حتى ما يصير أي تغيّر بأبعاد العنصر
   يسبب مشاكل بالتمرير. */
.au-gate-bg {
    position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 30%;
    opacity: 0; transition: opacity 2.2s ease;
}
.au-gate-bg.au-active { opacity: .45; }
/* طبقة ضباب خفيفة تتحرك فوق الصورة (تأثير فقط — ما تلمس أبعاد الصورة نفسها) */
.au-gate-mist {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 40% at 30% 20%, rgba(255,255,255,.05) 0%, transparent 60%),
                radial-gradient(ellipse 60% 35% at 75% 80%, rgba(255,255,255,.04) 0%, transparent 60%);
    animation: auGateMistDrift 14s ease-in-out infinite alternate;
}
@keyframes auGateMistDrift { 0% { transform: translate(-2%,-1%) scale(1); } 100% { transform: translate(2%,1%) scale(1.06); } }
/* ✅ نبض تعتيم بالأطراف — إحساس "تنفّس" مرعب بدون تحريك الصورة نفسها */
.au-gate-vignette {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0,0,0,.75) 100%);
    animation: auGateVigPulse 5s ease-in-out infinite;
}
@keyframes auGateVigPulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
/* ✅ شعاع ضوء خافت يمر بشكل مائل بين فترة وأخرى — يعزّز جو الصورة المرفقة */
.au-gate-raybeam {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.au-gate-raybeam::after {
    content: ''; position: absolute; top: -40%; left: -20%; width: 22%; height: 180%;
    background: linear-gradient(100deg, transparent, rgba(255,120,120,.09), transparent);
    transform: rotate(12deg) translateX(-60%);
    animation: auGateRay 7s ease-in-out infinite;
}
@keyframes auGateRay { 0%,60%,100% { transform: rotate(12deg) translateX(-60%); opacity: 0; } 15% { opacity: 1; } 45% { transform: rotate(12deg) translateX(420%); opacity: 0; } }
#au-gateway > *:not(.au-gate-bg):not(.au-gate-mist):not(.au-gate-vignette):not(.au-gate-raybeam) { position: relative; z-index: 1; }

/* تأثير "الفانوس" — ضوء خافت يتبع الإصبع/الماوس بقسم السرد */
.au-torch {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(circle 180px at 50% 40%, transparent 0%, rgba(0,0,0,.82) 100%);
    transition: background-position .05s linear;
}

/* بطاقات "اختر كابوسك" — تميل بالـ 3D مع اللمسة */
.au-sec-sub { color: #888; margin: -22px 0 30px; font-size: .88rem; }
.au-room-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 18px; max-width: 820px; width: 100%; perspective: 900px;
}
.au-room-card {
    position: relative; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden;
    border: 1px solid rgba(255,0,0,.35);
    transform-style: preserve-3d; transition: transform .1s ease-out, box-shadow .2s;
    cursor: pointer;
}
/* ✅ طبقة خلفية مستقلة تحمل تأثير "التحميل الضبابي" — منفصلة عن النص حتى
   ما ينضبب اسم/وصف الغرفة معاها (الفلتر يأثر على كل العنصر اللي يتحطلّه) */
.au-room-card-bg {
    position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
}
.au-room-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.92) 10%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.55) 100%);
}
.au-room-card:active, .au-room-card.au-tilting { box-shadow: 0 12px 30px rgba(255,0,0,.35); }
.au-room-card-label {
    position: absolute; bottom: 12px; right: 0; left: 0; text-align: center; z-index: 2;
    font-weight: 900; font-size: 1.05rem; text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.au-room-card-sub {
    position: absolute; top: 10px; right: 10px; left: 10px; text-align: center; z-index: 2;
    font-size: .68rem; color: #ff8080; opacity: 0; transition: opacity .2s;
}
.au-room-card:active .au-room-card-sub, .au-room-card.au-tilting .au-room-card-sub { opacity: 1; }

/* بطاقات الفريق — صور حقيقية + ميلان 3D */
.au-team-grid { perspective: 900px; }
.au-team-card { background-size: cover; background-position: center top; transform-style: preserve-3d; transition: transform .1s ease-out, border-color .2s, box-shadow .2s; }
.au-team-silhouette { background: #000; }

.hk-scanlines {
    position: fixed; inset: 0; pointer-events: none; z-index: 2;
    background: repeating-linear-gradient(0deg, rgba(0,255,65,.06) 0px, rgba(0,255,65,.06) 1px, transparent 1px, transparent 3px);
}
.hk-noise {
    position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: .35;
    background: radial-gradient(ellipse at 50% 0%, rgba(0,255,65,.08) 0%, transparent 60%);
    animation: hkFlicker 3.4s steps(12,end) infinite;
}
@keyframes hkFlicker { 0%,100%{opacity:.28;} 45%{opacity:.4;} 47%{opacity:.15;} 48%{opacity:.4;} 82%{opacity:.3;} }
#briefing-screen { text-shadow: 0 0 6px rgba(0,255,65,.65); }
.hk-stamp {
    display: inline-block; border: 2px solid #ff2a2a; color: #ff2a2a; padding: 6px 14px;
    font-weight: bold; letter-spacing: .1em;
    text-shadow: 0 0 10px rgba(255,0,0,.7);
    /* ✅ تحسين: دخول "ختم" حقيقي (يكبر ثم يصفع بمكانه) قبل ما يدخل بحلقة الوميض
       الدائمة — بدل ما يبدأ بالوميض فوراً من غير أي أثر دخول */
    animation: hkStampSlam .45s var(--kb-ease-pop) both,
               hkStampGlitch 2.6s steps(2,end) .45s infinite;
}
@keyframes hkStampSlam {
    0%   { transform: rotate(-3deg) scale(2.4); opacity: 0; }
    55%  { transform: rotate(-3deg) scale(.92); opacity: 1; }
    75%  { transform: rotate(-3deg) scale(1.06); }
    100% { transform: rotate(-3deg) scale(1); opacity: 1; }
}
@keyframes hkStampGlitch { 0%,90%,100%{transform:rotate(-3deg) translate(0,0);} 92%{transform:rotate(-3deg) translate(-2px,1px);} 94%{transform:rotate(-3deg) translate(2px,-1px);} }
.hk-photo-frame {
    max-width: 240px; margin: 20px auto 0; position: relative;
    border: 2px solid rgba(0,255,65,.45); box-shadow: 0 0 20px rgba(0,255,65,.2);
    /* ✅ تحسين: الصورة "تتكشف" كأنها تتحمّل من إشارة مشوّشة بدل ما تظهر دفعة وحدة */
    animation: hkPhotoReveal .55s ease-out both;
}
@keyframes hkPhotoReveal {
    0%   { opacity: 0; filter: grayscale(.65) contrast(1.4) brightness(2.6) blur(5px); }
    60%  { opacity: 1; filter: grayscale(.65) contrast(1.3) brightness(.6) blur(1px); }
    100% { opacity: 1; filter: grayscale(.65) contrast(1.15) brightness(.82) blur(0); }
}
.hk-photo-frame img { width: 100%; display: block; }
.hk-photo-tag {
    position: absolute; bottom: 6px; right: 6px;
    background: rgba(0,0,0,.75); color: #00ff41;
    font-size: .62rem; padding: 2px 7px; font-family: 'Share Tech Mono', monospace; letter-spacing: .05em;
}
#hk-cursor { animation: hkBlink 1s steps(1,end) infinite; }
@keyframes hkBlink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
#hk-continue-btn {
    background: transparent; border: 1px solid #00ff41; color: #00ff41;
    font-family: 'Share Tech Mono', monospace; padding: 12px 22px; font-size: .95rem;
    cursor: pointer; letter-spacing: .05em;
    transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
    animation: hkFadeUp .4s ease-out both;
}
#hk-continue-btn:hover { background: rgba(0,255,65,.12); box-shadow: 0 0 16px rgba(0,255,65,.3); }
#hk-continue-btn:active { transform: scale(.95); }
#hk-appointment {
    font-size: 1.15rem; font-weight: bold; color: #ff2a2a;
    text-shadow: 0 0 14px rgba(255,0,0,.85);
    animation: hkFadeUp .4s ease-out both, hkAppointPulse 1.6s ease-in-out .4s infinite;
}
@keyframes hkFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hkAppointPulse {
    0%, 100% { text-shadow: 0 0 14px rgba(255,0,0,.85); }
    50%      { text-shadow: 0 0 26px rgba(255,0,0,1), 0 0 40px rgba(255,0,0,.6); }
}
/* ✅ كل سطر بشاشة "الإقلاع" يدخل بخفة بدل ظهور فوري جاف */
.hk-boot-line { display: block; animation: hkFadeUp .22s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .hk-noise, .hk-stamp, .hk-photo-frame, #hk-appointment, #hk-continue-btn, .hk-boot-line {
        animation: none !important;
    }
    .hk-photo-frame { filter: grayscale(.65) contrast(1.15) brightness(.82); }
    .hk-stamp { transform: rotate(-3deg); opacity: 1; }
}

/* ══ ملء الشاشة + انتقالات سينمائية بين خطوات التعهد ══ */
#tw-content-wrap { transition: opacity .38s ease; }
#tw-content-wrap.tw-fade-out { opacity: 0; }
#tablet-waiver-screen button { transition: transform .12s ease; }
#tablet-waiver-screen button:active { transform: scale(.96); }

/* ══ أزرار إضافة/حذف موظف ══ */
.staff-toolbar { display:flex; gap:13px; align-items:stretch; flex-wrap:wrap; margin-bottom:18px; }
.staff-btn {
    display:flex !important; align-items:center; gap:12px; text-align:right;
    padding:14px 20px !important; border-radius:13px !important;
    border:2px solid !important; cursor:pointer; font-family:'Cairo',sans-serif;
    box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.staff-btn:hover { transform:translateY(-3px); }
.staff-btn:active { transform:translateY(-1px); }
.sb-ico {
    font-size:1.3rem; flex-shrink:0; width:44px; height:44px; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.4); border:1px solid currentColor;
}
.sb-txt { display:flex; flex-direction:column; gap:2px; }
.sb-txt b     { font-size:.9rem; font-weight:bold; }
.sb-txt small { font-size:.67rem; opacity:.62; }
.staff-btn-add {
    background:linear-gradient(150deg,rgba(0,220,60,.16),rgba(0,14,4,.92)) !important;
    border-color:rgba(0,220,60,.45) !important; color:#00dc3c !important;
}
.staff-btn-add:hover { box-shadow:0 10px 24px rgba(0,0,0,.6), 0 0 20px rgba(0,220,60,.32); }
.staff-btn-del {
    background:linear-gradient(150deg,rgba(200,0,0,.16),rgba(16,0,0,.92)) !important;
    border-color:rgba(200,0,0,.45) !important; color:#ff6b6b !important;
}
.staff-btn-del:hover { box-shadow:0 10px 24px rgba(0,0,0,.6), 0 0 20px rgba(200,0,0,.32); }
.staff-btn-del[data-mode="on"] {
    background:linear-gradient(150deg,rgba(200,0,0,.35),rgba(30,0,0,.95)) !important;
    border-color:var(--neon-red) !important; color:#fff !important;
    box-shadow:0 0 24px rgba(200,0,0,.5) !important;
}

/* ══ تحسين التمرير ══ */
/* عزل الحسابات داخل القوائم يمنع إعادة تخطيط الصفحة كاملة */
#history-list, #video-requests-list, #advance-bookings-list,
#payroll-staff-embed, #adm-sessions-log, #rooms-cards-grid {
    contain: layout style;
}
/* طبقة مركّبة للترويسة تمنع إعادة رسمها مع كل إطار */
#header-section {
    overflow: hidden;
    transform: translateZ(0);
}
/* تمرير سلس على الأجهزة اللمسية */
html { -webkit-overflow-scrolling: touch; scroll-behavior: auto; }

/* ✅ إضافة بطلب المالك (بلاغ: "احياناً تصير أخطاء سهواً بالعدد بسبب أسهم
   الزيادة/النقصان") — قاعدة عامة تشمل كل حقول الأرقام بالموقع كامله (عدد
   الأشخاص، الطلاب، الخصم، وأي حقل رقمي جديد مستقبلاً تلقائياً بدون أي تعديل
   إضافي): تخفي الأسهم الصغيرة اللي ممكن تنضغط بالغلط (خصوصاً باللمس على
   الجوال) وتغيّر الرقم بدون ما ينتبه الموظف. الكتابة المباشرة بالكيبورد
   تضل تشتغل عادي تماماً بدون أي تغيير — هذا تعديل شكلي بحت. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}