#pl{
  position:fixed;
  inset:0;
  z-index:99999;
  background:linear-gradient(145deg,#061a0c 0%,#0a2e18 30%,#0d3d20 60%,#0a2a3d 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}

#pl.hide{
  opacity:0;
  pointer-events:none;
  transform:scale(1.04);
}

#pl::before{
  content:'';
  position:absolute;
  inset:-50%;
  background:
    radial-gradient(ellipse 80% 80% at 20% 20%,rgba(55,162,82,.18) 0%,transparent 55%),
    radial-gradient(ellipse 60% 60% at 80% 75%,rgba(30,96,145,.22) 0%,transparent 55%),
    radial-gradient(ellipse 50% 50% at 55% 10%,rgba(232,160,32,.12) 0%,transparent 50%);
  animation:plMesh 6s ease-in-out infinite alternate;
}

@keyframes plMesh{
  0%{transform:rotate(0deg) scale(1)}
  100%{transform:rotate(6deg) scale(1.06)}
}

#pl::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:38px 38px;
  animation:plDots 4s ease-in-out infinite alternate;
}

@keyframes plDots{
  0%{opacity:.5}
  100%{opacity:1}
}

.pl-core{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}

.pl-ring-wrap{
  position:relative;
  width:96px;
  height:96px;
  margin-bottom:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pl-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid transparent;
  background:linear-gradient(#fff0,#fff0) padding-box,
             linear-gradient(120deg,#37a252,#e8a020,#1e6091,#37a252) border-box;
  animation:plSpin 2.2s linear infinite;
}

.pl-ring2{
  position:absolute;
  inset:9px;
  border-radius:50%;
  border:1.5px solid transparent;
  background:linear-gradient(#fff0,#fff0) padding-box,
             linear-gradient(240deg,#e8a020,#37a252,#1e6091,#e8a020) border-box;
  animation:plSpin 3.4s linear infinite reverse;
  opacity:.65;
}

@keyframes plSpin{
  to{transform:rotate(360deg)}
}

.pl-logo-ic{
  width:64px;
  height:64px;
  border-radius:16px;
  background:linear-gradient(145deg,#37620a 0%,#216233 50%,#1e6091 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.65rem;
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 32px rgba(0,0,0,.4),0 0 48px rgba(55,162,82,.3);
  animation:plPulse 2.2s ease-in-out infinite;
}

@keyframes plPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 32px rgba(0,0,0,.4),0 0 48px rgba(55,162,82,.28)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 8px 32px rgba(0,0,0,.4),0 0 64px rgba(55,162,82,.5)}
}

.pl-brand{
  font-family:var(--fd, Georgia, serif);
  font-size:2rem;
  font-weight:800;
  color:#fff;
  letter-spacing:-.02em;
  line-height:1;
  margin-bottom:6px;
  text-align:center;
  animation:plFadeUp .7s ease .1s both;
}

.pl-brand em{
  font-style:normal;
  background:linear-gradient(90deg,#5dd684 0%,#e8a020 55%,#7ec8f4 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.pl-tag{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  margin-bottom:32px;
  text-align:center;
  animation:plFadeUp .7s ease .22s both;
}

.pl-tag span{color:rgba(232,160,32,.7)}

.pl-bar-wrap{
  width:200px;
  height:3px;
  background:rgba(255,255,255,.08);
  border-radius:2px;
  overflow:hidden;
  margin-bottom:18px;
  animation:plFadeUp .6s ease .35s both;
}

.pl-bar{
  height:100%;
  width:0;
  background:linear-gradient(90deg,#37a252,#e8a020);
  border-radius:2px;
  animation:plLoad 1.8s cubic-bezier(.4,0,.2,1) .3s forwards;
}

@keyframes plLoad{
  0%{width:0}
  60%{width:72%}
  80%{width:88%}
  100%{width:100%}
}

.pl-status{
  font-size:.72rem;
  font-weight:600;
  color:rgba(255,255,255,.32);
  letter-spacing:.5px;
  text-align:center;
  animation:plFadeUp .6s ease .45s both;
}

.pl-badges{
  display:flex;
  gap:10px;
  margin-top:32px;
  flex-wrap:wrap;
  justify-content:center;
  animation:plFadeUp .7s ease .55s both;
}

.pl-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.48);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:50px;
  backdrop-filter:blur(8px);
}

.pl-badge i{
  color:rgba(232,160,32,.7);
  font-size:.65rem;
}

.pl-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.pl-p{
  position:absolute;
  border-radius:50%;
  animation:plFloat linear infinite;
  opacity:0;
}

@keyframes plFloat{
  0%{opacity:0;transform:translateY(0) scale(0)}
  10%{opacity:1}
  90%{opacity:.5}
  100%{opacity:0;transform:translateY(-80vh) scale(1.5)}
}

@keyframes plFadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:640px){
  .pl-ring-wrap{
    width:84px;
    height:84px;
    margin-bottom:24px;
  }

  .pl-logo-ic{
    width:56px;
    height:56px;
    font-size:1.45rem;
  }

  .pl-brand{font-size:1.7rem}
  .pl-tag{
    font-size:.62rem;
    letter-spacing:2px;
    padding:0 18px;
  }

  .pl-bar-wrap{width:170px}
  .pl-status{padding:0 18px}
  .pl-badges{padding:0 14px}
}