.jg-topbar{
  isolation: isolate;
}
.jg-topbar::before{
  content:"";
  position:absolute;
  inset:0;

  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(circle 1.1px at 63% 8%, rgba(255,225,165,0.62) 0%, transparent 70%),
    radial-gradient(circle 1.6px at 73% 66%, rgba(255,225,165,0.58) 0%, transparent 70%),
    radial-gradient(circle 1.1px at 43% 9%, rgba(255,225,165,0.70) 0%, transparent 70%),
    radial-gradient(circle 1.4px at 5% 23%, rgba(255,225,165,0.71) 0%, transparent 70%),
    radial-gradient(circle 1.5px at 23% 58%, rgba(255,225,165,0.55) 0%, transparent 70%),
    radial-gradient(circle 1.2px at 79% 67%, rgba(255,225,165,0.60) 0%, transparent 70%),
    radial-gradient(circle 1.0px at 94% 36%, rgba(255,225,165,0.58) 0%, transparent 70%),
    radial-gradient(circle 1.5px at 83% 59%, rgba(255,225,165,0.77) 0%, transparent 70%),
    radial-gradient(circle 2.2px at 6% 67%, rgba(255,178,75,0.26) 0%, transparent 78%),
    radial-gradient(circle 2.6px at 66% 76%, rgba(255,178,75,0.26) 0%, transparent 78%),
    radial-gradient(circle 2.5px at 4% 44%, rgba(255,178,75,0.30) 0%, transparent 78%),
    radial-gradient(circle 2.6px at 55% 72%, rgba(255,178,75,0.22) 0%, transparent 78%),
    radial-gradient(circle 2.5px at 84% 78%, rgba(255,178,75,0.21) 0%, transparent 78%),
    radial-gradient(circle 3.1px at 51% 50%, rgba(255,178,75,0.27) 0%, transparent 78%),
    radial-gradient(circle 2.5px at 51% 57%, rgba(255,178,75,0.21) 0%, transparent 78%),
    radial-gradient(circle 3.2px at 8% 89%, rgba(255,178,75,0.24) 0%, transparent 78%);
  background-size: 100% 240px, 100% 240px, 100% 240px, 100% 240px, 100% 240px, 100% 240px, 100% 240px, 100% 240px, 100% 360px, 100% 360px, 100% 360px, 100% 360px, 100% 360px, 100% 360px, 100% 360px, 100% 360px;
  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  animation: jgTopbarDrift 30s linear infinite;
}
@keyframes jgTopbarDrift{
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px, 0 -720px; }
}
@media (max-width:767px){
  .jg-topbar::before{ opacity:.6; }
}

.jg-topbar__search{
  border-color: rgba(196,135,71,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(196,135,71,.05);
  box-shadow: 0 0 0 1px rgba(255,190,80,.05);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.jg-topbar__search:hover{
  border-color: rgba(255,190,80,.65);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    rgba(196,135,71,.09);
  box-shadow:
    0 0 0 1px rgba(255,190,80,.16),
    0 6px 20px rgba(255,150,30,.14);
}
.jg-topbar__kbd{
  border-color: rgba(196,135,71,.30);
  background: rgba(196,135,71,.06);
}

.jg-notif__btn{
  border-color: rgba(196,135,71,.34);
  background: rgba(196,135,71,.05);
  box-shadow: 0 0 0 1px rgba(255,190,80,.05);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.jg-notif__btn:hover{
  border-color: rgba(255,190,80,.65);
  background: rgba(196,135,71,.10);
  box-shadow:
    0 0 0 1px rgba(255,190,80,.16),
    0 6px 20px rgba(255,150,30,.16);
}

.jg-topbar__rewards{
  box-shadow: inset 0 0 0 1px rgba(255,205,110,.14);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.jg-topbar__rewards:hover{
  border-color: rgba(255,190,80,.65);
  box-shadow:
    0 0 0 1px rgba(255,190,80,.18),
    0 8px 22px rgba(255,150,30,.18);
}

.jg-topbar .jg-user__btn{
  border-color: rgba(196,135,71,.34);
  box-shadow: 0 0 0 1px rgba(255,190,80,.05);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.jg-topbar .jg-user__btn:hover{
  border-color: rgba(255,190,80,.65);
  box-shadow:
    0 0 0 1px rgba(255,190,80,.16),
    0 6px 20px rgba(255,150,30,.14);
}

.jg-topbar .jg-user__menu,
.jg-topbar .jg-notif__menu{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(7,9,12,1), rgba(7,9,12,1));
  backdrop-filter: blur(10px);
  border-color: rgba(255,190,80,.38);
  box-shadow:
    0 0 0 1px rgba(255,190,80,.08),
    0 20px 50px rgba(0,0,0,.55),
    0 10px 30px rgba(255,140,20,.14);
}

.jg-topbar .jg-user__menuHead{
  border-color: rgba(196,135,71,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(196,135,71,.05);
}
.jg-topbar .jg-user__menuAvatar{
  border-color: rgba(255,190,80,.45);
  box-shadow: 0 0 0 2px rgba(255,150,30,.10);
}

.jg-topbar .jg-menuLink:hover{
  border-color: rgba(255,190,80,.40);
  background: rgba(196,135,71,.06);
}

.jg-topbar .jg-notif__item{
  border-color: rgba(196,135,71,.16);
  transition: border-color .18s ease, background .18s ease;
}
.jg-topbar .jg-notif__item:hover{
  border-color: rgba(255,190,80,.32);
  background: rgba(196,135,71,.05);
}
.jg-topbar .jg-notif__itemIco{
  box-shadow: 0 0 0 1px rgba(255,190,80,.10);
}