/* Liquid Glass — طبقة شكل فوق admin.css / theme.css / brand.css / ops.css للادمن وحساب العميل وصفحات الدخول.
   الاسطح بقت زجاج شفاف بحافة مضيئة فوق خلفية ملونة هادية. مابتغيرش اي مقاسات ولا ترتيب — شكل بس.
   البلور (backdrop-filter) على الحاجات العايمة/الثابتة بس (سايد بار، شرايط، قوايم، ديالوج) عشان الصفحات التقيلة تفضل سريعة. */

:root {
  --radius: 22px;
  --radius-sm: 14px;
  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .40));
  --glass-bg-strong: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .62));
  --glass-tint: rgba(255, 255, 255, .46);
  --glass-brd: rgba(255, 255, 255, .78);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .28), inset 1px 0 0 rgba(255, 255, 255, .35), inset -1px 0 0 rgba(255, 255, 255, .35);
  --glass-drop: 0 1px 2px rgba(16, 40, 32, .05), 0 18px 40px -22px rgba(16, 40, 32, .32);
  --glass-shadow: var(--glass-edge), var(--glass-drop);
  --glass-filter: blur(22px) saturate(175%);
  --glass-field: rgba(255, 255, 255, .52);
  --glass-hair: rgba(18, 44, 36, .10);
  --line: rgba(18, 44, 36, .09);
  --line-2: rgba(18, 44, 36, .06);
  --line-strong: rgba(18, 44, 36, .15);
  --surface-hover: rgba(255, 255, 255, .58);
  --surface-active: rgba(255, 255, 255, .8);
  --shadow-sm: var(--glass-drop);
  --focus: 0 0 0 3px rgba(17, 177, 89, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
}
html[data-theme="dark"] {
  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
  --glass-bg-strong: linear-gradient(145deg, rgba(34, 44, 50, .86), rgba(22, 30, 35, .78));
  --glass-tint: rgba(255, 255, 255, .06);
  --glass-brd: rgba(255, 255, 255, .13);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 1px 0 0 rgba(255, 255, 255, .05), inset -1px 0 0 rgba(255, 255, 255, .05);
  --glass-drop: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 44px -24px rgba(0, 0, 0, .8);
  --glass-filter: blur(24px) saturate(160%);
  --glass-field: rgba(0, 0, 0, .26);
  --glass-hair: rgba(255, 255, 255, .10);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .16);
  --surface-hover: rgba(255, 255, 255, .08);
  --surface-active: rgba(255, 255, 255, .13);
  --focus: 0 0 0 3px rgba(43, 212, 122, .26), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ---------------------------------------------------------------- الخلفية: الوان هادية الزجاج يبان عليها */
html { background: #eaf3ee; }
html body {
  background:
    radial-gradient(900px 620px at 88% -8%, rgba(43, 212, 127, .30), transparent 62%),
    radial-gradient(760px 560px at 4% 12%, rgba(96, 178, 255, .24), transparent 60%),
    radial-gradient(820px 600px at 62% 108%, rgba(160, 132, 255, .20), transparent 62%),
    radial-gradient(640px 480px at 18% 92%, rgba(255, 196, 120, .18), transparent 60%),
    #eaf3ee !important;
  background-attachment: fixed !important;
}
html[data-theme="dark"] { background: #090d0c; }
html[data-theme="dark"] body {
  background:
    radial-gradient(900px 620px at 88% -8%, rgba(25, 196, 106, .26), transparent 62%),
    radial-gradient(760px 560px at 4% 12%, rgba(64, 120, 232, .22), transparent 60%),
    radial-gradient(820px 600px at 62% 108%, rgba(128, 92, 230, .20), transparent 62%),
    radial-gradient(640px 480px at 18% 92%, rgba(224, 140, 60, .10), transparent 60%),
    #090d0c !important;
  background-attachment: fixed !important;
}
/* الموبايل: الخلفية الثابتة بتتقل السكرول */
@media (max-width: 900px) { html body, html[data-theme="dark"] body { background-attachment: scroll !important; } }

/* ---------------------------------------------------------------- الواح الزجاج (كروت ومربعات) */
html :is(.card, .stat, .quota-strip .q, .fx-card, .dh-kpi, .dh-panel, .nb-card, .dh-range,
         .an-kpi, .an-minis, .an-stat2, .of-stat, .of-tpl, .of-step, .of-gcard, .of-kpi, .of-flowstat, .of-msg, .of-connect,
         .ml-row, .ml-empty, .rc-row, .auth, .notice, .sb-user),
html[data-theme="dark"] :is(.card, .stat, .quota-strip .q, .fx-card, .dh-kpi, .dh-panel, .nb-card, .dh-range,
         .an-kpi, .an-minis, .an-stat2, .of-stat, .of-tpl, .of-step, .of-gcard, .of-kpi, .of-flowstat, .of-msg, .of-connect,
         .ml-row, .ml-empty, .rc-row, .auth, .notice, .sb-user) {
  background: var(--glass-bg);
  border-color: var(--glass-brd);
  box-shadow: var(--glass-shadow);
}
html :is(.card, .stat, .dh-kpi, .dh-panel, .nb-card, .an-kpi, .an-stat2, .of-stat, .of-gcard, .of-kpi, .auth) { border-radius: var(--radius); }
html .stat:hover, html .dh-kpi:hover, html .nb-card:hover { box-shadow: var(--glass-edge), 0 2px 4px rgba(16, 40, 32, .06), 0 26px 48px -22px rgba(16, 40, 32, .4); }

/* كارت جوه كارت: طبقة اخف من غير ظل تقيل */
html :is(.card, .dh-panel) :is(.card, .stat, .notice, .ml-row, .rc-row, .of-stat, .of-step, .of-msg),
html[data-theme="dark"] :is(.card, .dh-panel) :is(.card, .stat, .notice, .ml-row, .rc-row, .of-stat, .of-step, .of-msg) {
  background: var(--glass-tint); box-shadow: var(--glass-edge);
}
html .card-head, html .sb-foot { border-color: var(--line); }

/* ---------------------------------------------------------------- العايم والثابت: زجاج ببلور حقيقي */
html :is(.sidebar, .mobile-bar, .topbar, .ws-strip, .tabbar, .ib-upbar, .menu > div, .dh-rp, .fc-tip),
html[data-theme="dark"] :is(.sidebar, .mobile-bar, .topbar, .ws-strip, .tabbar, .ib-upbar, .menu > div, .dh-rp, .fc-tip) {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border-color: var(--glass-brd);
  box-shadow: var(--glass-shadow);
}
/* القوايم والنوافذ فوق كلام: زجاج اتقل عشان الكلام اللي تحتها مايتلخبطش معاها */
html :is(dialog, .menu > div, .dh-rp, .fc-tip),
html[data-theme="dark"] :is(dialog, .menu > div, .dh-rp, .fc-tip) {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-edge), 0 30px 70px -28px rgba(10, 24, 20, .55);
}
html dialog { border-radius: 26px; }
html dialog::backdrop { background: rgba(12, 22, 18, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html .ws-strip, html[data-theme="dark"] .ws-strip { box-shadow: none; border-bottom: 1px solid var(--glass-brd); }
html .mobile-bar, html[data-theme="dark"] .mobile-bar { box-shadow: none; }
html .ws-tab[data-active='true'], html[data-theme="dark"] .ws-tab[data-active='true'] {
  background: var(--glass-bg-strong); border-color: var(--glass-brd); box-shadow: var(--glass-edge), 0 10px 20px -12px rgba(16, 40, 32, .35);
}
html .ws-tab:hover { background: var(--glass-tint); border-color: var(--glass-brd); }

/* ---------------------------------------------------------------- السايد بار */
html .nav-item:hover { background: var(--glass-tint) !important; }
html .nav-item.active, html[data-theme="dark"] .nav-item.active {
  background: linear-gradient(145deg, color-mix(in srgb, var(--teal) 20%, transparent), color-mix(in srgb, var(--teal) 9%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px color-mix(in srgb, var(--teal) 24%, transparent) !important;
}
html[data-theme="dark"] .nav-item.active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px color-mix(in srgb, var(--teal) 30%, transparent) !important; }
html .sb-user > .icon-btn, html .sb-user > a.icon-btn,
html[data-theme="dark"] .sb-user > .icon-btn, html[data-theme="dark"] .sb-user > a.icon-btn {
  background: var(--glass-tint); border-color: var(--glass-brd); box-shadow: var(--glass-edge);
}
html .icon-btn:hover { background: var(--glass-tint); }

/* ---------------------------------------------------------------- الازرار: كبسولة زجاج */
html body:not(.inbox-page) .btn, html[data-theme="dark"] body:not(.inbox-page) .btn {
  border-radius: 999px;
  background: var(--glass-bg);
  border-color: var(--glass-brd);
  box-shadow: var(--glass-edge), 0 0 0 1px var(--glass-hair), 0 8px 18px -14px rgba(16, 40, 32, .45);
}
html body:not(.inbox-page) .btn:hover, html[data-theme="dark"] body:not(.inbox-page) .btn:hover { background: var(--glass-bg-strong); }
html body:not(.inbox-page) .btn.sm { border-radius: 999px; }
html body:not(.inbox-page) .btn.primary, html[data-theme="dark"] body:not(.inbox-page) .btn.primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, #2bd47f, #0c8f47) !important;
  border-color: rgba(255, 255, 255, .38); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .10), 0 12px 24px -12px rgba(18, 168, 90, .7);
}
html body:not(.inbox-page) .btn.primary:hover, html[data-theme="dark"] body:not(.inbox-page) .btn.primary:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, #2bd47f, #0c8f47) !important;
}
html body:not(.inbox-page) .btn.dark, html[data-theme="dark"] body:not(.inbox-page) .btn.dark {
  background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 52%), rgba(22, 28, 32, .86);
  border-color: rgba(255, 255, 255, .18); color: #fff;
}
html body:not(.inbox-page) .btn.danger, html[data-theme="dark"] body:not(.inbox-page) .btn.danger {
  background: linear-gradient(145deg, color-mix(in srgb, var(--red) 16%, transparent), color-mix(in srgb, var(--red) 7%, transparent));
  border-color: color-mix(in srgb, var(--red) 28%, transparent); color: var(--red);
}
html body:not(.inbox-page) .btn.ghost, html[data-theme="dark"] body:not(.inbox-page) .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
html body:not(.inbox-page) .btn.ghost:hover, html[data-theme="dark"] body:not(.inbox-page) .btn.ghost:hover { background: var(--glass-tint); }
html body:not(.inbox-page) .btn.copied { background: var(--teal-soft); border-color: var(--teal); }

/* ---------------------------------------------------------------- المدخلات */
html body:not(.inbox-page) :is(input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=date],
         input[type=search], input[type=tel], input[type=time], input[type=datetime-local], select, textarea),
html[data-theme="dark"] body:not(.inbox-page) :is(input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=date],
         input[type=search], input[type=tel], input[type=time], input[type=datetime-local], select, textarea) {
  background: var(--glass-field);
  border-color: var(--glass-brd);
  box-shadow: inset 0 1px 2px rgba(16, 40, 32, .07), 0 0 0 1px var(--glass-hair);
  border-radius: var(--radius-sm);
}
html body:not(.inbox-page) :is(input, select, textarea):focus, html[data-theme="dark"] body:not(.inbox-page) :is(input, select, textarea):focus { border-color: var(--teal); box-shadow: var(--focus); }
html select option { background: #fff; color: #161a20; }
html[data-theme="dark"] select option { background: #161b21; color: #f1f4f7; }
html :is(.secret-box, pre), html[data-theme="dark"] :is(.secret-box, pre) { background: var(--glass-field); border-color: var(--glass-brd); }

/* ---------------------------------------------------------------- الجداول والتابات والشارات */
html thead th, html[data-theme="dark"] thead th { background: var(--glass-tint) !important; border-color: var(--line); }
html tbody tr:hover, html[data-theme="dark"] tbody tr:hover { background: transparent; }
html tbody tr:hover td, html[data-theme="dark"] tbody tr:hover td { background: var(--glass-tint); }
html table.rt tr, html[data-theme="dark"] table.rt tr { background: var(--glass-bg); }
html .badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .22); }
html[data-theme="dark"] .badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10); }
html .alert, html[data-theme="dark"] .alert { box-shadow: var(--glass-edge); }
html .alert { border-radius: 18px; }
html .meter { background: var(--glass-hair); }
html .avatar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
html .menu > summary, html[data-theme="dark"] .menu > summary,
html .sb-toggle, html[data-theme="dark"] .sb-toggle { background: var(--glass-bg); border-color: var(--glass-brd); box-shadow: var(--glass-edge); }

/* الالوان البيضا المكتوبة جوه الصفحات (style="background:#fff") */
html:not([data-theme="dark"]) [style*="background:#fff"]:not(img):not(.qr-thumb),
html:not([data-theme="dark"]) [style*="background: #fff"]:not(img):not(.qr-thumb),
html:not([data-theme="dark"]) [style*="background:var(--surface)"],
html:not([data-theme="dark"]) [style*="background: var(--surface)"] { background: var(--glass-tint) !important; }
html[data-theme="dark"] [style*="background:var(--surface)"],
html[data-theme="dark"] [style*="background: var(--surface)"] { background: var(--glass-tint) !important; }

/* اللي مفضل شفافية اقل (اعدادات الجهاز): نرجع لسطح مليان */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: #ffffff; --glass-bg-strong: #ffffff; --glass-tint: #f6f8f7; --glass-field: #ffffff; --glass-filter: none; }
  html[data-theme="dark"] { --glass-bg: #161b21; --glass-bg-strong: #1c232a; --glass-tint: #1c232a; --glass-field: #0f1317; }
}

/* السايد بار: ops.css قافل الظل بـ !important */
html .sidebar, html[data-theme="dark"] .sidebar { box-shadow: var(--glass-shadow) !important; border-color: var(--glass-brd) !important; }

/* ================================================================ صندوق المتابعة — Liquid Glass
   الصندوق ليه وضع فاتح/غامق خاص بيه (.ib[data-theme])، فخلفيته والوانه الزجاج متعرفة عليه هو مش على الصفحة. */
html .ib {
  --ibg: linear-gradient(145deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .42));
  --ibg-strong: linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .76));
  --ibg-brd: rgba(255, 255, 255, .78);
  --ibg-edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .25);
  --ibg-drop: 0 18px 44px -20px rgba(16, 40, 32, .38);
  --ib-bg: transparent; --ib-soft: rgba(255, 255, 255, .52); --ib-hover: rgba(255, 255, 255, .50);
  --ib-active: rgba(17, 177, 89, .15);
  --ib-line: rgba(18, 44, 36, .09); --ib-chip: rgba(255, 255, 255, .58); --ib-input: rgba(255, 255, 255, .66);
  --ib-in: rgba(255, 255, 255, .88); --ib-out: rgba(204, 249, 202, .92); --ib-wall: rgba(255, 255, 255, .16);
  --ib-bub-sh: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 1px rgba(11, 20, 26, .10), 0 6px 14px -10px rgba(11, 20, 26, .30);
  background:
    radial-gradient(900px 620px at 88% -8%, rgba(43, 212, 127, .30), transparent 62%),
    radial-gradient(760px 560px at 4% 12%, rgba(96, 178, 255, .24), transparent 60%),
    radial-gradient(820px 600px at 62% 108%, rgba(160, 132, 255, .20), transparent 62%),
    radial-gradient(640px 480px at 18% 92%, rgba(255, 196, 120, .18), transparent 60%),
    #eaf3ee;
}
html .ib[data-theme="dark"] {
  --ibg: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
  --ibg-strong: linear-gradient(145deg, rgba(36, 48, 55, .90), rgba(22, 31, 37, .84));
  --ibg-brd: rgba(255, 255, 255, .12);
  --ibg-edge: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(255, 255, 255, .03);
  --ibg-drop: 0 22px 48px -22px rgba(0, 0, 0, .85);
  --ib-bg: transparent; --ib-soft: rgba(255, 255, 255, .07); --ib-hover: rgba(255, 255, 255, .07);
  --ib-active: rgba(31, 199, 106, .18);
  --ib-line: rgba(255, 255, 255, .09); --ib-chip: rgba(255, 255, 255, .08); --ib-input: rgba(0, 0, 0, .30);
  --ib-in: rgba(255, 255, 255, .12); --ib-out: rgba(0, 132, 106, .66); --ib-wall: rgba(0, 0, 0, .20);
  --ib-bub-sh: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 1px rgba(0, 0, 0, .35), 0 8px 16px -10px rgba(0, 0, 0, .6);
  background:
    radial-gradient(900px 620px at 88% -8%, rgba(25, 196, 106, .24), transparent 62%),
    radial-gradient(760px 560px at 4% 12%, rgba(64, 120, 232, .20), transparent 60%),
    radial-gradient(820px 600px at 62% 108%, rgba(128, 92, 230, .18), transparent 62%),
    #090d0c;
}
/* الاعمدة والراس وشريط الكتابة: الواح زجاج */
html .ib :is(.ib-list, .ib-side, .ib-head, .ib-compose, .ib-presence) { background: var(--ibg); border-color: var(--ibg-brd); }
html .ib :is(.ib-list, .ib-side) { box-shadow: var(--ibg-edge); }
html .ib .ib-head { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 24px -20px rgba(16, 40, 32, .5); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
html .ib .ib-compose { -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
html .ib[data-theme="dark"] .ib-head { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 24px -20px rgba(0, 0, 0, .8); }
html .ib .ib-item.on { background: var(--ib-active); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(17, 177, 89, .18); }
html .ib[data-theme="dark"] .ib-item.on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 0 1px rgba(31, 199, 106, .26); }
/* حبات صغيرة فوق الحيطة او جوه الالواح */
html .ib :is(.ib-day, .ib-more, .ib-react, .ib-quick button, .ib-toolsbtn, .ib-seg button, .ib-prof-item, .ib-select select, .ib-sel-all, .ib-search kbd, .ib-blank kbd) {
  background: var(--ibg-strong); border-color: var(--ibg-brd); box-shadow: var(--ibg-edge), 0 4px 10px -8px rgba(11, 20, 26, .35);
}
html .ib :is(.ib-view.on, .ib-mtabs button.on) { background: var(--ibg-strong); box-shadow: var(--ibg-edge), 0 6px 14px -10px rgba(11, 20, 26, .4); }
html .ib .ib-box { border-color: var(--ibg-brd); box-shadow: inset 0 1px 2px rgba(16, 40, 32, .08), 0 0 0 1px var(--ib-line); }
html .ib .ib-search input { box-shadow: inset 0 1px 2px rgba(16, 40, 32, .07), 0 0 0 1px var(--ib-line); }
/* العايم فوق المحادثة: زجاج تقيل ببلور عشان الكلام اللي تحته مايتلخبطش معاه */
html :is(.ib-act, .ib-pop, .ib-notifs, .ib-menu, .ib-toolsmenu, .ib-modal-box, .ib-ofdlg, .ib-upbar) {
  background: var(--ibg-strong, var(--glass-bg-strong));
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--ibg-brd, var(--glass-brd));
  box-shadow: var(--ibg-edge, var(--glass-edge)), var(--ibg-drop, 0 30px 70px -28px rgba(10, 24, 20, .55));
}
html .ib-modal { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (prefers-reduced-transparency: reduce) {
  html .ib { --ibg: #ffffff; --ibg-strong: #ffffff; --ib-soft: #f4f6f5; --ib-hover: #f3f5f4; --ib-chip: #f0f2f5; --ib-input: #ffffff; --ib-in: #ffffff; --ib-out: #d9fdd3; --ib-wall: #efeae2; }
  html .ib[data-theme="dark"] { --ibg: #111b21; --ibg-strong: #1b262d; --ib-soft: #1b262d; --ib-hover: #1f2c34; --ib-chip: #202c33; --ib-input: #2a3942; --ib-in: #202c33; --ib-out: #005c4b; --ib-wall: #0b141a; }
}

/* ================================================================ الموبايل: شريط التنقل اللي تحت زجاج سايل، ومن غير بلور عشان السكرول مايعلّقش */
:root { --tb-bg: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(240, 249, 244, .93)); --tb-bead: linear-gradient(160deg, #ffffff, rgba(255, 255, 255, .55)); --tb-ring: rgba(255, 255, 255, .92); }
html[data-theme="dark"] { --tb-bg: linear-gradient(180deg, rgba(42, 54, 60, .97), rgba(20, 28, 32, .95)); --tb-bead: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05)); --tb-ring: rgba(26, 35, 40, .95); }
@media (max-width: 900px) {
  /* البلور على شرايط ثابتة فوق صفحة بتتسكرول، والظلال الكبيرة على كل صف، هم اللي كانوا بيتقّلوا الموبايل */
  :root, html[data-theme="dark"] { --glass-filter: none; }
  :root { --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .95); --glass-drop: 0 1px 2px rgba(16, 40, 32, .07), 0 6px 14px -10px rgba(16, 40, 32, .28); }
  html[data-theme="dark"] { --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .18); --glass-drop: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 16px -10px rgba(0, 0, 0, .7); }
  html body :is(.sidebar, .mobile-bar, .topbar, .ws-strip),
  html[data-theme="dark"] body :is(.sidebar, .mobile-bar, .topbar, .ws-strip) { background: var(--tb-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html .ib .ib-head, html .ib .ib-compose { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ibg-strong); }
  html .ib { --ib-bub-sh: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 1px rgba(11, 20, 26, .12); }
  html .ib[data-theme="dark"] { --ib-bub-sh: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 1px rgba(0, 0, 0, .4); }
}
@media (max-width: 860px) {
  /* كبسولة عايمة */
  html body nav.tabbar, html[data-theme="dark"] body nav.tabbar {
    inset: auto 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px;
    padding: 7px 8px; border-radius: 32px; align-items: center;
    background: var(--tb-bg); border: 1px solid var(--glass-brd);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .2), 0 16px 30px -14px rgba(16, 40, 32, .5);
  }
  html[data-theme="dark"] body nav.tabbar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 30px -14px rgba(0, 0, 0, .85); }
  html .tabbar a:not(.fab), html .tabbar button { padding: 3px 0 2px; gap: 3px; }
  html .tabbar .on::after { display: none; }
  /* كل ايقونة جوه نقطة زجاج */
  html .tabbar a:not(.fab) .sbi, html .tabbar button .sbi {
    box-sizing: content-box; width: 22px; height: 22px; padding: 8px; border-radius: 50%;
    background: var(--tb-bead);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -3px 6px -2px rgba(17, 177, 89, .16), 0 0 0 1px var(--glass-hair), 0 5px 10px -6px rgba(16, 40, 32, .55);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
  }
  html[data-theme="dark"] .tabbar a:not(.fab) .sbi, html[data-theme="dark"] .tabbar button .sbi {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -3px 6px -2px rgba(43, 212, 122, .18), 0 0 0 1px var(--glass-hair), 0 5px 10px -6px rgba(0, 0, 0, .8);
  }
  /* المختار: نقطة زجاج خضرا بلمعة */
  html .tabbar :is(a, button).on .sbi, html[data-theme="dark"] .tabbar :is(a, button).on .sbi {
    color: #fff; transform: translateY(-2px) scale(1.06);
    background: radial-gradient(120% 90% at 30% 12%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 58%), linear-gradient(150deg, #33dd88, #0a8a44);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -4px 8px -3px rgba(0, 60, 28, .45), 0 8px 16px -6px rgba(18, 168, 90, .75);
  }
  html .tabbar a span, html .tabbar button span { font-size: 11px; }
  /* زرار الارسال: كورة زجاج */
  html body .tabbar a.fab, html[data-theme="dark"] body .tabbar a.fab {
    width: 60px; height: 60px; margin-top: -34px; border: 4px solid var(--tb-ring);
    background: radial-gradient(110% 80% at 30% 10%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%), radial-gradient(90% 70% at 75% 100%, rgba(120, 220, 255, .45), rgba(120, 220, 255, 0) 60%), linear-gradient(150deg, #33dd88, #087a3c);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -6px 10px -4px rgba(0, 60, 28, .5), 0 14px 24px -8px rgba(18, 168, 90, .7);
  }
  html .tabbar a:not(.fab):active .sbi, html .tabbar button:active .sbi { transform: scale(.9); }
  html body.has-tabbar .content { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { html .tabbar .sbi { transition: none; } }