/*
 * هيدر موحد لكل الصفحات (الأدمن وحساب العميل وأدوات الراوتر): شريط متدرج بحواف سفلية مستديرة، وزر رجوع دائري، وعنوان أبيض.
 *
 * ⚠ يطبق على البنيتين الموجودتين: .topbar (الأدمن وأدوات الراوتر) و.page-head (حساب العميل)، فلا يعدل ملف صفحة بصفحة.
 * ⚠ الشريط يمتد بعرض الشاشة كلها خلف الهيدر (100vw من المنتصف) مهما كان عرض الغلاف، فلا يتأثر بحشوه.
 * ⚠ يستثنى الرئيسية والدردشة (لهما هيرو خاص؛ والرئيسيات الثلاث تأخذ بطاقة الملخص العائمة في صفحاتها نفسها)، والرئيسية للراوتر (mt-home: تبقى كما كانت)، وصفحات sub-page (فيها هيرو متدرج مثله).
 * ⚠ وأي سطر تلميح فارغ يختفي (بعد حذف نصوص التعليمات من الموقع).
 */
body { overflow-x: clip; }

/*
 * ⚠ v283: هيرو موحد لكل الصفحات الداخلية - نفس هيرو الموزعين والتقارير (page-hero.css): تدرج بدوائر شفافة وحواف سفلية 34 وأزرار زجاجية 40 وعنوان 22/800.
 * ⚠ كل أنواع الهيدر في الموقع تأخذه من هنا: .topbar وصفحات الحساب .page-head (أدناه)، ثم pc-bar (الأسئلة والتعليمات) وwn-hd (دمج الخطوط) وpkh (الباقات) وah (الأنتينات)
 *   وsb-hd (الاشتراك) وrs-head (تركيب النظام) وacc-bar (شريط صفحات الحساب) في آخر الملف. وقواعد غير topbar بـ«html body» لتغلب أنماط الصفحة الداخلية مهما كان ترتيب التحميل.
 * ⚠ --hb: خلفية الهيرو (دائرتان وتدرج). الفاتح كما في page-hero.css (--fx-hero1/2) والداكن مثله (الافتراضي حين لا data-theme=light).
 */
:root { --hb: radial-gradient(circle at 100% 0, rgba(255, 255, 255, .10) 0 120px, transparent 121px), radial-gradient(circle at 0 100%, rgba(255, 255, 255, .08) 0 110px, transparent 111px), linear-gradient(160deg, #2a5bc0, #4d88f2); }
html:not([data-theme="light"]) { --hb: radial-gradient(circle at 100% 0, rgba(255, 255, 255, .07) 0 120px, transparent 121px), radial-gradient(circle at 0 100%, rgba(255, 255, 255, .05) 0 110px, transparent 111px), linear-gradient(160deg, #14245a, #2a55b4); }

/*
 * ⚠ هيدر الصفحات الداخلية = هيدر pc-bar (الأسئلة الشائعة): ارتفاع 64، العنوان 16px/700 جهة البداية، وسهم الرجوع ← في دائرة 32px جهة النهاية. بلا لوجو.
 * ⚠ الصفحات الرئيسية لا تدخل هنا: view-dash (الأدمن) وview-chat وmt-home (الراوتر) وsub-page، وحساب العميل الرئيسي لا يستعمل .page-head.
 * ⚠ margin-top السالب يرفع الشريط فوق حشو الصفحة العلوي (18-20) فتصير حافته السفلى عند 64 مثل pc-bar، والتدرج نفسه يمتد خلفه بعرض الشاشة (::before).
 * ⚠ ويضاف اليه safe-area-inset-top (نتوء الايفون) كما في fonts.css، وإلا دخل الشريط تحت النتوء. و«html body .page-head.page-head» ليتغلب على قواعد fonts.css (body .page-head:first-child وbody > .page-head).
 *   وبقية الصفحة تبقى بعد الشريط بهامشه السفلي كما كانت.
 */
body:not(.view-dash):not(.view-chat):not(.sub-page):not(.mt-home) .topbar,
html body .page-head.page-head {
    position: relative; isolation: isolate;
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    box-sizing: border-box; height: auto; min-height: 112px; padding: 22px 2px 44px; margin-top: calc(env(safe-area-inset-top, 0px) - 18px); margin-bottom: 14px;
}

body:not(.view-dash):not(.view-chat):not(.sub-page):not(.mt-home) .topbar::before,
body .page-head::before {
    content: ""; position: absolute; z-index: -1; top: -90px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
    background: var(--hb);
    border-radius: 0 0 34px 34px; box-shadow: 0 10px 26px rgba(20, 36, 90, .22);
}

/* العنوان: مباشرة في الشريط أو داخل div (مع عداد/شارة تحته) */
body:not(.view-dash):not(.view-chat):not(.sub-page):not(.mt-home) .topbar h1,
body .page-head h1 {
    flex: 1; min-width: 0; order: 1; margin: 0; padding: 0; text-align: start;
    color: #fff; font-size: 22px; font-weight: 800; line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
body:not(.view-dash):not(.view-chat):not(.sub-page):not(.mt-home) .topbar > div:not(.topbar-actions) { flex: 1; min-width: 0; order: 1; }
body:not(.view-dash):not(.view-chat):not(.sub-page):not(.mt-home) .topbar > div:not(.topbar-actions) h1 { flex: none; }

/* سهم الرجوع: ← مرسوم بقناع (يغني عن تعديل svg كل صفحة)، يعكس في الانجليزية مثل .pc-bk */
body:not(.view-dash):not(.view-chat):not(.sub-page):not(.mt-home) .topbar .back-btn,
body .page-head .back-btn {
    order: 2; position: relative; flex: 0 0 40px; width: 40px; height: 40px; margin: 0; padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 14px; text-decoration: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.18);
}
body:not(.view-dash):not(.view-chat):not(.sub-page):not(.mt-home) .topbar .back-btn svg,
body .page-head .back-btn svg { display: none; }
body:not(.view-dash):not(.view-chat):not(.sub-page):not(.mt-home) .topbar .back-btn::before,
body .page-head .back-btn::before {
    content: ""; width: 19px; height: 19px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 5 5 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 5 5 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}
[dir="ltr"] body .page-head .back-btn::before,
[dir="ltr"] body:not(.view-dash):not(.view-chat):not(.sub-page):not(.mt-home) .topbar .back-btn::before { transform: scaleX(-1); }

body:not(.view-dash):not(.view-chat):not(.sub-page):not(.mt-home) .topbar .icon-btn { width: 40px; height: 40px; border-radius: 14px; color: #fff; background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.32); }

/*
 * ⚠ بقية أنواع الهيدر (انظر أعلى الملف).
 * pc-bar: كان مثبتا بارتفاع 64، والآن في سياق الصفحة بارتفاع الهيرو (لا يلتصق عند التمرير). wn-hd مثله.
 */
html body .pc-bar, html body .wn-hd {
    position: relative; top: auto; height: auto; min-height: 112px;
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 16px 44px; margin-bottom: 14px;
    border-radius: 0 0 34px 34px; background: var(--hb); box-shadow: 0 10px 26px rgba(20, 36, 90, .22);
}
html body .pc-ttl .pc-t, html body .wn-ttl .wn-t { font-size: 22px; font-weight: 800; }
html body .pc-ttl .pc-t.s1 { font-size: 19px; } html body .pc-ttl .pc-t.s2 { font-size: 17px; } html body .pc-ttl .pc-t.s3 { font-size: 15px; }
html body .pc-ttl .pc-s, html body .wn-ttl .wn-s { font-size: 12.5px; }
html body .pc-bk, html body .wn-bk { width: 40px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .32); }
html body .pc-bk svg, html body .wn-bk svg { width: 19px; height: 19px; }

/* الباقات والأنتينات: الهيرو بنفس الشكل، وما تحته (الأرقام/الأزرار) كما هو */
html body .pkh, html body .ah { border-radius: 0 0 34px 34px; background: var(--hb); box-shadow: 0 10px 26px rgba(20, 36, 90, .22); }
html body .pkh-top { padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 36px; }
html body .ah-top { padding: calc(22px + env(safe-area-inset-top, 0px)) 18px 0; }
html body .pkh-t, html body .ah-t { font-size: 22px; font-weight: 800; }
html body .pkh-back, html body .ah-back { width: 40px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .32); }
html body .ah-rf { width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .32); }

/* الاشتراك */
html body .sb-hd { border-radius: 0 0 34px 34px; background: var(--hb); box-shadow: 0 10px 26px rgba(20, 36, 90, .22); padding-top: calc(22px + env(safe-area-inset-top, 0px)); }
html body .sb-ttl b { font-size: 22px; font-weight: 800; }

/* تركيب النظام وشريط صفحات الحساب: ليس لهما خلفية، فنرسمها بنفس طريقة .topbar (عرض الشاشة كله خلفهما) */
html body .rs-head, html body .acc-bar { position: relative; isolation: isolate; padding: 22px 2px 40px; margin: -18px 0 14px; }
html body .rs-head::before, html body .acc-bar::before {
    content: ""; position: absolute; z-index: -1; top: -90px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
    border-radius: 0 0 34px 34px; background: var(--hb); box-shadow: 0 10px 26px rgba(20, 36, 90, .22);
}
html body .rs-tt h1 { color: #fff; font-size: 22px; font-weight: 800; }
html body .rs-tt span { color: rgba(255, 255, 255, .82); }
html body .rs-back { width: 40px; height: 40px; color: #fff; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .32); }
html body .acc-logo { color: #fff; }
html body .acc-logo img { filter: brightness(0) invert(1); }
html body .acc-avatar { color: #fff; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .32); }

.hint:empty, [class*="-hint"]:empty, [class*="_hint"]:empty, [class$="-note"]:empty, p.note:empty, small:empty { display: none; }