/* أثر — الغلاف المشترك: رموز الهوية + الخلفية + الشعار + الأيقونات + الشريط العلوي. يُحمَّل بكل صفحات أثر (الواجهة الأساسية وصفحات الوجوه). لا قواعد عامة على وسوم HTML هنا. */ :root{ --a-bg:#06070a; --a-surface:#0c0f16; --a-surface-2:#131826; --a-line:rgba(160,175,255,.13); --a-line-2:rgba(160,175,255,.26); --a-violet:#8b5cf6; --a-blue:#4f7df0; --a-aqua:#22c4dd; --a-mint:#3ddb9e; --a-amber:#f5b544; --a-lilac:#c4b5fd; --a-text:#f6f3ed; --a-muted:#aaa6b4; --a-faint:#8a8697; --a-ok:#3ddb9e; --a-warn:#f5b544; --a-bad:#f0716b; --a-grad:linear-gradient(100deg,#8b5cf6 0%,#4f7df0 50%,#22c4dd 100%); --a-grad-soft:linear-gradient(135deg,rgba(139,92,246,.22),rgba(79,125,240,.14) 55%,rgba(34,196,221,.18)); --a-font:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif; --a-display:'Readex Pro','IBM Plex Sans Arabic',system-ui,sans-serif; --a-mono:'IBM Plex Mono',ui-monospace,monospace; --ease:cubic-bezier(.22,1,.36,1); --a-r:22px; --a-r-sm:14px; --a-s1:4px; --a-s2:8px; --a-s3:12px; --a-s4:16px; --a-s5:24px; --a-s6:32px; --a-s7:48px; } .a-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none} .a-sprite{position:absolute;width:0;height:0;overflow:hidden} /* ───────── خلفية: هالة + حبيبات ───────── */ .a-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .a-blob{position:absolute;width:74vmax;height:74vmax;border-radius:50%;will-change:transform;opacity:.9} .a-blob.b1{top:-38vmax;inset-inline-end:-22vmax;background:radial-gradient(closest-side,rgba(139,92,246,.36),rgba(139,92,246,0) 72%);animation:drift1 28s ease-in-out infinite alternate} .a-blob.b2{bottom:-44vmax;inset-inline-start:-28vmax;background:radial-gradient(closest-side,rgba(34,196,221,.26),rgba(34,196,221,0) 72%);animation:drift2 34s ease-in-out infinite alternate} .a-blob.b3{top:12vh;inset-inline-start:22vw;width:52vmax;height:52vmax;background:radial-gradient(closest-side,rgba(79,125,240,.20),rgba(79,125,240,0) 72%);animation:drift3 40s ease-in-out infinite alternate} @keyframes drift1{to{transform:translate3d(-7vmax,9vmax,0) scale(1.12)}} @keyframes drift2{to{transform:translate3d(9vmax,-7vmax,0) scale(1.08)}} @keyframes drift3{to{transform:translate3d(-8vmax,6vmax,0) scale(.92)}} .a-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.075;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .a-mark{width:40px;height:40px;flex:none;filter:drop-shadow(0 0 14px rgba(99,102,241,.55))} .a-mark .r{fill:none;stroke-width:2.2;stroke-linecap:round} /* ───────── شريط علوي ───────── */ .a-top{position:sticky;top:0;z-index:30;background:rgba(6,7,10,.72);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--a-line)} .a-top-in{max-width:1120px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .a-brand{display:flex;align-items:center;gap:10px;font-family:var(--a-display);font-weight:700;font-size:20px;color:var(--a-text);text-decoration:none;min-width:0} .a-brand .a-mark{width:30px;height:30px;flex:none} /* 09-30: اسم المنظّمة (لحساب مستأجر ضبط شعاره) عرضه متغيّر بلا سقف — دفاعياً نحدّه بنقاط حتى لا يصير هو مصدر فيض أفقي جديد يوماً ما (نص طويل بلا فراغات مثلاً). */ .a-brand span{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:479px){.a-brand span{max-width:96px}} .a-nav{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none} .a-nav::-webkit-scrollbar{display:none} .a-nav a{display:inline-flex;align-items:center;gap:8px;color:var(--a-muted);text-decoration:none;font-size:14px;padding:8px 14px;border:1px solid transparent;border-radius:999px;white-space:nowrap;transition:color .2s,background .2s,border-color .2s;min-height:40px} .a-nav a:hover{color:var(--a-text);background:rgba(255,255,255,.05)} .a-nav a[aria-current="page"]{color:var(--a-text);background:var(--a-grad-soft);border-color:var(--a-line-2)} .a-nav .a-ic{width:18px;height:18px} /* ═══════════ 09-30 (إصلاح عاجل — سكرول أفقي) ═══════════ السبب الجذري: a-nav-sec القديم (شعار «صمم اونلاين» + أيقونتا سوشيال) كان صفاً مستقلاً بـflex:none (بلا انكماش إطلاقاً) يُطبع دائماً بجانب a-top-end (بطاقة المستخدم غير قابلة للانكماش تحت min-width:auto الافتراضي). بعد إضافات اليوم (روابط مشغّل جديدة: الباقات/ الحسابات والمالية/إيميلات التجربة/النظام + هذا التبويب نفسه) صار عرض هذا الصف عند 639-899px (حيث a-nav يسقط لصف خاص به عبر order:3 أسفل) أكبر من العرض المتاح — فيفيض أفقياً على كامل الصفحة (overflow-x:hidden على body فقط لا يمنعه دائماً لأنه فيض داخل flex عبر min-content، لا تدفّق عادي — انظر أيضاً إصلاح html{overflow-x:hidden} بأسفل الملف). الحل: هذا المحتوى صار داخل .a-more (قائمة منسدلة واحدة ثابتة العرض ~110px) بدل صف كامل. */ .a-more{position:relative;flex:none} .a-more>summary{display:inline-flex;align-items:center;gap:6px;color:var(--a-muted);cursor:pointer;font-size:13.5px;white-space:nowrap;padding:8px 13px;border:1px solid transparent;border-radius:999px;min-height:40px;list-style:none;transition:color .2s,background .2s,border-color .2s} .a-more>summary::-webkit-details-marker{display:none} .a-more>summary::marker{content:""} .a-more>summary:hover{color:var(--a-text);background:rgba(255,255,255,.05)} .a-more[open]>summary{color:var(--a-text);background:rgba(255,255,255,.06);border-color:var(--a-line-2)} .a-more .a-ic{width:17px;height:17px} .a-more-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:230px;max-width:min(320px,calc(100vw - 24px));background:var(--a-surface-2);border:1px solid var(--a-line-2);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:2px;box-shadow:0 24px 60px -20px rgba(0,0,0,.65);z-index:50;box-sizing:border-box} .a-more-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;color:var(--a-muted);text-decoration:none;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:40px} .a-more-menu a:hover{color:var(--a-text);background:rgba(255,255,255,.06)} .a-more-menu a[aria-current="page"]{color:var(--a-text);background:var(--a-grad-soft)} .a-more-menu .a-ic{width:17px;height:17px;flex:none} .a-more-sep{border:0;border-top:1px solid var(--a-line);margin:6px 4px} /* قائمة الهامبرغر: ≤639px فقط — تحل محل a-nav + a-more معاً بزر واحد وقائمة عمودية كاملة (كل الروابط الأساسية + الثانوية). محلولة عبر position:fixed فما تدخل حساب عرض a-top-in إطلاقاً (bounded بـinset-inline من حدود الشاشة نفسها، لا تُضيف للـscrollWidth أبداً). */ .a-burger{display:none;position:relative;flex:none} .a-burger>summary{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;border:1px solid var(--a-line-2);background:rgba(255,255,255,.04);color:var(--a-text);cursor:pointer;list-style:none} .a-burger>summary::-webkit-details-marker{display:none} .a-burger>summary::marker{content:""} .a-burger>summary:hover{background:rgba(255,255,255,.09)} .a-burger .a-ic{width:20px;height:20px} .a-burger-menu{position:fixed;top:64px;inset-inline:12px;max-height:calc(100vh - 80px);overflow-y:auto;background:var(--a-surface-2);border:1px solid var(--a-line-2);border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:2px;box-shadow:0 24px 70px -20px rgba(0,0,0,.7);z-index:70;box-sizing:border-box} .a-burger-menu a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;color:var(--a-muted);text-decoration:none;font-size:14.5px;min-height:46px} .a-burger-menu a:hover{color:var(--a-text);background:rgba(255,255,255,.06)} .a-burger-menu a[aria-current="page"]{color:var(--a-text);background:var(--a-grad-soft)} .a-burger-menu .a-ic{width:19px;height:19px;flex:none} @media (max-width:639px){.a-nav,.a-more{display:none}.a-burger{display:inline-flex}} /* ٣٧٥px: الحيّ حيّز أضيق — نطفي نبضة «متصل» الزخرفية لزيادة هامش الأمان بصف الشريط (بلا حذف وظيفة: الحالة نفسها مش رابطاً ولا إجراءً، فقط مؤشر بصري). */ @media (max-width:479px){.a-live{display:none}} .a-top-end{display:flex;align-items:center;gap:10px} .a-live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--a-muted);padding:5px 12px;border:1px solid var(--a-line);border-radius:999px} .a-live i{width:8px;height:8px;border-radius:50%;background:var(--a-ok);box-shadow:0 0 0 0 rgba(61,219,158,.6);animation:pulse 2.4s ease-out infinite} @keyframes pulse{70%{box-shadow:0 0 0 9px rgba(61,219,158,0)}100%{box-shadow:0 0 0 0 rgba(61,219,158,0)}} .a-avatar{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:700;background:var(--a-grad);color:#06070a;flex:none} /* بطاقة المستخدم بالشريط (09-30): اسم الشخص أساسي + اسم الشركة/الصفة ثانوي أخفت */ .a-me{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;padding:4px 10px 4px 4px;border:1px solid transparent;border-radius:999px;max-width:230px;transition:background .2s,border-color .2s} .a-me:hover{background:rgba(255,255,255,.05);border-color:var(--a-line-2)} .a-me-t{display:flex;flex-direction:column;min-width:0;line-height:1.25} .a-me-t b{font-size:13.5px;font-weight:600;color:var(--a-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .a-me-t small{font-size:11.5px;color:var(--a-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:719px){.a-me-t{display:none}.a-me{padding:0;max-width:none;border-color:transparent!important;background:none!important}} .a-out{margin:0} .a-iconbtn{width:44px;height:44px;border-radius:14px;border:1px solid var(--a-line-2);background:rgba(255,255,255,.04);color:var(--a-muted);display:grid;place-items:center;cursor:pointer;transition:color .2s,background .2s,transform .2s var(--ease)} .a-iconbtn:hover{color:var(--a-text);background:rgba(255,255,255,.09);transform:translateY(-1px)} @media (max-width:899px){.a-top-in{gap:10px}.a-nav{order:3;flex-basis:100%}} @media (max-width:959px){.a-mark{width:34px;height:34px}.a-brand .a-mark{width:30px;height:30px}} @media (prefers-reduced-motion:reduce){.a-blob,.a-live i{animation:none!important}} /* ═══ 09-22: تصفّح المشغّل كمستأجر (مستقل — يشتغل بصفحات الوجوه وصفحات أثر) ═══ */ .a-imp{position:relative;z-index:40;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 18px;background:linear-gradient(90deg,rgba(245,181,68,.18),rgba(139,92,246,.18));border-bottom:1px solid rgba(245,181,68,.5);color:#eef1f7;font-size:14px;direction:rtl} .a-imp>svg{width:18px;height:18px;color:#f5b544;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .a-imp>span{flex:1;min-width:220px} .a-imp form{margin:0} .a-imp button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:0;border-radius:12px;cursor:pointer;font:inherit;font-weight:600;color:#06070a;background:linear-gradient(135deg,#8b5cf6,#4f7df0 50%,#22c4dd)} .a-imp button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} /* 09-22: قوائم الاختيار — النظام يعرض