/* =====================================================================
   gks-v71.css - loaded after v70.
   1) Dashboard box animations are back (override the old "animation:none")
   2) Ambient premium background + polish
   3) Store video / banner frame (coloured sides)
   Only transform / opacity animations are used (cheap, no repaint storms).
   ===================================================================== */
@keyframes v71Rise{from{opacity:0;transform:translateY(18px) scale(.965)}to{opacity:1;transform:none}}
@keyframes v71Sweep{0%,55%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(620%) skewX(-20deg)}}
@keyframes v71Float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.06)}}
@keyframes v71Ripple{0%{transform:scale(.4);opacity:.55}100%{transform:scale(1.6);opacity:0}}
@keyframes v71Aurora{0%{transform:translate3d(-6%,0,0) scale(1)}100%{transform:translate3d(8%,6%,0) scale(1.15)}}
@keyframes v71Aurora2{0%{transform:translate3d(6%,0,0) scale(1.1)}100%{transform:translate3d(-8%,-6%,0) scale(.95)}}
@keyframes v71Pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.09)}}
@keyframes v71Ring{0%{transform:translate(-50%,-50%) scale(.9);opacity:.6}100%{transform:translate(-50%,-50%) scale(1.55);opacity:0}}
@keyframes v71In{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* ---------- 1) DASHBOARD ---------- */
html body #page-dashboard .balanceCard.premiumClickable,
html body #page-dashboard #dash-balance-main-card{animation:v71Rise .65s cubic-bezier(.2,.9,.3,1) both!important}
html body #page-dashboard .balanceShine{animation:v71Sweep 5.2s 1s ease-in-out 1!important;will-change:transform}
html body #page-dashboard .statsGrid .statCard{animation:v71Rise .6s .12s cubic-bezier(.2,.9,.3,1) both!important}
html body #page-dashboard .statsGrid .statCard:nth-child(2){animation-delay:.2s!important}
html body #page-dashboard .statsGrid .statCard:nth-child(3){animation-delay:.28s!important}
html body #page-dashboard .statsGrid .statCard:nth-child(4){animation-delay:.36s!important}
html body #page-dashboard .statsGrid .statCard:nth-child(5){animation-delay:.44s!important}
html body #page-dashboard .statsGrid .statCard:nth-child(6){animation-delay:.52s!important}
html body #page-dashboard .statCard .statIcon{animation:v71Float 3.2s ease-in-out 1!important}
html body #page-dashboard .statCard:nth-child(2) .statIcon{animation-delay:.4s!important}
html body #page-dashboard .statCard:nth-child(3) .statIcon{animation-delay:.8s!important}
html body #page-dashboard .statCard:nth-child(4) .statIcon{animation-delay:1.2s!important}
html body #page-dashboard .navBox{animation:v71Rise .55s both!important}
html body #page-dashboard .navBox:nth-child(2){animation-delay:.07s!important}
html body #page-dashboard .navBox:nth-child(3){animation-delay:.14s!important}
html body #page-dashboard .navBox:nth-child(4){animation-delay:.21s!important}
html body #page-dashboard .navBox:nth-child(5){animation-delay:.28s!important}
html body #page-dashboard .navBox:nth-child(6){animation-delay:.35s!important}
html body #page-dashboard .navBox:nth-child(7){animation-delay:.42s!important}
html body #page-dashboard .navBox:nth-child(8){animation-delay:.49s!important}
html body #page-dashboard .reseller{animation:v71In .55s both!important}
html body #page-dashboard .reseller:nth-child(2){animation-delay:.08s!important}
html body #page-dashboard .reseller:nth-child(3){animation-delay:.16s!important}
html body #page-dashboard .reseller:nth-child(4){animation-delay:.24s!important}
html body #page-dashboard .reseller:nth-child(5){animation-delay:.32s!important}
html body #page-dashboard .gksPosters{animation:v71Rise .7s .1s both!important}
html body #page-dashboard .jc2{animation:v71Rise .6s .2s both!important}
html body .tapRing{animation:v71Ripple .7s ease-out!important}
html body #page-dashboard .statCard,html body #page-dashboard .navBox,html body #page-dashboard .reseller,html body #page-dashboard .balanceCard{transition:transform .18s ease,border-color .25s ease!important;transition-duration:.18s!important}
html body #page-dashboard .statCard:active,html body #page-dashboard .navBox:active,html body #page-dashboard .reseller:active,html body #page-dashboard .balanceCard:active{transform:scale(.972)!important}
@media (hover:hover){
  html body #page-dashboard .statCard:hover,html body #page-dashboard .navBox:hover,html body #page-dashboard .reseller:hover{transform:translateY(-3px)!important}
}
/* the same entrance on every other page's boxes */
html body .page-content:not(.hidden):not(#page-dashboard) .profile-card,
html body .page-content:not(.hidden):not(#page-dashboard) .history-card,
html body .page-content:not(.hidden):not(#page-dashboard) .deposit-history-item,
html body .page-content:not(.hidden):not(#page-dashboard) .box,
html body .page-content:not(.hidden):not(#page-dashboard) .rk-card,
html body .page-content:not(.hidden):not(#page-dashboard) .rk-mini{animation:v71Rise .55s both!important}

/* ---------- 2) AMBIENT BACKGROUND + POLISH ---------- */
#v71-bg{display:none!important}
html body #main-app{position:relative;z-index:1}
/* slim gold scrollbar */
html body ::-webkit-scrollbar{width:6px;height:6px}
html body ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#b279f3,#6aa6e0);border-radius:9px}
html body ::-webkit-scrollbar-track{background:transparent}
html body ::selection{background:rgba(178,121,243,.35);color:#fff}
/* section titles get a glowing underline */
html body .buy-plan-title,html body .profile-section-title{position:relative}
/* wallet pill */
html body .topHeader .balance #nav-balance,html body #nav-balance{font-variant-numeric:tabular-nums}
/* modal cards get the same gradient edge */
html body .modal-overlay .modal-box,html body .modal-overlay .modal-content{border-color:rgba(178,121,243,.45)!important}

/* ---------- 3) STORE VIDEO / BANNER FRAME ---------- */
html body #page-home #pc-list .pc-card{
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 26px rgba(214,127,76,.14),inset 0 1px 0 rgba(255,255,255,.07)!important}
html body #page-home #pc-list .pc-card .pc-media{
  position:relative!important;display:block!important;padding:0!important;margin:8px 0 0!important;border:1.5px solid rgba(158,109,213,.55)!important;border-radius:20px!important;overflow:hidden!important;
  background:#150c1e!important;box-shadow:0 10px 24px rgba(0,0,0,.45)!important}
html body #page-home #pc-list .pc-card .pc-media>img,
html body #page-home #pc-list .pc-card .pc-media>video,
html body #page-home #pc-list .pc-card .pc-media>.gks-vposter,
html body #page-home #pc-list .pc-card .pc-media>.gks-ytlazy,
html body #page-home #pc-list .pc-card .pc-media>iframe{
  display:block!important;width:100%!important;aspect-ratio:16/9!important;height:auto!important;max-height:none!important;border:0!important;border-radius:0!important;overflow:hidden!important;object-fit:cover!important;background:#150c1e!important}
html body #page-home #pc-list .pc-card .pc-media .gks-vposter img,
html body #page-home #pc-list .pc-card .pc-media .gks-ytlazy img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
html body #page-home #pc-list .pc-card .pc-media>.gks-vposter,html body #page-home #pc-list .pc-card .pc-media>.gks-ytlazy{position:relative!important}
/* soft dark fade at the bottom of the picture */
html body #page-home #pc-list .pc-card .pc-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(0deg,rgba(12,7,19,.5),transparent);pointer-events:none;z-index:1}
html body #page-home #pc-list .pc-card .pc-media .pc-badge{z-index:4!important}
/* round gold play button with a pulsing ring */
html body #page-home #pc-list .pc-card .pc-media .gks-ytplay{
  position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%);z-index:3;width:54px!important;height:54px!important;display:grid!important;place-items:center;border-radius:50%!important;
  background:linear-gradient(135deg,#d9bafd,#994cf2)!important;color:#140129!important;font-size:22px!important;padding-left:4px;border:0!important;
  box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 0 5px rgba(178,121,243,.18)!important}

/* ---------- DASHBOARD: clearly visible, continuous box animation ---------- */
@keyframes v71Bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes v71Shine{0%,35%{transform:translateX(-30%) rotate(20deg)}100%{transform:translateX(950%) rotate(20deg)}}
@keyframes v71Num{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes v71Glow{0%,100%{opacity:.35}50%{opacity:.9}}
/* every stat box: rise once, then float gently (staggered) */
html body #page-dashboard .statsGrid .statCard{--d:.12s;position:relative!important;overflow:hidden!important;
  animation:v71Rise .6s var(--d) cubic-bezier(.2,.9,.3,1) both,v71Bob 4.2s calc(var(--d) + .8s) ease-in-out 1!important}
html body #page-dashboard .statsGrid .statCard:nth-child(2){--d:.2s;animation-delay:.2s,1s!important}
html body #page-dashboard .statsGrid .statCard:nth-child(3){--d:.28s;animation-delay:.28s,1.5s!important}
html body #page-dashboard .statsGrid .statCard:nth-child(4){--d:.36s;animation-delay:.36s,2s!important}
html body #page-dashboard .statsGrid .statCard:nth-child(1){animation-delay:.12s,.9s!important}
/* shine bar crossing each box */
html body #page-dashboard .statCard::after,html body #page-dashboard .navBox::after,html body #page-dashboard .reseller::after{
  content:""!important;position:absolute!important;top:-80%!important;left:-70%!important;width:34%!important;height:260%!important;pointer-events:none!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)!important;transform:rotate(20deg);
  animation:v71Shine 4.6s ease-in-out 1!important;will-change:transform}
html body #page-dashboard .statCard:nth-child(2)::after{animation-delay:.6s!important}
html body #page-dashboard .statCard:nth-child(3)::after{animation-delay:1.2s!important}
html body #page-dashboard .statCard:nth-child(4)::after{animation-delay:1.8s!important}
html body #page-dashboard .navBox::after{animation-delay:.9s!important}
html body #page-dashboard .reseller::after{animation-delay:1.4s!important}
/* numbers breathe */
html body #page-dashboard .statCard .statValue{display:inline-block;transform-origin:left center;animation:v71Num 3.4s ease-in-out infinite!important}
html body #page-dashboard .balanceCard .balanceAmount{display:inline-block;transform-origin:left center;animation:v71Num 3.8s ease-in-out infinite!important}
/* big balance card: floats + soft light moving inside */
html body #page-dashboard .balanceCard.premiumClickable{animation:v71Rise .65s cubic-bezier(.2,.9,.3,1) both,v71Bob 5s 1s ease-in-out 1!important}
html body #page-dashboard .balanceCard .sideGlow{animation:v71Glow 3.6s ease-in-out 1!important}
html body #page-dashboard .balanceCard .sideGlow.blueSide{animation-delay:1.8s!important}
/* quick-access boxes + resellers float too */
html body #page-dashboard .navBox{position:relative!important;overflow:hidden!important;animation:v71Rise .55s both,v71Bob 4.6s 1.1s ease-in-out 1!important}
html body #page-dashboard .navBox:nth-child(even){animation-delay:.1s,1.6s!important}
html body #page-dashboard .navBox .navIcon{animation:v71Float 3.2s ease-in-out 1!important}

/* ---------- DASHBOARD BANNER (posters) ---------- */
html body #page-dashboard .gksPosters{
  position:relative!important;overflow:hidden!important;box-sizing:border-box!important;margin:12px 0 16px!important;padding:6px!important;border-radius:26px!important;
  background:linear-gradient(160deg,#29183d,#180e23)!important;border:1.5px solid rgba(158,109,213,.6)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.5),0 0 26px rgba(214,127,76,.12),inset 0 1px 0 rgba(255,255,255,.07)!important}
html body #page-dashboard .gksPosters .gks-dia{display:none!important}
html body #page-dashboard .gksPosters>.gksPostersTrack{border-radius:20px!important;overflow:hidden!important;aspect-ratio:1.95/1}
html body #page-dashboard .gksPosters>.gksPostersTrack>*{border-radius:20px!important}
html body #page-dashboard .gksPosters::after{content:"";position:absolute;left:6px;right:6px;bottom:6px;height:40%;border-radius:0 0 20px 20px;background:linear-gradient(0deg,rgba(12,7,19,.55),transparent);pointer-events:none;z-index:2}
html body #page-dashboard .gksPostersDots{bottom:16px!important;z-index:3}
html body #page-dashboard .gksPostersDots i{height:6px!important;background:rgba(255,255,255,.5)!important}
html body #page-dashboard .gksPostersDots i.on{width:22px!important;background:linear-gradient(90deg,#bb8def,#9e6dd5)!important;box-shadow:0 0 10px rgba(158,109,213,.6)}