/* Boh AI — الهيدر الورقي المتحرك المشترك (68/69): رسومات معمارية متحركة في الأطراف + مسطرة بمثلث رسم بيمشي مع التمرير
   + شارة «Api Key» بنقطة خضرا مضيئة. بيشتغل على أي هيدر عليه [data-bh] (index / about / team / embed) — JS: assets/boh-header.js
   الورق ثابت في الثيمين، فكل الألوان هنا حبر غامق على ورق. الحركة كلها transform/opacity بس + prefers-reduced-motion. */
.bh-host { --bh-ink: rgba(27, 34, 54, 0.34); }
.bh-deco { position: absolute !important; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bh-art { position: absolute !important; top: 0; height: 100%; display: none; border-radius: 0 !important; }
.bh-l { left: 0; }
.bh-r { right: 0; }
@media (min-width: 1520px) { .bh-art { display: block; width: min(268px, calc((100vw - var(--bh-max, 1340px)) / 2 + 10px)); } }
/* الهيدرات الأضيق (الرئيسية / عن Boh AI / فريقنا ≈ 1140–1180px) فيها مساحة على الجنبين من 1320px */
@media (min-width: 1320px) { .bh-host[data-bh-narrow] .bh-art { display: block; width: min(268px, calc((100vw - var(--bh-max, 1180px)) / 2 + 10px)); } }
.bh-ink { fill: none; stroke: var(--bh-ink); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.bh-ink * { transform-box: view-box; }
.bh-dash { stroke-dasharray: 3 4; }
.bh-compass { transform-origin: 56px 16px; animation: bh-swing 7s ease-in-out infinite alternate; }
.bh-lead { stroke: #d97706; stroke-width: 1.6; }
.bh-spin { transform-origin: 150px 30px; animation: bh-rot 26s linear infinite; }
.bh-float { animation: bh-bob 5.5s ease-in-out infinite; }
.bh-pulse { animation: bh-fade 3.2s ease-in-out infinite; }
.bh-win rect { fill: rgba(233, 138, 18, 0.22); animation: bh-fade 4.8s ease-in-out infinite; }
.bh-win rect:nth-child(2) { animation-delay: .8s; } .bh-win rect:nth-child(3) { animation-delay: 1.6s; } .bh-win rect:nth-child(4) { animation-delay: 2.4s; } .bh-win rect:nth-child(5) { animation-delay: 3.2s; }
.bh-jib { transform-origin: 203px 12px; animation: bh-jibk 9s ease-in-out infinite alternate; }
.bh-hook { transform-origin: 236px 12px; animation: bh-hookk 4.5s ease-in-out infinite alternate; }
.bh-dim { transform-origin: 14px 10px; animation: bh-dimk 6s ease-in-out infinite alternate; }
@keyframes bh-swing { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes bh-rot { to { transform: rotate(360deg); } }
@keyframes bh-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes bh-fade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes bh-jibk { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes bh-hookk { from { transform: scaleY(.7); } to { transform: scaleY(1.15); } }
@keyframes bh-dimk { from { transform: scaleX(.55); } to { transform: scaleX(1); } }
/* المسطرة: خط التقدّم + مثلث الرسم (مكانك في الصفحة) + هدف مساحي بيلف وفرجار بيتأرجح على الطرفين */
.bh-ruler { position: absolute !important; left: 0; right: 0; bottom: 0; height: 18px; z-index: 1; pointer-events: none; overflow: hidden; }
.bh-fill { position: absolute !important; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #ffc46e, #e07000); transform: scaleX(var(--bh-p, 0)); transform-origin: left center; }
html[dir="rtl"] .bh-fill { transform-origin: right center; background: linear-gradient(270deg, #ffc46e, #e07000); }
.bh-sq { position: absolute !important; bottom: 2px; left: 0; width: 30px; height: 16px; transform: translateX(var(--bh-x, 22px)); transition: transform .3s cubic-bezier(.3, .7, .3, 1); }
.bh-sq svg, .bh-a svg, .bh-b svg { display: block; width: 100%; height: 100%; overflow: visible; border-radius: 0 !important; }
.bh-sq path { fill: none; stroke: #a85400; stroke-width: 1.1; stroke-linejoin: round; }
.bh-sq path:first-child { fill: rgba(255, 196, 110, 0.45); }
html[dir="rtl"] .bh-sq svg { transform: scaleX(-1); }
.bh-a, .bh-b { position: absolute !important; bottom: 3px; width: 14px; height: 14px; }
.bh-a { left: 5px; } .bh-b { right: 5px; }
.bh-a svg, .bh-b svg { fill: none; stroke: #a85400; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.bh-a svg { animation: bh-rot 14s linear infinite; }
.bh-b svg { transform-origin: 7px 2px; animation: bh-swing 3.6s ease-in-out infinite alternate; }
/* شارة «Api Key» في كل الهيدرات قبل تسجيل الدخول: نقطة خضرا مضيئة بنبضة */
.bh-api { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(27, 34, 54, 0.2); background: rgba(255, 255, 255, 0.66); color: #1b2236; font: 800 .84rem/1 'Inter', 'Cairo', sans-serif; letter-spacing: .02em; direction: ltr; white-space: nowrap; flex: none; box-shadow: 0 1px 2px rgba(20, 24, 40, 0.06); text-decoration: none; transition: border-color .15s, background-color .15s; }
.bh-api:hover { border-color: rgba(22, 163, 74, 0.55); background: #fff; }
.bh-api b { font-weight: 800; }
.bh-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22), 0 0 10px 2px rgba(34, 197, 94, 0.7); }
.bh-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(34, 197, 94, 0.6); animation: bh-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes bh-ping { 0% { transform: scale(.55); opacity: 1; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
@media (max-width: 640px) { .bh-api { height: 28px; padding: 0 9px; gap: 7px; font-size: .76rem; } }
@media (prefers-reduced-motion: reduce) { .bh-ink *, .bh-win rect, .bh-a svg, .bh-b svg, .bh-dot::after { animation: none !important; } .bh-sq { transition: none; } }
/* (75) خلفية الليلي الموحّدة «Boh Night» — نفس القيم في الرئيسية (style.css v4.78) + عن Boh AI + فريقنا + Api Key:
   كحلي أفتح + توهّجات أزرق / بنفسجي / وردي / فيروزي (بهجة من غير برتقالي شفاف = من غير «بني»). الأشكال المعمارية فوقها من assets/geo-bg.js */
html:not([data-theme="light"]) {
  --boh-night-base: #121c33;
  --boh-night-bg:
    radial-gradient(1100px 640px at 92% -14%, rgba(86, 140, 255, 0.3), transparent 62%),
    radial-gradient(980px 700px at -10% 2%, rgba(150, 100, 255, 0.22), transparent 60%),
    radial-gradient(760px 560px at 108% 58%, rgba(255, 92, 170, 0.1), transparent 62%),
    radial-gradient(1000px 640px at 38% 114%, rgba(30, 205, 180, 0.2), transparent 62%),
    linear-gradient(180deg, #172442 0%, #121c33 52%, #141f3a 100%);
}
/* ═══════════════════════════════════════════════════════════════════
   (76) الهيدر الجديد «شريط الاستوديو» — قبل تسجيل الدخول (الرئيسية + عن Boh AI + فريقنا + Api Key)
   المالك: «الهيدر محتاج يكون أفضل وألوانه متماشية مع الموقع واللوجو — فكرة جديدة احترافية»
   · شريط عائم مدوّر (مسافة من أطراف الشاشة): كحلي زجاجي في الليلي · أبيض نضيف في النهاري
   · اللوجو مباشرة على الشريط (76ب — كانت «لوحة اسم» واتشالت بطلب المالك) + في الليلي نسخة بحروف فضّي logo-boh-dark.png
   · تحت: مسطرة معمارية رفيعة (برتقالي اللوجو ← فيروزي الموقع) بتتملي مع التمرير + مثلث الرسم ماشي عليها
   الألوان كلها متغيرات --hb-* على [data-bh] (موجودة في الـ HTML من الأول = من غير وميض). الرئيسية: style.css v4.79.
   ═══════════════════════════════════════════════════════════════════ */
[data-bh] {
  --hb-bg: linear-gradient(180deg, rgba(34, 49, 88, 0.96), rgba(22, 33, 62, 0.96));
  --hb-line: rgba(165, 190, 245, 0.18);
  --hb-hi: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --hb-shadow: 0 18px 44px -22px rgba(2, 8, 24, 0.9), 0 2px 8px rgba(2, 8, 24, 0.28);
  --hb-ink: #eef2fa; --hb-ink-2: #c3cde2;
  --hb-chip: rgba(255, 255, 255, 0.06); --hb-chip-line: rgba(165, 190, 245, 0.24); --hb-chip-hover: rgba(255, 255, 255, 0.11);
  --hb-hover: rgba(255, 255, 255, 0.08);
  --hb-acc: #ffb04a; --hb-acc-ink: #ffc276;
  --hb-scale: linear-gradient(90deg, #e8850c, #ffb04a 42%, #ffd391 56%, #2dd4bf);
  --hb-scale-rtl: linear-gradient(270deg, #e8850c, #ffb04a 42%, #ffd391 56%, #2dd4bf);
  --hb-tick: rgba(200, 215, 245, 0.3);
  --bh-ink: rgba(180, 200, 240, 0.3);
}
html[data-theme="light"] [data-bh] {
  --hb-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 252, 0.98));
  --hb-line: rgba(15, 23, 42, 0.09);
  --hb-hi: inset 0 1px 0 #ffffff;
  --hb-shadow: 0 14px 34px -20px rgba(15, 23, 42, 0.38), 0 1px 3px rgba(15, 23, 42, 0.06);
  --hb-ink: #0f172a; --hb-ink-2: #3b4760;
  --hb-chip: #ffffff; --hb-chip-line: rgba(15, 23, 42, 0.13); --hb-chip-hover: #f4f6fa;
  --hb-hover: rgba(15, 23, 42, 0.05);
  --hb-acc: #e8850c; --hb-acc-ink: #b45f06;
  --hb-tick: rgba(15, 23, 42, 0.2);
  --bh-ink: rgba(27, 34, 54, 0.28);
}
/* المسطرة المعمارية تحت الشريط (جوّه الحواف المدوّرة) */
.bh-ruler { left: 18px; right: 18px; height: 16px; }
.bh-ruler::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 6px; opacity: 0.85;
  background: repeating-linear-gradient(90deg, var(--hb-tick) 0 1px, transparent 1px 40px) 0 100% / 100% 6px no-repeat,
              repeating-linear-gradient(90deg, var(--hb-tick) 0 1px, transparent 1px 8px) 0 100% / 100% 3px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bh-ruler::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--hb-line); }
.bh-fill { z-index: 1; height: 2px; border-radius: 2px; background: var(--hb-scale); box-shadow: 0 0 10px rgba(255, 176, 74, 0.45); }
html[dir="rtl"] .bh-fill { background: var(--hb-scale-rtl); }
.bh-sq { z-index: 2; bottom: 1px; }
.bh-sq path { stroke: var(--hb-acc); }
.bh-sq path:first-child { fill: rgba(255, 196, 110, 0.32); }
.bh-a svg, .bh-b svg { stroke: var(--hb-acc); }
.bh-a, .bh-b { bottom: 4px; opacity: 0.9; }
.bh-win rect { fill: rgba(255, 176, 74, 0.3); }
/* شارة Api Key على الشريط */
[data-bh] .bh-api { background: var(--hb-chip); border-color: var(--hb-chip-line); color: var(--hb-ink); box-shadow: none; }
[data-bh] .bh-api:hover { background: var(--hb-chip-hover); border-color: rgba(34, 197, 94, 0.6); }

/* ---- عن Boh AI / فريقنا / Api Key: header.top ---- */
header.top[data-bh] {
  top: 10px; margin: 10px clamp(8px, 1.6vw, 18px) 0; border-radius: 18px;
  background: var(--hb-bg); border: 1px solid var(--hb-line); box-shadow: var(--hb-hi), var(--hb-shadow);
}
html[data-theme="light"] header.top[data-bh] { box-shadow: var(--hb-hi), var(--hb-shadow); }
header.top[data-bh] > .wrap { height: 62px; padding-bottom: 4px; padding-inline: clamp(12px, 2.2vw, 40px); }
header.top[data-bh] .nav { margin-inline-start: 10px; }
header.top[data-bh] .nav a, header.top[data-bh] .nav .nav-mb { color: var(--hb-ink-2); border-radius: 10px; padding-inline: 10px; }
header.top[data-bh] .nav a:hover, header.top[data-bh] .nav .nav-mb:hover { color: var(--hb-ink); background: var(--hb-hover); }
header.top[data-bh] .nav a.on { color: var(--hb-acc-ink); background: var(--hb-hover); box-shadow: inset 0 -2px 0 var(--hb-acc); }
header.top[data-bh] .btn:not(.pri) { background: var(--hb-chip); border-color: var(--hb-chip-line); color: var(--hb-ink); box-shadow: none; }
header.top[data-bh] .btn:not(.pri):hover { background: var(--hb-chip-hover); border-color: color-mix(in srgb, var(--hb-acc) 60%, transparent); color: var(--hb-ink); }
header.top[data-bh] .btn.pri { background: linear-gradient(135deg, #ffc46e, #f08a12 55%, #e07400); color: #1d1203; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 18px -10px rgba(232, 133, 12, 0.75); }
header.top[data-bh] .brand-tile { height: 44px; padding: 4px 12px 6px; border-radius: 12px; background: linear-gradient(180deg, #fffdf8, #f3ede2); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: inset 0 -2px 0 rgba(232, 133, 12, 0.75), 0 8px 18px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.06); }
html[data-theme="light"] header.top[data-bh] .brand-tile { box-shadow: inset 0 -2px 0 rgba(232, 133, 12, 0.75), 0 6px 14px -10px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(15, 23, 42, 0.08); }
header.top[data-bh] .brand-tile::before { top: 4px; inset-inline-start: 4px; width: 7px; height: 7px; border-color: rgba(40, 60, 110, 0.38); }
header.top[data-bh] .brand-tile::after { bottom: 5px; inset-inline-end: 4px; width: 7px; height: 7px; border-color: rgba(40, 60, 110, 0.38); }
header.top[data-bh] .brand, header.top[data-bh] .brand-tile { flex: none; }
header.top[data-bh] .brand-tile img { height: 32px; width: auto; max-width: none; border-radius: 0; }
header.top[data-bh] .nav-menu { border-radius: 14px; }
@media (max-width: 760px) {
  header.top[data-bh] { top: 6px; margin: 6px 8px 0; border-radius: 15px; }
  header.top[data-bh] > .wrap { height: 56px; padding-inline: 10px; gap: 8px; }
  header.top[data-bh] .brand-tile { height: 38px; padding: 3px 9px 5px; }
  header.top[data-bh] .brand-tile img { height: 27px; }
  .bh-ruler { left: 12px; right: 12px; }
}/* القوائم المنسدلة («المزيد») وقائمة الموبايل بنفس ألوان الشريط (كانت ورق كريمي) */
[data-bh] { --hb-menu: #1b2846; --hb-menu-item: rgba(255, 255, 255, 0.05); }
html[data-theme="light"] [data-bh] { --hb-menu: #ffffff; --hb-menu-item: #f6f8fb; }
header.top[data-bh] .more-btn { background: var(--hb-chip); border-color: var(--hb-chip-line); color: var(--hb-ink); }
header.top[data-bh] .more-btn:hover, header.top[data-bh] .more-btn.has-on { border-color: color-mix(in srgb, var(--hb-acc) 60%, transparent); color: var(--hb-acc-ink); }
header.top[data-bh] .more-menu, header.top[data-bh] .nav-menu { background: var(--hb-menu); border: 1px solid var(--hb-line); box-shadow: 0 26px 54px -20px rgba(2, 8, 24, 0.7); }
html[data-theme="light"] header.top[data-bh] .more-menu, html[data-theme="light"] header.top[data-bh] .nav-menu { box-shadow: 0 24px 50px -24px rgba(15, 23, 42, 0.35); }
header.top[data-bh] .more-menu::before { background: var(--hb-menu); border-color: var(--hb-line); }
header.top[data-bh] .more-menu a, header.top[data-bh] .nav .nav-menu a { color: var(--hb-ink-2); }
header.top[data-bh] .more-menu a:hover, header.top[data-bh] .more-menu a.on, header.top[data-bh] .nav .nav-menu a:hover { background: var(--hb-hover); color: var(--hb-ink); }
header.top[data-bh] .more-menu svg.i, header.top[data-bh] .sh-grid a svg.i { color: var(--hb-acc-ink); }
header.top[data-bh] .nav-more.open .nav-mb, header.top[data-bh] .nav-mb.on { background: var(--hb-hover); color: var(--hb-acc-ink); }
header.top[data-bh] .mm-moved:not(:empty) { border-bottom-color: var(--hb-line); }
header.top[data-bh] .sheet { top: calc(100% + 8px); border-radius: 16px; background: var(--hb-menu); border: 1px solid var(--hb-line); box-shadow: 0 30px 50px -24px rgba(2, 8, 24, 0.8); }
header.top[data-bh] .sh-grid a { background: var(--hb-menu-item); border-color: var(--hb-line); color: var(--hb-ink); }
header.top[data-bh] .sh-grid a.on { border-color: color-mix(in srgb, var(--hb-acc) 60%, transparent); color: var(--hb-acc-ink); }/* الموبايل الصغير: لوحة الاسم أصغر + زر اللغة أيقونة الكرة بس (كان اللوجو بيتكمش لـ 38px عشان يكفّي) */
@media (max-width: 480px) {
  header.top[data-bh] > .wrap { padding-inline: 8px; gap: 6px; }
  header.top[data-bh] .brand-tile { height: 34px; padding: 3px 7px 4px; border-radius: 10px; }
  header.top[data-bh] .brand-tile img { height: 24px; }
  header.top[data-bh] .brand-tile::before, header.top[data-bh] .brand-tile::after { display: none; }
  header.top[data-bh] .bh-api { padding: 0 8px; gap: 6px; font-size: .72rem; }
  header.top[data-bh] #langBtn { padding: 0 9px; }
  header.top[data-bh] #langBtn span { display: none; }
  header.top[data-bh] .top-r { gap: 6px; }
}@media (max-width: 360px) {
  header.top[data-bh] > .wrap, header.top[data-bh] .top-r { gap: 4px; }
  header.top[data-bh] .bh-api { padding: 0 6px; gap: 5px; font-size: .66rem; }
  header.top[data-bh] .btn.sm.pri { padding: 0 8px; font-size: .72rem; }
  header.top[data-bh] .brand-tile { padding: 3px 5px 4px; }
}
/* (76ب) اللوجو من غير لوحة + فاصل رفيع بعده · في الليلي النسخة الفضّي (خلفية على نفس الصورة — object-position بيخفي الأصلية) */
header.top[data-bh] .brand { padding-inline-end: 14px; margin-inline-end: 4px; border-inline-end: 1px solid var(--hb-line); border-radius: 0; }
header.top[data-bh] .brand-tile, html[data-theme="light"] header.top[data-bh] .brand-tile { height: 40px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
header.top[data-bh] .brand-tile::before, header.top[data-bh] .brand-tile::after { display: none; }
header.top[data-bh] .brand-tile img { height: 38px; transition: transform .2s ease; }
header.top[data-bh] .brand:hover .brand-tile img { transform: translateY(-1px) scale(1.03); }
html:not([data-theme="light"]) header.top[data-bh] .brand-tile img { object-position: -9999px 0; background: url(logo-boh-dark.png) center / contain no-repeat; }
@media (max-width: 760px) { header.top[data-bh] .brand-tile, html[data-theme="light"] header.top[data-bh] .brand-tile { height: 34px; padding: 0; } header.top[data-bh] .brand-tile img { height: 32px; } }
@media (max-width: 480px) { header.top[data-bh] .brand { padding-inline-end: 8px; margin-inline-end: 0; } header.top[data-bh] .brand-tile, html[data-theme="light"] header.top[data-bh] .brand-tile { height: 30px; padding: 0; } header.top[data-bh] .brand-tile img { height: 28px; } }
@media (max-width: 360px) { header.top[data-bh] .brand-tile img { height: 25px; } }
/* (76ج) اللوجو أوضح: أكبر + إضاءة/تباين + في الليلي توهّج دافي خفيف (نفس الرئيسية — style.css v4.80 آخره) */
header.top[data-bh] .brand-tile img { filter: brightness(1.05) contrast(1.12) saturate(1.15); }
html:not([data-theme="light"]) header.top[data-bh] .brand-tile img { filter: brightness(1.18) contrast(1.1) saturate(1.15) drop-shadow(0 0 10px rgba(255, 160, 60, 0.3)); }
@media (min-width: 1181px) { header.top[data-bh] .brand-tile, html[data-theme="light"] header.top[data-bh] .brand-tile { height: 48px; } header.top[data-bh] .brand-tile img { height: 46px; } }
@media (min-width: 761px) and (max-width: 1180px) { header.top[data-bh] .brand-tile, html[data-theme="light"] header.top[data-bh] .brand-tile { height: 44px; } header.top[data-bh] .brand-tile img { height: 42px; } }
/* (76د) نفس الرئيسية: لوجو منضّف + توهّج أخف + ظل صغير تحته */
html:not([data-theme="light"]) header.top[data-bh] .brand-tile img { filter: brightness(1.14) contrast(1.08) saturate(1.12) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 8px rgba(255, 160, 60, 0.16)); }
html[data-theme="light"] header.top[data-bh] .brand-tile img { filter: contrast(1.08) saturate(1.1) drop-shadow(0 2px 2px rgba(15, 23, 42, 0.16)); }