/* ستايل «الشريطان» (sidebar-style-rails.js) — بادئة .sbr-
   منقول من المعاينة المعتمدة (sidebar-designs/design-2) بنفس القياسات
   والمنحنيات والحركة، وداكن في الوضعين كالمعاينة حرفياً (طلب المالك «بالضبط»).
   الجسم كله position:fixed؛ المساحة المحجوزة للمحتوى من --sb-width (النواة). */

@property --sbr-pc{syntax:'<color>';inherits:true;initial-value:#a78bfa}

.sbr,.sbr-tip{
  --sbr-rail-a:#1f1238; --sbr-rail-b:#1b1030; --sbr-rail-c:#160c28; --sbr-rail:#1b1030;
  --sbr-panel:#22163a; --sbr-ink:#f4effc; --sbr-ink-2:rgba(240,233,252,.74); --sbr-ink-3:#a596c4; --sbr-ink-4:#76679a;
  --sbr-line:rgba(255,255,255,.07); --sbr-ov:255,255,255; --sbr-on:#fff;
  --sbr-pink:#fda4af; --sbr-mint:#6ee7b7; --sbr-ci-mix:100%; --sbr-focus:#fff; --sbr-lock-bg:#33224f;
  --sbr-glow:24%; --sbr-drop:rgba(14,7,28,.6);
  --sbr-brand:#7c4dbd; --sbr-brand-2:#a97fd6; --sbr-badge:#f43f5e; --sbr-live:#34d399;
  --sbr-rail-w:72px; --sbr-panel-w:248px;
  --sbr-ease:cubic-bezier(.22,1,.36,1); --sbr-spring:cubic-bezier(.34,1.56,.64,1); --sbr-soft:cubic-bezier(.3,1.25,.5,1);
}
/* لون الأيقونة/النصّ الملوَّن: لون القسم نفسه */
.sbr-ri,.sbr-pv,.sbr-sc,.sbr-tip{--ci:color-mix(in srgb,var(--c) var(--sbr-ci-mix),#2a1645)}

/* الحاوية: صندوق ثابت بلا مساحة (الأبناء ثابتون بأنفسهم) — إلا في وضع الدرج */
.sbr{position:fixed;top:0;right:0;width:0;height:0;z-index:40;font-family:Tajawal,"Cairo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;color:var(--sbr-ink)}
.sbr button{font:inherit;color:inherit}
.sbr svg,.sbr-tip svg{display:block}

/* ───────────── الشريط ───────────── */
.sbr-rail{position:fixed;top:0;right:0;bottom:0;width:var(--sbr-rail-w);z-index:2;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(180deg,var(--sbr-rail-a) 0%,var(--sbr-rail-b) 40%,var(--sbr-rail-c) 100%);box-shadow:-1px 0 0 rgba(var(--sbr-ov),.04) inset}
.sbr-rail-top{padding:14px 0 10px;width:100%;display:flex;justify-content:center;position:relative}
.sbr-rail-top::after{content:"";position:absolute;bottom:0;left:50%;width:30px;height:2px;margin-left:-15px;border-radius:2px;background:rgba(var(--sbr-ov),.08)}
.sbr-logo{position:relative;width:46px;height:46px;border:0;padding:0;border-radius:30%;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 15%,#ffffff 0%,#f1e8fc 55%,#dcc8f5 100%);
  box-shadow:0 10px 24px -10px rgba(169,127,214,.85),inset 0 -2px 0 rgba(124,77,189,.18);transition:transform .35s var(--sbr-spring),border-radius .35s var(--sbr-soft),box-shadow .3s}
.sbr-logo i{width:36px;height:36px;background:url(/assets/brand/samaofficial.png) no-repeat;background-size:36.4px 44.5px;background-position:-.1px -.2px}
.sbr-logo:hover{transform:translateY(-1px) rotate(-4deg);border-radius:36%;box-shadow:0 14px 28px -10px rgba(169,127,214,1),inset 0 -2px 0 rgba(124,77,189,.18)}
.sbr-logo:active{transform:scale(.94)}
.sbr-logo:focus-visible,.sbr-rb:focus-visible,.sbr-rtool:focus-visible,.sbr-avatar:focus-visible{outline:2px solid var(--sbr-focus);outline-offset:3px}

.sbr-rail-mid{flex:1;min-height:0;width:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:10px 0;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}
.sbr-rail-mid::-webkit-scrollbar{display:none}
.sbr-rsep{width:26px;height:2px;border-radius:2px;background:rgba(var(--sbr-ov),.08);margin:9px auto}

.sbr-ri{position:relative;width:100%;display:flex;justify-content:center;padding:3px 0}
.sbr-pill{position:absolute;right:0;top:50%;width:4px;height:0;border-radius:4px 0 0 4px;background:var(--c);opacity:0;transform:translateY(-50%);
  transition:height .36s var(--sbr-spring),opacity .2s,box-shadow .3s}
.sbr-ri.is-has-page .sbr-pill{height:8px;opacity:1}
.sbr-ri:hover .sbr-pill{height:18px;opacity:1}
.sbr-ri.is-sel .sbr-pill{height:34px;opacity:1;box-shadow:0 0 14px var(--c)}

.sbr-rb{position:relative;width:46px;height:46px;border:0;padding:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background-color:rgba(var(--sbr-ov),.05);color:var(--ci)!important;
  transition:border-radius .38s var(--sbr-soft),background-color .22s,color .22s,transform .2s var(--sbr-ease),box-shadow .35s}
.sbr-rb::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .25s;
  background:linear-gradient(150deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 52%,rgba(0,0,0,.14) 100%)}
.sbr-rb svg{width:22px;height:22px;position:relative;transition:transform .3s var(--sbr-spring)}
.sbr-rb:hover{border-radius:36%;background-color:color-mix(in srgb,var(--c) 20%,transparent)}
.sbr-rb:hover svg{transform:scale(1.07)}
.sbr-rb:active{transform:scale(.92)}
.sbr-ri.is-sel .sbr-rb{border-radius:30%;background-color:var(--c);color:#1b1030!important;box-shadow:0 10px 22px -10px var(--c),0 0 0 1px rgba(255,255,255,.1) inset}
.sbr-ri.is-sel .sbr-rb::before{opacity:1}
.sbr-ri.is-bump .sbr-rb svg{animation:sbrBump .5s var(--sbr-spring)}
@keyframes sbrBump{0%{transform:scale(.7) rotate(-8deg)}60%{transform:scale(1.12)}100%{transform:none}}

.sbr-rbadge{position:absolute;top:-5px;left:-6px;min-width:14px;height:14px;padding:0 4px;box-sizing:content-box;border:2.5px solid var(--sbr-rail);border-radius:12px;
  background:var(--sbr-badge);color:#fff;font:800 10.5px/14px Tajawal;text-align:center;animation:sbrPop .5s var(--sbr-spring) .45s both}
.sbr-rlive{position:absolute;top:-2px;left:-2px;width:10px;height:10px;border-radius:50%;background:var(--sbr-live);border:2.5px solid var(--sbr-rail);box-sizing:content-box}
.sbr-rlive::after{content:"";position:absolute;inset:-2.5px;border-radius:50%;border:2px solid var(--sbr-live);animation:sbrPing 1.8s var(--sbr-ease) infinite}
.sbr-rlock{position:absolute;bottom:-5px;left:-6px;width:17px;height:17px;border-radius:50%;background:var(--sbr-lock-bg);border:2px solid var(--sbr-rail);color:var(--sbr-pink);display:grid;place-items:center;box-sizing:content-box}
.sbr-rlock svg{width:10px;height:10px}
@keyframes sbrPop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes sbrPing{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(2.3);opacity:0}}

.sbr-rail-bot{width:100%;padding:10px 0 14px;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.sbr-rail-bot::before{content:"";position:absolute;top:0;left:50%;width:30px;height:2px;margin-left:-15px;border-radius:2px;background:rgba(var(--sbr-ov),.08)}
.sbr-rtool{width:40px;height:40px;border:0;padding:0;border-radius:50%;background:transparent;color:var(--sbr-ink-3)!important;cursor:pointer;display:grid;place-items:center;
  transition:border-radius .34s var(--sbr-soft),background-color .2s,color .2s,transform .18s var(--sbr-ease)}
.sbr-rtool svg{width:20px;height:20px;transition:transform .34s var(--sbr-ease)}
.sbr-rtool:hover{border-radius:32%;background:rgba(var(--sbr-ov),.08);color:var(--sbr-ink)!important}
.sbr-rtool:active{transform:scale(.92)}
.sbr-duo{display:flex;gap:4px}
.sbr-duo .sbr-rtool{width:31px;height:31px}
.sbr-duo .sbr-rtool svg{width:17px;height:17px}
.sbr-rtool.sbr-out:hover{color:var(--sbr-pink)!important;background:rgba(248,113,113,.12)}
.sbr.is-collapsed .sbr-tgl svg{transform:scaleX(-1)}
.sbr-avatar{position:relative;width:42px;height:42px;border:0;padding:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(140deg,#d3b5f3 0%,#a97fd6 35%,#7c4dbd 70%,#5b2f9b 100%);color:#fff!important;font:800 18px/1 Tajawal;
  box-shadow:0 0 0 2px var(--sbr-rail),0 0 0 3.5px rgba(169,127,214,.55);transition:border-radius .34s var(--sbr-soft),box-shadow .3s,transform .2s var(--sbr-ease)}
.sbr-avatar:hover{border-radius:34%;box-shadow:0 0 0 2px var(--sbr-rail),0 0 0 3.5px rgba(169,127,214,.95),0 8px 20px -6px rgba(169,127,214,.8)}
.sbr-avatar b{padding-top:3px;font-weight:800}
.sbr-avatar::after{content:"";position:absolute;bottom:-1px;left:-1px;width:9px;height:9px;border-radius:50%;background:var(--sbr-live);border:2.5px solid var(--sbr-rail)}

/* ───────────── اللوحة ───────────── */
.sbr-panel{position:fixed;top:0;bottom:0;right:var(--sbr-rail-w);width:var(--sbr-panel-w);z-index:1;display:flex;flex-direction:column;overflow:hidden;
  background:var(--sbr-panel);border-left:1px solid var(--sbr-line);
  transition:transform .36s var(--sbr-ease),box-shadow .36s var(--sbr-ease),--sbr-pc .6s var(--sbr-ease)}
.sbr-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:260px;pointer-events:none;
  background:radial-gradient(130% 90% at 90% -10%,color-mix(in srgb,var(--sbr-pc) var(--sbr-glow),transparent) 0%,transparent 70%)}
.sbr-panel::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(180deg,rgba(var(--sbr-ov),.02),transparent 30%)}
.sbr.is-collapsed .sbr-panel{transform:translateX(calc(100% + 2px));visibility:hidden;transition:transform .32s var(--sbr-ease),box-shadow .32s,visibility 0s .32s,--sbr-pc .6s}
.sbr.is-collapsed.is-peek .sbr-panel{transform:none;visibility:visible;box-shadow:-28px 0 60px -18px var(--sbr-drop);transition:transform .36s var(--sbr-ease),box-shadow .36s,visibility 0s,--sbr-pc .6s}

.sbr-brand{position:relative;z-index:1;height:58px;flex:none;display:flex;align-items:center;gap:6px;padding:0 20px;white-space:nowrap}
.sbr-brand b{font:800 15.5px/1 Tajawal;color:var(--sbr-ink)}
.sbr-brand span{font:500 12.5px/1 Tajawal;color:var(--sbr-ink-3);direction:ltr;unicode-bidi:isolate}
.sbr-brand em{font-style:normal;color:var(--sbr-ink-4);margin:0 2px}

.sbr-search{position:relative;z-index:1;flex:none;margin:0 14px 4px;height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;
  border-radius:11px;background:rgba(var(--sbr-ov),.045);border:1px solid var(--sbr-line);color:var(--sbr-ink-3);transition:background .2s,border-color .2s,box-shadow .2s;cursor:text}
.sbr-search:focus-within{background:rgba(var(--sbr-ov),.07);border-color:color-mix(in srgb,var(--sbr-pc) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--sbr-pc) 18%,transparent)}
.sbr-search svg{width:16px;height:16px;flex:none}
.sbr-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--sbr-ink);font:500 13.5px Tajawal;padding:0;margin:0;box-shadow:none}
.sbr-search input::placeholder{color:var(--sbr-ink-4)}
.sbr-search input::-webkit-search-cancel-button{display:none}
.sbr-search kbd{font:700 11px/18px Tajawal;min-width:20px;height:20px;text-align:center;border-radius:6px;border:1px solid rgba(var(--sbr-ov),.1);color:var(--sbr-ink-4);background:rgba(var(--sbr-ov),.06)}
.sbr-search kbd{background:rgba(0,0,0,.15)}
.sbr-clr{display:none;border:0;background:none;padding:2px;color:var(--sbr-ink-3);cursor:pointer;border-radius:6px}
.sbr-clr svg{width:14px;height:14px}
.sbr-search.is-has .sbr-clr{display:block}.sbr-search.is-has kbd{display:none}

.sbr-stack{position:relative;flex:1;min-height:0;z-index:1}
.sbr-pv{position:absolute;inset:0;display:flex;flex-direction:column}
.sbr-pv-head{padding:14px 18px 0;display:flex;align-items:center;gap:12px}
.sbr-pv-ico{flex:none;width:44px;height:44px;border-radius:30%;display:grid;place-items:center;color:var(--ci);
  background:color-mix(in srgb,var(--c) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent)}
.sbr-pv-ico svg{width:23px;height:23px}
.sbr-pv-tt{min-width:0}
.sbr-pv-kicker{font:700 11.5px/1 Tajawal;color:var(--sbr-ink-4);margin-bottom:6px}
.sbr-pv-title{margin:0;font:800 19.5px/1.25 Tajawal;color:var(--sbr-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.sbr-pv-meta{padding:10px 20px 0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;font:500 12.5px/1 Tajawal;color:var(--sbr-ink-3)}
.sbr-chip{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:11px;font:700 11px/1 Tajawal}
.sbr-chip svg{width:11px;height:11px}
.sbr-chip.is-own{background:rgba(248,113,113,.13);color:var(--sbr-pink)}
.sbr-chip.is-lv{background:rgba(52,211,153,.13);color:var(--sbr-mint)}
.sbr-chip.is-bd{background:rgba(244,63,94,.16);color:var(--sbr-pink)}
.sbr-ldot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--sbr-live);flex:none}
.sbr-ldot::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--sbr-live);animation:sbrPing 1.8s var(--sbr-ease) infinite}
.sbr-pv-line{margin:14px 20px 4px;height:3px;border-radius:3px;transform-origin:right center;
  background:linear-gradient(to left,var(--c) 0%,color-mix(in srgb,var(--c) 35%,transparent) 45%,transparent 100%)}
.sbr-pv-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px 10px 22px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(var(--sbr-ov),.14) transparent}
.sbr-pv-scroll::-webkit-scrollbar{width:6px}.sbr-pv-scroll::-webkit-scrollbar-thumb{background:rgba(var(--sbr-ov),.12);border-radius:6px}
.sbr-pv-list{position:relative}

.sbr-it{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 13px 0 10px;border:0;border-radius:10px;margin:0;
  background:transparent;color:var(--sbr-ink-2)!important;font:500 14.5px/1 Tajawal;text-align:right;cursor:pointer;transition:color .18s,background-color .18s}
.sbr-it:hover{background:color-mix(in srgb,var(--c) 9%,transparent);color:var(--sbr-ink)!important}
.sbr-it:focus-visible{outline:2px solid color-mix(in srgb,var(--c) 80%,var(--sbr-focus));outline-offset:-2px}
.sbr-it[aria-current="page"]{color:var(--sbr-on)!important;font-weight:700;background:transparent}
.sbr-dot{flex:none;width:7px;height:7px;border-radius:50%;border:1.6px solid var(--sbr-ink-4);transition:all .25s var(--sbr-ease)}
.sbr-it:hover .sbr-dot{border-color:var(--c)}
.sbr-it[aria-current="page"] .sbr-dot{background:var(--c);border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
.sbr-lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px}
.sbr-chev{position:absolute;left:9px;top:12px;width:14px;height:14px;opacity:0;transform:translateX(5px);transition:opacity .2s,transform .25s var(--sbr-ease);color:var(--sbr-ink-3)}
.sbr-it:hover .sbr-chev,.sbr-it:focus-visible .sbr-chev{opacity:.85;transform:none}
.sbr-it[aria-current="page"] .sbr-chev{opacity:0}
.sbr-it:not(.sbr-sc):hover .sbr-lbl,.sbr-it:not(.sbr-sc):focus-visible .sbr-lbl{-webkit-mask:linear-gradient(to left,#000 calc(100% - 26px),transparent calc(100% - 12px));mask:linear-gradient(to left,#000 calc(100% - 26px),transparent calc(100% - 12px))}
.sbr-sc .sbr-chev{position:static;flex:none}
.sbr-ibadge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--sbr-badge);color:#fff;font:800 11.5px/21px Tajawal;text-align:center;
  box-shadow:0 4px 10px -4px rgba(244,63,94,.8)}
.sbr-ilive{flex:none;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:10px;background:rgba(52,211,153,.14);color:var(--sbr-mint);font:700 11px/1 Tajawal}

.sbr-hd{display:flex;align-items:flex-end;gap:8px;height:36px;padding:0 13px 8px;font:700 12px/1 Tajawal;color:var(--sbr-ink-4);white-space:nowrap}
.sbr-hd::before{content:"";width:4px;height:4px;border-radius:1px;background:var(--c);opacity:.7;transform:rotate(45deg);margin-bottom:4px}
.sbr-hd::after{content:"";flex:1;height:1px;background:var(--sbr-line);margin-bottom:4px}
.sbr-hd:first-child{height:26px}

.sbr-glider{position:absolute;right:0;left:0;top:0;height:38px;border-radius:10px;pointer-events:none;z-index:0;
  background:linear-gradient(to left,color-mix(in srgb,var(--c) 22%,transparent),color-mix(in srgb,var(--c) 12%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 20%,transparent);
  transition:transform .38s var(--sbr-soft),opacity .2s}
.sbr-glider::after{content:"";position:absolute;right:0;top:9px;bottom:9px;width:3px;border-radius:3px 0 0 3px;background:var(--c);box-shadow:0 0 10px var(--c)}
.sbr-glider.is-off{opacity:0}

/* لوحة الرئيسية */
.sbr-hcard{margin:6px 10px 6px;padding:14px 14px 13px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(169,127,214,.26),rgba(124,77,189,.12) 60%,rgba(244,63,94,.10));box-shadow:inset 0 0 0 1px rgba(var(--sbr-ov),.07)}
.sbr-hcard::after{content:"";position:absolute;width:120px;height:120px;left:-40px;top:-50px;border-radius:50%;background:radial-gradient(circle,rgba(244,114,182,.28),transparent 70%)}
.sbr-hcard .sbr-n{font:900 32px/1 Tajawal;color:var(--sbr-on);letter-spacing:-.5px}
.sbr-hcard .sbr-l{font:500 12.5px/1.4 Tajawal;color:var(--sbr-ink-2);margin-top:4px}
.sbr-hcard .sbr-bars{display:flex;gap:3px;margin-top:11px;height:5px}
.sbr-hcard .sbr-bars i{border-radius:3px;background:var(--c)}
.sbr-hcard.is-calm{background:linear-gradient(150deg,rgba(52,211,153,.16),rgba(124,77,189,.10) 70%)}
.sbr-hcard.is-calm .sbr-n{font-size:17px;line-height:1.3;letter-spacing:0;display:flex;align-items:center;gap:8px}
.sbr-hcard.is-calm .sbr-n svg{width:20px;height:20px;color:var(--sbr-mint);flex:none}
.sbr-it.sbr-sc{height:48px;gap:11px;padding:0 10px 0 8px}
.sbr-mt{flex:none;width:30px;height:30px;border-radius:30%;display:grid;place-items:center;color:var(--ci);background:color-mix(in srgb,var(--c) 15%,transparent);transition:border-radius .3s var(--sbr-soft)}
.sbr-sc:hover .sbr-mt{border-radius:40%}
.sbr-mt svg{width:16px;height:16px}
.sbr-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.sbr-tx b{font:700 13.5px/1.1 Tajawal;color:var(--sbr-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbr-tx small{font:500 11.5px/1 Tajawal;color:var(--sbr-ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbr-empty{padding:28px 18px;text-align:center;color:var(--sbr-ink-3);font:500 13px/1.7 Tajawal}
.sbr-empty svg{width:28px;height:28px;margin:0 auto 8px;color:var(--sbr-ink-4)}

/* دخول/خروج اللوحات */
.sbr-pv.is-enter .sbr-anim{animation:sbrVin .4s var(--sbr-ease) both;animation-delay:calc(var(--i,0) * 25ms + 40ms)}
.sbr-pv.is-enter .sbr-pv-line{animation:sbrVline .7s var(--sbr-ease) .1s both}
.sbr-pv.is-enter .sbr-glider{animation:sbrVin .4s var(--sbr-ease) both;animation-delay:calc(var(--i,0) * 25ms + 60ms)}
.sbr-pv.is-leave{animation:sbrVout .2s var(--sbr-ease) both;pointer-events:none}
@keyframes sbrVin{from{opacity:0;transform:translateY(calc(var(--dir,1) * 12px))}}
@keyframes sbrVout{to{opacity:0;transform:translateY(calc(var(--dir,1) * -10px)) scale(.985)}}
@keyframes sbrVline{from{transform:scaleX(0);opacity:0}}

/* التلميح */
.sbr-tip{position:fixed;z-index:100;top:0;left:0;pointer-events:none;max-width:240px;padding:9px 12px 8px;border-radius:11px;
  background:#120a24;color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 34px -10px rgba(0,0,0,.55);font-family:Tajawal,sans-serif;
  opacity:0;transform:translateX(10px) scale(.97);transform-origin:right center;
  transition:opacity .15s var(--sbr-ease),transform .22s var(--sbr-ease),top .2s var(--sbr-ease)}
.sbr-tip.is-on{opacity:1;transform:none}
.sbr-tip::after{content:"";position:absolute;right:-5px;top:50%;width:9px;height:9px;margin-top:-5px;background:#120a24;border:1px solid rgba(255,255,255,.1);border-width:1px 1px 0 0;transform:rotate(45deg);border-radius:0 2px 0 0}
.sbr-tip .sbr-tt{display:flex;align-items:center;gap:7px;font:700 13.5px/1.2 Tajawal;white-space:nowrap}
.sbr-tip .sbr-tt i{width:8px;height:8px;border-radius:3px;background:var(--c,#a97fd6);flex:none}
.sbr-tip .sbr-tm{font:500 11.5px/1.2 Tajawal;color:#a596c4;margin-top:5px;white-space:nowrap}
.sbr-tip .sbr-tm b{color:#fda4af;font-weight:700}

/* الإقلاع */
.sbr.is-boot .sbr-rb,.sbr.is-boot .sbr-logo{animation:sbrRin .55s var(--sbr-spring) both;animation-delay:calc(var(--k,0) * 22ms)}
@keyframes sbrRin{from{opacity:0;transform:scale(.5)}}

/* الشاشات المتوسطة (601–980): الشريط وحده، واللوحة تطفو فوق المحتوى */
.sbr.is-mid .sbr-tgl{display:none}

/* الشاشات الضيقة (≤600): الشريطان معاً درجٌ ينزلق من اليمين بزرّ القائمة */
.sbr.is-drawer{width:min(320px,calc(100vw - 40px));height:100%;bottom:0;z-index:56;--sbr-panel-w:calc(min(320px,calc(100vw - 40px)) - 72px);
  transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .34s var(--sbr-ease),visibility 0s .34s;box-shadow:-28px 0 60px -18px var(--sbr-drop)}
html[data-sbc-drawer-open] .sbr.is-drawer{transform:none;visibility:visible;transition:transform .36s var(--sbr-ease),visibility 0s}
.sbr.is-drawer .sbr-tgl{display:none}

@media (prefers-reduced-motion:reduce){
  .sbr *,.sbr *::before,.sbr *::after,.sbr,.sbr-tip{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}