:root{
      --blue:#0f74b7;
      --border:#e5e7eb;
      --topbar:#f3f4f6;
        --mobile-bottom-nav-h: 48px;
    }
   html{
    font-family:"Almarai", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }   
    .container-80{max-width:80rem;}
    .xscroll::-webkit-scrollbar{height:8px;}
    .xscroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;}

    .hide-scrollbar::-webkit-scrollbar{ display:none; }
    .hide-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

    .dot{
      width:6px;height:6px;
      background:#cbd5e1;
      border-radius:9999px;
      transition:all .25s ease;
    }
    .dot.active{
      width:16px;
      background:#0284c7;
    }
#loginModal{ z-index: 999999; }
#loginModalBg{ z-index: 0; }
#loginModalPanel{ position: relative; z-index: 1; }

    @media (max-width: 767px){
      #catsScroll::-webkit-scrollbar{ display:none; }
      #catsScroll{ -ms-overflow-style:none; scrollbar-width:none; }
      body.login-open .mobile-bottom-nav{ display:none !important; }
      body{
    padding-bottom: calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom));
  }
    }

    .dark body { background:#0b1220; color:#e5e7eb; }

    .dark .bg-white{ background-color:#0f172a !important; }
    .dark .bg-slate-50{ background-color:#0b1220 !important; }
    .dark .bg-slate-100{ background-color:#111c33 !important; }
    .dark .bg-slate-200{ background-color:#16213a !important; }

    .dark .text-slate-900,
    .dark .text-slate-800,
    .dark .text-slate-700,
    .dark .text-slate-600,
    .dark .text-slate-500{ color:#e5e7eb !important; }
    .dark .text-slate-400{ color:#94a3b8 !important; }

    .dark .border-slate-300,
    .dark .border-slate-200{ border-color:#22304a !important; }
    .dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]){
      border-color:#1f2a44 !important;
    }
    .dark .h-px.bg-slate-200{ background:#22304a !important; }

    .dark .hover\:bg-slate-50:hover{ background-color:#111c33 !important; }
    .dark .hover\:bg-slate-200:hover{ background-color:#1b2a49 !important; }
.dark input,
.dark select,
.dark textarea{
  background:#0f172a !important;
  color:#e5e7eb !important;
  border-color:#22304a !important;
}
.dark input::placeholder,
.dark textarea::placeholder{ color:#94a3b8 !important; }


    .dark header{ background:#020617 !important; }
    .dark header, .dark header *{ color:#e5e7eb; }

    .dark header .bg-white\/15{ background:rgba(255,255,255,.08) !important; }
    .dark header .hover\:bg-white\/20:hover{ background:rgba(255,255,255,.14) !important; }

    .dark #openMobileSearch{
      background:#0f172a !important;
      color:#e5e7eb !important;
    }
    .dark #openMobileSearch:hover{ background:#111c33 !important; }

    .dark .catItem:hover{ background:#0b2a44 !important; }
    .dark .postBtn{ background:#020617 !important; color:#fff !important; }
    .dark .postBtn:hover{ background:#0f172a !important; }

    .dark .mobile-bottom-nav{ background: transparent; }
    .dark .mobile-bottom-nav > div{
      background-color: rgba(15, 23, 42, .95) !important;
      border-color: #22304a !important;
    }

    .header-center-link{
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: .2px;
      height: 3.5rem;
      display: inline-flex;
      align-items: center;
      padding-inline: 0.75rem;
      transition: background-color .2s ease;
    }
    .header-center-link:hover{ background-color: #0b5fa5; }
    .dark .header-center-link:hover{ background-color: #0a3f66; }
      @media (min-width: 768px){
    .actions-grid{
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  /* Notification badge */
.notif-wrap{
  position: relative;
  display: inline-flex;
  overflow: visible;
}

.notif-badge{
  position: absolute;
  top: -7px;
  right: -8px;            /* الافتراضي LTR */
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #ef4444;    /* أحمر */
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  z-index: 50;
}

/* RTL: خلي البادج يسار */
[dir="rtl"] .notif-badge{
  right: auto;
  left: -8px;
}