/* ============================================================
   الخزامى الزجاجي (معتمد 2026-09-25، المعاينة «أ» اللامع): طبقة زجاج على العناصر الخزامية نفسها:
   لمعة علوية، وحافة ضوء بيضاء، وتوهّج ناعم؛ والخلفية بيضاء كما هي، والشريطان العلوي والجانبي زجاج أبيض ضبابي.
   يُحمَّل بعد portal.css وlanding.css في layouts/base.blade.php ليعلو عليهما.
   ============================================================ */
:root {
    --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 46%, rgba(255, 255, 255, 0) 52%);
    --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(20, 8, 40, .12);
    --glass-glow: 0 10px 26px -12px rgba(83, 50, 127, .55);
}

/* الأزرار الخزامية */
.btn-primary, .top-new, .lx-btn:not(.lx-btn-o):not(.lx-btn-gold):not(.lx-btn-line), .lx-seg button.on {
    background: var(--glass-sheen), var(--oud-btn);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: var(--glass-rim), var(--glass-glow);
    text-shadow: 0 1px 1px rgba(20, 8, 40, .18);
}
.btn-primary:hover, .top-new:hover, .lx-btn:not(.lx-btn-o):not(.lx-btn-gold):not(.lx-btn-line):hover {
    background: var(--glass-sheen), linear-gradient(135deg, #5d3a8d 0%, #8c70c6 100%);
    box-shadow: var(--glass-rim), 0 14px 30px -12px rgba(83, 50, 127, .65);
    filter: none;
}
.btn-light, .lx-btn-o { box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(69, 41, 111, .06); }

/* العنصر النشط في القوائم: زجاج خزامي شفاف */
.nav-link.on, .hp-nav button.on {
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .25)), rgba(122, 82, 179, .13);
    color: var(--brand);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(122, 82, 179, .2), 0 6px 18px -10px rgba(99, 60, 148, .45);
    backdrop-filter: blur(10px);
}
.nav-link.on .i, .hp-nav button.on .i { color: var(--brand); }
.tabs .on::after { background: var(--oud-btn); height: 3px; border-radius: 3px 3px 0 0; box-shadow: 0 0 10px rgba(122, 82, 179, .45); }
.seg .on { box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(69, 41, 111, .12), 0 0 0 1px rgba(122, 82, 179, .18); color: var(--brand); }

/* الشرائط والأيقونات والشارات */
.pbar > span, .bar > span { background-image: var(--glass-sheen), linear-gradient(90deg, #53327f, #8062b8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.pbar.ok > span { background-image: var(--glass-sheen), linear-gradient(90deg, #1f9d62, #37b97a); }
.qa .qa-ico, .flow-steps li.on .fs-dot, .count.hot, .plan-tag, .lx-tag, .chip.on {
    background: var(--glass-sheen), var(--oud-btn); color: #fff; border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: var(--glass-rim), 0 6px 14px -8px rgba(83, 50, 127, .6);
}
.lx-steps li::before { background: var(--glass-sheen), var(--oud-btn); box-shadow: var(--glass-rim), 0 6px 14px -8px rgba(83, 50, 127, .6); }
.plan.pop { border-color: rgba(122, 82, 179, .45); box-shadow: 0 0 0 1px rgba(122, 82, 179, .35), 0 24px 50px -30px rgba(83, 50, 127, .55); }
.pay-opt.on { background: linear-gradient(180deg, #fff, #fbf8fe); box-shadow: 0 0 0 1px var(--primary), 0 8px 20px -14px rgba(83, 50, 127, .5); }

/* الشريط العلوي والجانبي: زجاج أبيض */
.topbar { background: rgba(255, 255, 255, .7); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); }
.side { background: linear-gradient(180deg, rgba(252, 250, 255, .92), rgba(248, 245, 253, .92)); }
.s-nav, .s-nav.solid { background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); }

/* شريط الدعوة في الموقع: اللمعة طبقة في الخلفية نفسها، فتبقى الشبكة بعُقدها (::after في landing.css) كما هي */
.lx-cta {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%),
        radial-gradient(520px 320px at 8% 50%, rgba(var(--brand-glow), .38), transparent 70%),
        radial-gradient(420px 260px at 100% 0%, rgba(110, 70, 170, .45), transparent 70%),
        var(--oud-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 30px 60px -44px rgba(52, 30, 90, .7);
}

/* ============================================================
   داخل اللوحات (العميل والإدارة، body.panel من layouts/app) 09-25 بطلب المالك قبل تجربة الشراء:
   القائمة الجانبية بيضاء تماماً، والأزرار والعناصر الخزامية مسطحة بلا لمعة ولا حافة ضوء ولا توهّج، والخزامى أغمق قليلاً.
   الموقع العام وصفحات الدخول باقية على الزجاج اللامع أعلاه.
   المشتقات (--primary و--teal…) تُعاد هنا لأن var() يُحسب حيث يُعرَّف المتغير (:root) فلا يرث اللون الجديد وحده.
   ============================================================ */
body.panel {
    --brand: #54307e;
    --brand-h: #43266a;
    --brand-hi: #683f9f;
    --accent: #5d3890;
    --accent-h: #4a2c75;
    --oud-btn: var(--brand);
    --primary: var(--brand);
    --primary-h: var(--brand-h);
    --teal: var(--accent);
    --teal-h: var(--accent-h);
    --teal-t: var(--accent);
    --grad: var(--primary);
}
body.panel .side { background: #fff; }

/* الأزرار: لون واحد مسطح */
body.panel .btn-primary, body.panel .top-new {
    background: var(--brand); border: 1px solid var(--brand); box-shadow: none; text-shadow: none;
}
body.panel .btn-primary:hover, body.panel .top-new:hover { background: var(--brand-h); border-color: var(--brand-h); box-shadow: none; }
body.panel .btn-light { box-shadow: none; }

/* القوائم والتبويبات: خلفية خزامية فاتحة بلا زجاج */
body.panel .nav-link.on, body.panel .hp-nav button.on {
    background: var(--brand-soft); color: var(--brand); font-weight: 600; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.panel .tabs .on::after { background: var(--brand); height: 2px; border-radius: 2px 2px 0 0; box-shadow: none; }
body.panel .seg .on { box-shadow: 0 1px 2px rgba(17, 17, 19, .08), 0 0 0 1px var(--line); color: var(--brand); }

/* الشرائط والأيقونات والشارات */
body.panel .pbar > span, body.panel .bar > span { background: var(--brand); box-shadow: none; }
body.panel .pbar.ok > span { background: var(--ok); }
body.panel .pbar.bad > span { background: var(--bad); }
body.panel .qa .qa-ico { background: var(--brand-soft); color: var(--brand); border: 0; box-shadow: none; }
body.panel .flow-steps li.on .fs-dot, body.panel .count.hot, body.panel .plan-tag, body.panel .chip.on {
    background: var(--brand); color: #fff; border: 1px solid var(--brand); box-shadow: none;
}
body.panel .plan.pop { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
body.panel .pay-opt.on { background: #fcfaff; box-shadow: 0 0 0 1px var(--brand); }

/* 09-25 مساءً بطلب المالك («الأيقونات أحسها غير رسمية»): لا أيقونات زخرفية داخل اللوحات ولا صفحات الدخول.
   تبقى أيقونات الأدوات فقط: البحث والجرس والإغلاق والأسهم وإظهار كلمة المرور وعلامات الإنجاز (ck-dot/fs-dot) وتنبيهات الحالة (a-ico، modal-ico.bad/warn).
   حجب بالـCSS لا بحذف الوسوم حتى يسهل التراجع إن عاد إليها. */
body.panel .ico-box, body.panel .nav-link .i, body.panel .dd-item .i, body.panel .dd-ico, body.panel .tabs .i,
body.panel .btn:not(.btn-icon) .i, body.panel .card-title .i, body.panel .kv-k .i, body.panel .stat-ico, body.panel .empty-ico,
body.panel .cmdk-item .i, body.panel .hp-nav .i, body.panel .qa-ico, body.panel .help > .i, body.panel .howto summary > .i, body.panel .pill .i,
body.panel .plan-ico, body.panel .incl-ico, body.panel .opt-ico, body.panel .side-help .i, body.panel .sec-intro .i,
body.panel .launch-head .i, body.panel .modal-head .modal-ico:not(.bad):not(.warn), body.panel .auth-points .ico-box,
body.panel .lb-ico, body.panel .list > * > .i:first-child { display: none !important; }
body.panel .opt-more { padding-inline-start: 42px; }
/* بلا أيقونات: نص القائمة الجانبية يبتعد عن الحافة قليلاً (كان 10px مع الأيقونة) */
body.panel .nav-link { padding: 0 16px; height: 38px; }
body.panel .nav-label { padding-inline: 16px; }
/* زر «إجراء» في الشريط العلوي: الجوال كان يخفي نصه ليبقى + وحده، والأيقونة محجوبة هنا فيظهر مربعاً فارغاً ⇒ يبقى النص */
@media (max-width: 720px) {
    body.panel .top-new span { display: inline; }
    body.panel .top-new { width: auto; padding: 0 12px; }
}

/* ============================================================
   الموقع العام (body.site) 09-27 بطلب المالك («بدون لمعة، وغامق الخزامى أفضل»): مثل اللوحات تماماً:
   خزامى غامق مسطح بلا لمعة ولا حافة ضوء ولا توهّج ولا خط مسح. تبقى أيقونات الصفحة والشبكة الخافتة، والذهبي لمسةً مسطحة.
   ============================================================ */
body.site {
    --brand: #54307e;
    --brand-h: #43266a;
    --brand-hi: #683f9f;
    --accent: #5d3890;
    --accent-h: #4a2c75;
    --oud-btn: var(--brand);
    --oud-grad: #3a2160;
    --primary: var(--brand);
    --primary-h: var(--brand-h);
    --teal: var(--accent);
    --teal-h: var(--accent-h);
    --teal-t: var(--accent);
    --grad: var(--primary);
    --gold-line: var(--brand);
}
body.site .btn-primary, body.site .top-new, body.site .lx-btn:not(.lx-btn-o):not(.lx-btn-gold):not(.lx-btn-line), body.site .lx-seg button.on {
    background: var(--brand); border: 1px solid var(--brand); box-shadow: none; text-shadow: none;
}
body.site .btn-primary:hover, body.site .top-new:hover, body.site .lx-btn:not(.lx-btn-o):not(.lx-btn-gold):not(.lx-btn-line):hover {
    background: var(--brand-h); border-color: var(--brand-h); box-shadow: none; filter: none;
}
body.site .btn-light, body.site .lx-btn-o { box-shadow: none; }
body.site .lx-btn-gold { background: var(--gold); border-color: var(--gold); color: #24143d; box-shadow: none; }
body.site .lx-btn-gold:hover { background: #b98f4a; border-color: #b98f4a; filter: none; }
body.site .nav-link.on, body.site .hp-nav button.on { background: var(--brand-soft); color: var(--brand); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.site .tabs .on::after { background: var(--brand); height: 2px; box-shadow: none; }
body.site .seg .on { box-shadow: 0 1px 2px rgba(17, 17, 19, .08), 0 0 0 1px var(--line); color: var(--brand); }
body.site .pbar > span, body.site .bar > span { background: var(--brand); box-shadow: none; }
body.site .qa .qa-ico, body.site .flow-steps li.on .fs-dot, body.site .count.hot, body.site .plan-tag, body.site .lx-tag, body.site .chip.on {
    background: var(--brand); border: 1px solid var(--brand); box-shadow: none;
}
body.site .lx-steps li::before { background: var(--brand); box-shadow: none; }
body.site .plan.pop { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 24px 50px -34px rgba(58, 33, 96, .45); }
body.site .lx-server.pop { background: #fff; border: 1.5px solid var(--brand); box-shadow: 0 24px 50px -34px rgba(58, 33, 96, .45); }
body.site .lx-ico { background: var(--brand-soft); box-shadow: none; }
body.site .lx-band, body.site .lx-cta { background: var(--oud-grad); box-shadow: 0 24px 50px -40px rgba(42, 24, 70, .55); }
body.site .lx-band::before, body.site .lx-cta::before { background: var(--gold); opacity: .75; animation: none; }
body.site .ksa-ryd circle { stroke: var(--brand-hi); }
body.site .ksa-dots circle { fill: #d6c8e8; }