:root{
  --wm:url("19a75b920722.png");
  --f9:#0d1030;
  --f8:#171b45;
  --f7:#262c66;
  --f6:#3a4289;
  --lime:#c8f542;
  --up:#c8f542;
  --dn:#ff5b61;
  --cream:#f6f8f1;
  --field:#eaeee3;
  --line:#d9e0cf;
  --t1:#14183f;
  --t2:#566a5e;
  --t3:#8a9a8f;
  --danger:#d6313a;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--f9)}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--t1);background:var(--f9);
  display:flex;justify-content:center;min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
[dir=rtl] body,[dir=rtl] input,[dir=rtl] button{font-family:"Noto Naskh Arabic","Noto Nastaliq Urdu","Geeza Pro","Segoe UI",Tahoma,system-ui,sans-serif}
[dir=rtl] *{letter-spacing:0!important}
[dir=rtl] body{line-height:1.6}
button,input{font-family:inherit}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

.app{
  width:100%;max-width:480px;min-height:100dvh;position:relative;overflow:hidden;
  display:flex;flex-direction:column;background:var(--cream);
}

/* ================= HERO ================= */
.hero{
  position:relative;flex:none;display:flex;flex-direction:column;contain:layout paint;
  height:clamp(380px,48dvh,450px);
  background:linear-gradient(180deg,var(--f9) 0%,var(--f8) 100%);
  padding-bottom:30px;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(200,245,66,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,245,66,.035) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);
}
#chart{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;animation:fadeIn 1.6s .3s forwards;
}
.fade{position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.fade.t{top:0;height:36%;background:linear-gradient(180deg,#0d1030 8%,rgba(14,17,48,0))}
.fade.b{bottom:0;height:20%;background:linear-gradient(0deg,#171b45 10%,rgba(24,26,29,0))}
@keyframes fadeIn{to{opacity:.95}}

.top{
  position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 0;
  animation:down .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes down{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.grp{display:flex;gap:2px;align-items:center}
.ib{
  position:relative;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:0;background:none;color:#fff;
  display:grid;place-items:center;
  transition:background .2s,transform .15s;
}
.ib:active{transform:scale(.9);background:rgba(255,255,255,.12)}
.ib svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] #back svg{transform:scaleX(-1)}
.dot{position:absolute;inset-inline-end:8px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--lime);border:2px solid var(--f9)}

/* language menu */
.langwrap{position:relative}
.menu{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:160px;padding:6px;
  background:var(--f7);border:1px solid rgba(255,255,255,.12);border-radius:16px;
  box-shadow:0 14px 32px rgba(0,0,0,.45);
  opacity:0;transform:translateY(-6px) scale(.96);transform-origin:top right;pointer-events:none;
  transition:opacity .18s,transform .18s;
}
[dir=rtl] .menu{transform-origin:top left}
.menu.open{opacity:1;transform:none;pointer-events:auto}
.opt{
  width:100%;height:46px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 14px;border:0;background:none;border-radius:11px;cursor:pointer;
  color:#fff;font-size:15px;font-weight:600;transition:background .15s;
}
.opt:hover{background:rgba(255,255,255,.07)}
.opt svg{width:18px;height:18px;stroke:var(--lime);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.opt.on{color:var(--lime)}
.opt.on svg{opacity:1}
.opt[data-l=ur]{font-size:17px}



/* brand (your logo) - animated, GPU-only (transform/opacity) */
.brand{
  --is:90px;
  position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;margin-top:28px;
}
.brand::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;width:340px;height:260px;transform:translate(-50%,-48%);
  background:radial-gradient(closest-side,rgba(14,17,48,.92) 0%,rgba(14,17,48,.74) 55%,rgba(14,17,48,0) 100%);
}
.floaty{animation:float 5.6s 1.3s ease-in-out infinite;will-change:transform}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.iconwrap{
  position:relative;width:var(--is);height:var(--is);
  animation:pop 1s .12s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes pop{
  0%{opacity:0;transform:translateY(-22px) scale(.55) rotate(-10deg)}
  55%{opacity:1;transform:translateY(0) scale(1.08) rotate(2.5deg)}
  100%{opacity:1;transform:none}
}
.ico{position:absolute;inset:0;border-radius:23%;overflow:hidden;clip-path:inset(0 round 23%)}
.icon{width:100%;height:100%;display:block}
.ico::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:38%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0));
  transform:translateX(-130%) skewX(-20deg);
  animation:sheen 5.2s 1.6s ease-in-out infinite;
}
@keyframes sheen{0%{transform:translateX(-130%) skewX(-20deg)}32%,100%{transform:translateX(380%) skewX(-20deg)}}
.iconwrap::before,.iconwrap::after{
  content:"";position:absolute;inset:0;border-radius:23%;
  border:1.5px solid rgba(200,245,66,.45);opacity:0;
  animation:ringout 3.4s 1.4s cubic-bezier(.2,.6,.3,1) infinite;
}
.iconwrap::after{animation-delay:3.1s}
@keyframes ringout{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.85)}}

.wm{
  position:relative;width:min(206px,58vw);aspect-ratio:720/158;margin-top:14px;
  background:var(--wm) center/100% 100% no-repeat;
  animation:wipe 1s .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes wipe{
  from{clip-path:inset(0 100% 0 0);opacity:0;transform:translateX(-10px)}
  25%{opacity:1}
  to{clip-path:inset(0 0 0 0);opacity:1;transform:none}
}
.shine{
  position:absolute;inset:0;overflow:hidden;
  -webkit-mask:var(--wm) center/100% 100% no-repeat;mask:var(--wm) center/100% 100% no-repeat;
}
.shine::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:34%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));
  transform:translateX(-140%) skewX(-18deg);
  animation:wsheen 5.2s 2.2s ease-in-out infinite;
}
@keyframes wsheen{0%{transform:translateX(-140%) skewX(-18deg)}30%,100%{transform:translateX(420%) skewX(-18deg)}}

.rule{
  position:relative;width:132px;height:2px;margin-top:18px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.12);
  animation:rise .7s 1s cubic-bezier(.2,.8,.2,1) both;
}
.rule::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:38%;
  background:linear-gradient(90deg,rgba(200,245,66,0),#c8f542,rgba(200,245,66,0));
  transform:translateX(-120%);
  animation:run 2.8s 1.5s ease-in-out infinite;
}
@keyframes run{0%{transform:translateX(-120%)}70%,100%{transform:translateX(310%)}}

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



/* ================= SHEET ================= */
.sheet{
  position:relative;z-index:4;flex:1;display:flex;flex-direction:column;
  margin-top:-30px;background:var(--cream);border-radius:30px 30px 0 0;
  padding:22px 22px calc(env(safe-area-inset-bottom) + 18px);
  animation:sheetUp .8s .2s cubic-bezier(.2,.85,.2,1) both;
}
@keyframes sheetUp{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}

.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--field);border-radius:15px;padding:4px}
.tabs button{position:relative;z-index:2;background:none;border:0;color:var(--t2);font-size:14.5px;font-weight:700;padding:12px 0;cursor:pointer;transition:color .3s}
.tabs button.on{color:var(--lime)}
.thumb{
  position:absolute;z-index:1;top:4px;bottom:4px;inset-inline-start:4px;width:calc(50% - 4px);
  background:var(--f8);border-radius:11px;
  transition:transform .35s cubic-bezier(.5,.1,.2,1);
}
.tabs.reg .thumb{transform:translateX(100%)}
[dir=rtl] .tabs.reg .thumb{transform:translateX(-100%)}

.head{margin:22px 0 18px}
.head.sw{animation:rise .5s cubic-bezier(.2,.8,.2,1)}
.head h1{font-size:25px;font-weight:800;letter-spacing:-.5px;color:var(--t1)}
.head p{font-size:14px;color:var(--t2);margin-top:5px}
[dir=rtl] .head h1{font-size:27px}
[dir=rtl] .head p{font-size:15px}

form{display:none;flex:1;flex-direction:column}
form.on{display:flex}
.fields{flex:1}
form.on .fields>*,form.on .actions{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
form.on .fields>*:nth-child(1){animation-delay:.03s}
form.on .fields>*:nth-child(2){animation-delay:.09s}
form.on .fields>*:nth-child(3){animation-delay:.15s}
form.on .fields>*:nth-child(4){animation-delay:.21s}
form.on .fields>*:nth-child(5){animation-delay:.27s}
form.on .actions{animation-delay:.3s}

.f{margin-bottom:15px}
.f label{display:block;font-size:13px;font-weight:600;color:var(--t1);margin:0 0 8px 2px}
[dir=rtl] .f label{margin:0 2px 8px 0;font-size:14.5px}
.box{
  display:flex;align-items:center;gap:12px;height:54px;padding:0 15px;
  background:var(--field);border:2px solid transparent;border-radius:14px;
  transition:border-color .2s,background .2s;
}
.box.ph{direction:ltr}
.box:hover{border-color:var(--line)}
.box:focus-within{border-color:var(--f8);background:#fff}
.box.err{border-color:var(--danger);background:#fff;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.box>svg{flex:none;width:20px;height:20px;stroke:var(--t3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.box:focus-within>svg{stroke:var(--f8)}
.box input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--t1);font-size:16px;font-weight:500}
.box input::placeholder{color:#a0aea4;font-weight:400;text-transform:none}
.cc{flex:none;font-size:15px;font-weight:700;color:var(--t1);padding-right:12px;border-right:2px solid var(--line);line-height:22px}
.eye{background:none;border:0;cursor:pointer;display:grid;place-items:center;padding:8px;margin-inline-end:-8px}
.eye svg{width:20px;height:20px;stroke:var(--t3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.eye:hover svg{stroke:var(--t1)}
.msg{display:none;font-size:12.5px;color:var(--danger);margin:7px 2px 0}
.f.bad .msg{display:block}

.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:9px 2px 0}
.meter span{height:3px;border-radius:3px;background:#d9e0cf;transition:background .25s}

.row{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 6px}
.sw2{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--t2);cursor:pointer}
.sw2 input{display:none}
.sw2 i{position:relative;flex:none;width:42px;height:24px;border-radius:12px;background:#cdd6c3;transition:background .25s;direction:ltr}
.sw2 i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.4,.1,.2,1),background .25s}
.sw2 input:checked+i{background:var(--f8)}
.sw2 input:checked+i::after{transform:translateX(18px);background:var(--lime)}
.link{background:none;border:0;color:var(--f7);font-size:14px;font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(38,44,102,.3);text-underline-offset:3px;transition:color .2s}
.link:hover{color:#000}

.chk{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--t2);cursor:pointer;line-height:1.5}
.chk input{display:none}
.chk i{flex:none;width:22px;height:22px;border-radius:7px;border:2px solid #b9c5ae;background:#fff;display:grid;place-items:center;transition:.2s}
.chk i svg{width:12px;height:12px;stroke:var(--lime);stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:.2s}
.chk input:checked+i{background:var(--f8);border-color:var(--f8)}
.chk input:checked+i svg{opacity:1;transform:none}
.chk a{color:var(--f7);font-weight:700}
.terms{margin:2px 2px 6px}
.terms.bad .chk i{border-color:var(--danger)}
[data-i=t2]:not(:empty){margin-inline-start:.3em}

.actions{
  position:sticky;bottom:0;margin:0 -22px;padding:14px 22px 2px;
  background:linear-gradient(180deg,rgba(246,248,241,0),var(--cream) 28%);
}
.go{
  width:100%;height:58px;border:0;border-radius:16px;cursor:pointer;
  font-size:16.5px;font-weight:700;letter-spacing:.2px;color:var(--lime);
  background:var(--f8);
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .12s,background .2s,opacity .2s;
}
.go svg{width:20px;height:20px;stroke:var(--lime);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.go:hover{background:var(--f7)}
.go:hover svg{transform:translateX(4px)}
[dir=rtl] .go svg{transform:scaleX(-1)}
[dir=rtl] .go:hover svg{transform:scaleX(-1) translateX(4px)}
.go:active{transform:scale(.985)}
.go[disabled]{opacity:.8;pointer-events:none}
.spin{display:none;width:20px;height:20px;border:3px solid rgba(200,245,66,.3);border-top-color:var(--lime);border-radius:50%;animation:sp .7s linear infinite}
.go.load .spin{display:block}
.go.load .t,.go.load svg{display:none}
@keyframes sp{to{transform:rotate(360deg)}}
.alt{text-align:center;margin-top:16px;font-size:14px;color:var(--t2)}
.alt .link{margin-inline-start:5px}

.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);
  transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:30;
  background:var(--f8);color:#fff;border-left:4px solid var(--lime);
  padding:13px 18px;border-radius:12px;font-size:14px;font-weight:500;max-width:90vw;
  transition:.3s;box-shadow:0 8px 24px rgba(14,17,48,.3);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.no{border-left-color:var(--dn)}

@media (max-height:720px){.brand{--is:72px;margin-top:10px}.wm{width:min(170px,50vw);margin-top:10px}.rule{margin-top:12px}}
@media (min-width:481px){
  body{align-items:center;background:#040609}
  .app{min-height:min(100dvh,900px);border-radius:28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #chart{opacity:.95}
  .wm{clip-path:none}
}
/* ================= Pakbaazi — FLAT PRO THEME ================= */
:root{--f9:#262c66;--f8:#353d81;--f7:#383b40;--f6:#343639;--lime:#3cf0bd;--up:#3cf0bd;--dn:#ff5f5f;--cream:#262c66;--field:#353d81;--line:rgba(255,255,255,.07);--t1:#fff;--t2:#a0a5b1;--t3:#6e737e;--danger:#ff5f5f}
html,body,.app{background:#262c66}
.hero{background:radial-gradient(120% 90% at 50% 0%,rgba(60,240,189,.22) 0%,rgba(60,240,189,0) 60%),#2c2f33!important}
.hero::before{background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px)!important}
.fade.t{background:linear-gradient(180deg,#2c2f33 8%,rgba(30,32,35,0))!important}
.fade.b{background:linear-gradient(0deg,#2c2f33 10%,rgba(30,32,35,0))!important}
.brand::before{background:radial-gradient(closest-side,rgba(22,26,66,.85) 0%,rgba(22,26,66,.5) 55%,rgba(22,26,66,0))!important}
.rule::after{background:linear-gradient(90deg,rgba(60,240,189,0),#3cf0bd,rgba(60,240,189,0))}
.menu{background:#353d81}
.sheet{background:#262c66;color:#fff}
.tabs{background:#353d81}
.thumb{background:#444c95!important;box-shadow:none}
.tabs button{color:#a0a5b1}.tabs button.on{color:#fff!important}
.box{background:#353d81;border-color:transparent}
.box:focus-within,.box.err{background:#353d81!important}
.box:focus-within{border-color:#3cf0bd!important}
.box input{color:#fff}.box input::placeholder{color:#6e737e}
.box svg{color:#a0a5b1}
.meter span{background:#444c95}
.sw2 i{background:#444c95}.sw2 input:checked+i{background:#3cf0bd}.sw2 input:checked+i::after{background:#fff}
.chk i{background:#353d81;border-color:#3a3d44}.chk input:checked+i{background:#3cf0bd;border-color:transparent}
.link{color:#3cf0bd}
.actions{background:linear-gradient(180deg,rgba(22,26,66,0),#262c66 28%)}
.go,.go:hover{background:linear-gradient(90deg,#3cf0bd,#9fe871)!important;color:#0b0d2a!important;box-shadow:none}
.go:active{transform:scale(.98)}
.go svg{stroke:#0b0d2a!important}
.toast{background:#444c95;border-left-color:#3cf0bd}
@media (min-width:481px){body{background:#1a1c1d}}
/* ================= PRO THEME ================= */
:root{--f9:#181c48;--f8:#384086;--f7:#48509b;--f6:#3b5566;--lime:#20d6a4;--up:#20d6a4;--dn:#ff4d5e;--cream:#272e69;--field:#181c48;--line:rgba(255,255,255,.07);--t1:#fff;--t2:#b1bad3;--t3:#7f8ea3;--danger:#ff4d5e}
html,body,.app{background:#272e69!important}
.hero{background:#181c48!important}
.hero::before{background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px)!important}
.fade.t{background:linear-gradient(180deg,#181c48 8%,rgba(25,29,72,0))!important}
.fade.b{background:linear-gradient(0deg,#181c48 10%,rgba(25,29,72,0))!important}
.brand::before{background:radial-gradient(closest-side,rgba(25,29,72,.9) 0%,rgba(25,29,72,.55) 55%,rgba(25,29,72,0))!important}
.rule::after{background:#20d6a4!important}
.sheet{background:#272e69!important;border-radius:16px 16px 0 0!important}
.tabs{background:#181c48!important;border-radius:10px!important}
.thumb{background:#48509b!important;border-radius:8px!important;box-shadow:none!important}
.box{background:#181c48!important;border:1px solid #48509b!important;border-radius:10px!important}
.box:focus-within{border-color:#3d8bff!important}
.box.err{border-color:#ff4d5e!important}
.sw2 input:checked+i{background:#20d6a4!important}
.chk input:checked+i{background:#20d6a4!important}
.link{color:#20d6a4!important}
.actions{background:linear-gradient(180deg,rgba(36,38,41,0),#272e69 28%)!important}
.go,.go:hover{background:#20d6a4!important;color:#13163d!important;border-radius:10px!important;box-shadow:none!important;text-shadow:none!important}
.go:hover{background:#25e27a!important}
.go:active{transform:translateY(1px)!important}
.go svg{stroke:#13163d!important}
.menu{background:#384086!important;border-radius:10px!important}
.toast{background:#48509b!important;border-left-color:#20d6a4!important;border-radius:10px!important}
/* ===== platform: loader, side menu, zoom lock ===== */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.swlock,html.swlock body{overflow:hidden}
.swL{position:fixed;inset:0;z-index:9999;display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#1e2356;transition:opacity .3s}
.swL.on{display:flex}.swL.out{opacity:0}
.swL.nav{background:rgba(29,31,34,.92)}
.swLb{display:flex;align-items:center;gap:10px;animation:swPu 1.2s ease-in-out infinite}
.swLb i,.swDl i{width:44px;height:44px;border-radius:12px;background:#20d6a4;color:#13163d;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:24px;font-family:Inter,Arial,sans-serif}
.swLb b,.swDl b{font:900 24px/1 Inter,Arial,sans-serif;color:#fff;letter-spacing:-.4px}.swLb b span,.swDl b span{color:#20d6a4}
@keyframes swPu{50%{transform:scale(1.04);opacity:.85}}
.swLp{width:140px;height:4px;border-radius:2px;background:#384086;overflow:hidden}
.swLp i{display:block;width:40%;height:100%;border-radius:2px;background:#20d6a4;animation:swLp 1s ease-in-out infinite}
@keyframes swLp{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.swW{position:fixed;inset:0;z-index:400;background:rgba(8,10,34,0);pointer-events:none;transition:background .25s}
.swW.on{background:rgba(8,10,34,.62);pointer-events:auto}
.swD{position:absolute;top:0;bottom:0;left:0;width:min(320px,86vw);overflow-y:auto;overscroll-behavior:contain;background:#272e69;transform:translateX(-102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);padding:0 0 calc(24px + env(safe-area-inset-bottom));font-family:Inter,'Noto Naskh Arabic',Arial,sans-serif}
.swW[dir=rtl] .swD{left:auto;right:0;transform:translateX(102%)}
.swW.on .swD{transform:none}
.swDh{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;background:#181c48}
.swDl{display:flex;align-items:center;gap:8px}.swDl i{width:34px;height:34px;font-size:18px;border-radius:9px}.swDl b{font-size:18px}
.swX{width:38px;height:38px;border-radius:10px;background:#384086;display:grid;place-items:center;color:#fff;border:0}
.swi{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.swU{display:flex;align-items:center;gap:12px;margin:14px 14px 0;padding:12px;border-radius:12px;background:#384086}
.swUa{width:46px;height:46px;border-radius:12px;background:#48509b;display:grid;place-items:center;font-weight:900;font-size:20px;color:#20d6a4}
.swUn b{display:block;font-size:15px;color:#fff}.swUn small{display:block;font-size:11.5px;color:#8fa0b3;margin-top:2px}.swUn em{font-style:normal;font-weight:900;font-size:16px;color:#ffbe2e;direction:ltr;unicode-bidi:isolate}
.swB{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 14px 0}
.swB a{height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:800;font-size:14px;text-decoration:none}
.swP{background:#20d6a4;color:#13163d}.swG{background:#48509b;color:#fff}
.swS{margin:16px 10px 0}
.swS h4{margin:0 6px 6px;font-size:11.5px;font-weight:800;letter-spacing:.8px;color:#6f8293;text-transform:uppercase}
.swm,.swT button{display:flex;align-items:center;gap:12px;width:100%;height:46px;padding:0 12px;border-radius:10px;color:#d5dceb;text-decoration:none;font-size:14.5px;font-weight:700;background:none;border:0;text-align:start;font-family:inherit}
.swm:active,.swT button:active{background:#384086}
.swm.on{background:#384086;color:#fff;box-shadow:inset 3px 0 0 #20d6a4}
.swW[dir=rtl] .swm.on{box-shadow:inset -3px 0 0 #20d6a4}
.swm .swi,.swT .swi{color:#8fa0b3}
.swT em{margin-inline-start:auto;font-style:normal;font-size:12.5px;font-weight:800;color:#20d6a4}
.swO{color:#ff6b78!important}.swO .swi{color:#ff6b78!important}
.swGm{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:6px}
.swGm a{display:flex;align-items:center;gap:8px;height:42px;padding:0 8px;border-radius:10px;background:#333b7e;color:#fff;text-decoration:none;font-size:13px;font-weight:700}
.swGm i{flex:0 0 26px;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:13px;color:#fff}
.swMb{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;border:0;flex:0 0 40px}
.swMb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.swAg{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,10,34,.88);font-family:Inter,'Noto Naskh Arabic',Arial,sans-serif}
.swAgB{width:min(340px,100%);padding:24px 20px 18px;border-radius:18px;background:#384086;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.swAgI{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;border:3px solid #ff4d5e;color:#ff4d5e;display:grid;place-items:center;font-weight:900;font-size:20px}
.swAgB h3{font-size:19px;font-weight:800;color:#fff;margin:0 0 8px}
.swAgB p{font-size:13.5px;line-height:1.6;color:#c3cedb;margin:0 0 16px}
.swAgY,.swAgN{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:48px;border:0;border-radius:12px;font:800 15px/1 inherit;margin-top:8px}
.swAgY{background:#20d6a4;color:#13163d}.swAgN{background:#48509b;color:#fff}
.swAgB a{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:#20d6a4;text-decoration:none}
/* home header on small phones: keep the logo whole, language lives in the menu */
.lh .logo{min-width:0}.lh .logo>i{flex:0 0 auto}.lh .logo b{white-space:nowrap}
@media (max-width:430px){.lh .lng{display:none}}
/* mobile-only: no desktop scrollbars eating the width */
html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
/* header fits 360–400px phones even with a big balance */
@media (max-width:400px){
.lh{gap:6px!important;padding-left:10px!important;padding-right:10px!important}
.lh .swMb{width:36px;height:36px;flex:0 0 36px}
.lh .logo{gap:6px}.lh .logo>i{width:30px;height:30px;font-size:16px}.lh .logo b{font-size:15px;letter-spacing:-.4px}
.lh .balc{padding:0 8px;gap:5px}.lh .balc b{font-size:12.5px}.lh .balc .cn{width:16px;height:16px}
.lh .lhr .gdep{padding:0 10px;font-size:12px}
}
.lh.tight .logo>div{display:none}
/* ===== v34 wordmark + loader ===== */
.swWm{display:inline-block;font:900 22px/1 Inter,Arial,sans-serif;letter-spacing:-.9px;color:#fff;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.swWm span{color:#20d6a4;letter-spacing:-.6px}
.lh .logo{display:flex;align-items:center;text-decoration:none;min-width:0}
.lh .logo .swWm{font-size:22px}
.lh.tight .logo .swWm{font-size:18px}
.swDl .swWm{font-size:23px}
.swL:not(.nav){background:#181c48!important}.swL{gap:0!important}
.swLw{display:flex;flex-direction:column;align-items:center}
.swLw .swWm{position:relative;font-size:38px;letter-spacing:-1.5px;background:linear-gradient(100deg,#fff 0%,#fff 38%,#c9fff0 46%,#fff 54%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:swSh 1.6s ease-in-out infinite}
.swLw .swWm span{background:linear-gradient(100deg,#20d6a4 0%,#20d6a4 38%,#b6fff0 46%,#20d6a4 54%,#20d6a4 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:swSh 1.6s ease-in-out infinite}
@keyframes swSh{0%{background-position:100% 0}100%{background-position:0 0}}
.swLw .swLp{width:168px;height:4px;margin-top:22px;border-radius:2px;background:#384086;overflow:hidden}
.swLw .swLp i{display:block;width:0;height:100%;border-radius:2px;background:#20d6a4;box-shadow:0 0 10px rgba(32,214,164,.7);animation:swFill 2.4s cubic-bezier(.15,.8,.25,1) forwards;transform:none}
.swL.out .swLw .swLp i{width:100%!important;animation:none;transition:width .18s}
@keyframes swFill{0%{width:0}35%{width:48%}70%{width:78%}100%{width:93%}}
@property --swp{syntax:'<integer>';inherits:false;initial-value:0}
.swLn{margin-top:10px;font:700 12px/1 Inter,Arial,sans-serif;color:#6f8293;letter-spacing:.6px;--swp:0;counter-reset:swp var(--swp);animation:swCnt 2.4s cubic-bezier(.15,.8,.25,1) forwards}
.swLn::after{content:counter(swp) "%"}
.swL.out .swLn{--swp:100;animation:none}
@keyframes swCnt{0%{--swp:0}35%{--swp:48}70%{--swp:78}100%{--swp:93}}
.swL.nav .swLw .swLp i,.swL.nav .swLn{animation-duration:1.2s}
/* ===== v38 bottom nav ===== */
html body .bnav{height:66px!important;padding:0 6px 8px!important;border-radius:22px!important;background:transparent!important;border:0!important;box-shadow:none!important;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s,width .32s!important;transform-origin:50% 100%}
html body .bnav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:22px;background:#161a43;border:1px solid rgba(255,255,255,.09);
  -webkit-mask:radial-gradient(circle 35px at 50% -2px,transparent 34px,#000 35px);mask:radial-gradient(circle 35px at 50% -2px,transparent 34px,#000 35px)}
html body .bnav::after{content:"";position:absolute;left:8%;right:8%;bottom:-4px;height:18px;z-index:-2;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(10px)}
html body .bnav a{color:#7d8fa1!important;font-size:11px!important;font-weight:700!important;gap:4px!important}
html body .bnav a::after,html body .bnav a.on::after{display:none!important;content:none!important}
html body .bnav a>svg.i{width:44px!important;height:30px!important;padding:4px 10px!important;border-radius:11px!important;background:transparent!important;color:inherit!important;transition:background .2s,color .2s,transform .15s}
html body .bnav a:active>svg.i{transform:scale(.9)}
html body .bnav a.on,html body .bnav[data-cur=home] a[data-tab=home]{color:#fff!important}
html body .bnav:not([data-cur=home]) a[data-tab=home]:not(.on){color:#7d8fa1!important}
html body .bnav a.on>svg.i,html body .bnav[data-cur=home] a[data-tab=home]>svg.i{background:rgba(32,214,164,.16)!important;color:#20d6a4!important}
html body .bnav:not([data-cur=home]) a[data-tab=home]:not(.on)>svg.i{background:transparent!important;color:inherit!important}
html body .bnav .spin.prz{color:#ffd36b!important;font-weight:900!important}
html body .bnav .spin.prz .ring{bottom:22px!important;width:58px!important;height:58px!important;margin-left:-29px!important;padding:0!important;background:none!important;box-shadow:none!important}
html body .bnav .spin.prz .ring::before{display:none!important}
html body .bnav .spin.prz .ring span{position:relative;padding:3px!important;background:linear-gradient(160deg,#fff1a8 0%,#ffcb2e 40%,#e08e00 100%)!important;box-shadow:0 5px 14px rgba(255,170,20,.35),0 0 0 4px #161a43}
html body .bnav .spin.prz .ring span::after{display:none!important;content:none!important}
html body .bnav .spin.prz .ring span svg{border-radius:50%;animation:none!important}
html body .bnav .spin.prz.on .ring span{background:linear-gradient(160deg,#c9fff0 0%,#34e080 40%,#0f9a4f 100%)!important;box-shadow:0 5px 14px rgba(32,214,164,.35),0 0 0 4px #161a43}
html body .bnav .spin.prz.on{color:#4ff09a!important}
html body .bnav .spin.prz:active .ring span{transform:scale(.93)}
html body .bnav .dot{top:7px!important;left:calc(50% + 10px)!important;box-shadow:0 0 0 2px #161a43!important}
/* scroll down: the bar gets small and faded; scroll up: back to normal */
html body .bnav.bnmin{transform:translateX(-50%) translateY(10px) scale(.82)!important;opacity:.45}
html body .bnav.bnmin:hover,html body .bnav.bnmin:active{opacity:1}
/* no scrollbars anywhere (games, sheets, lists) — mobile-style */
*{scrollbar-width:none!important}*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
/* ===== v51 bottom nav: solid glass bar, glowing active marker; on scroll it becomes a compact icon bar (never see-through) ===== */
html body .bnav::before{background:linear-gradient(180deg,rgba(38,44,102,.97),rgba(20,22,25,.97))!important;border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html body .bnav::after{left:6%;right:6%;bottom:-6px;height:22px;background:rgba(0,0,0,.6)!important;filter:blur(12px)}
html body .bnav a{position:relative;transition:color .2s,font-size .25s,gap .25s!important}
html body .bnav a>svg.i{width:26px!important;height:26px!important;padding:0!important;border-radius:0!important;background:none!important;transition:transform .2s,color .2s,filter .2s}
html body .bnav a.on>svg.i,html body .bnav[data-cur=home] a[data-tab=home]>svg.i{background:none!important;color:#33e3b0!important;filter:drop-shadow(0 0 8px rgba(51,227,176,.55));transform:translateY(-1px)}
html body .bnav a:not(.spin)::before{content:'';position:absolute;top:0;left:50%;width:0;height:3px;border-radius:0 0 4px 4px;background:#33e3b0;box-shadow:0 0 12px 2px rgba(51,227,176,.6);transform:translateX(-50%);transition:width .25s}
html body .bnav a.on:not(.spin)::before,html body .bnav[data-cur=home] a[data-tab=home]::before{width:22px}
html body .bnav:not([data-cur=home]) a[data-tab=home]:not(.on)::before{width:0}
html body .bnav:not([data-cur=home]) a[data-tab=home]:not(.on)>svg.i{color:inherit!important;filter:none;transform:none}
html body .bnav .spin.prz .ring span{box-shadow:0 6px 18px rgba(255,170,20,.4),0 0 0 4px #20255a!important}
html body .bnav .spin.prz .ring{transition:transform .3s cubic-bezier(.2,.8,.2,1)!important}
/* compact on scroll down */
html body .bnav.bnmin{transform:translateX(-50%) translateY(6px)!important;opacity:1!important;height:52px!important;padding-bottom:0!important}
html body .bnav.bnmin a{font-size:0!important;gap:0!important}
html body .bnav.bnmin a>svg.i{transform:none}
html body .bnav.bnmin .spin.prz .ring{transform:translateY(12px) scale(.78)}
html body .bnav.bnmin .dot{top:9px!important}
@media (prefers-reduced-motion:reduce){html body .bnav,html body .bnav *{transition:none!important}}
html body .bnav.bnmin a{justify-content:center!important}
html body .bnav.bnmin{align-items:stretch!important}
html body .bnav a:not(.spin)::before{display:block!important;margin-left:0!important}
html body .bnav a:not(.spin)::before{display:none!important}
/* ===== v51 page loader: the Pakbaazi chip races forward on a glowing track, eases back, races again ===== */
.swRl{position:relative;width:200px;height:64px}
.swTr{position:absolute;left:0;right:0;bottom:6px;height:3px;border-radius:2px;background:linear-gradient(90deg,rgba(32,214,164,0),rgba(32,214,164,.55) 20%,rgba(32,214,164,.55) 80%,rgba(32,214,164,0));box-shadow:0 0 12px rgba(32,214,164,.35)}
.swWh{position:absolute;left:50%;bottom:9px;width:48px;height:48px;margin-left:-24px;animation:swRun 1.7s cubic-bezier(.65,0,.35,1) infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.swWh svg{display:block;width:100%;height:100%;animation:swRot 1.7s cubic-bezier(.65,0,.35,1) infinite}
@keyframes swRun{0%{transform:translateX(-72px)}46%{transform:translateX(72px)}54%{transform:translateX(72px)}100%{transform:translateX(-72px)}}
@keyframes swRot{0%{transform:rotate(0)}46%{transform:rotate(345deg)}54%{transform:rotate(345deg)}100%{transform:rotate(0)}}
.swSp{position:absolute;left:50%;bottom:16px;width:60px;height:34px;margin-left:-84px;animation:swRunS 1.7s cubic-bezier(.65,0,.35,1) infinite;pointer-events:none}
.swSp i{position:absolute;right:0;height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(51,227,176,0),#33e3b0)}
.swSp i:nth-child(1){top:4px;width:34px}.swSp i:nth-child(2){top:15px;width:52px}.swSp i:nth-child(3){top:26px;width:26px}
@keyframes swRunS{0%{transform:translateX(-72px);opacity:0}12%{opacity:1}40%{opacity:1}46%{transform:translateX(72px);opacity:0}100%{transform:translateX(-72px);opacity:0}}
.swLw .swWm{font-size:26px!important;margin-top:14px}
.swLw .swLp{display:none!important}
.swLn{margin-top:12px!important}
.swL.nav .swWh,.swL.nav .swWh svg,.swL.nav .swSp{animation-duration:1.1s}
@media (prefers-reduced-motion:reduce){.swWh,.swWh svg,.swSp{animation:none!important}}
/* ===== v52 page loader: only the Pakbaazi logo — the chip rolls in, the letters pop up, a shine sweeps, then only the coin keeps turning. No bar, no counter. ===== */
.swLw .swRl,.swLw .swLp,.swLw .swLn,.swLw>.swWm{display:none!important}
.swLd{width:min(60vw,240px)}
.swLd .ldlogo{display:block;width:100%;height:auto;overflow:visible}
.swL:not(.nav){background:rgba(12,15,44,.28)!important;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.swLd .ldlogo{filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.ld-car,.ld-chip,.ld-l,.ld-win,.ld-sp,.ld-glw{transform-box:fill-box}
/* plays once: logo slides in, letters pop, shine sweeps. After that it stays put and only the coin keeps turning */
.ld-car{transform-origin:50% 100%;animation:ldCar 1s cubic-bezier(.3,0,.2,1) both}
@keyframes ldCar{0%{transform:translateX(-120%);opacity:0}15%{opacity:1}75%{transform:translateX(3%)}100%{transform:translateX(0);opacity:1}}
.ld-chip{transform-origin:50% 50%;animation:ldChipIn 1s cubic-bezier(.25,.1,.25,1) both,ldChipSp 2.2s linear 1s infinite}
@keyframes ldChipIn{0%{transform:rotate(-720deg)}100%{transform:rotate(0)}}
@keyframes ldChipSp{to{transform:rotate(360deg)}}
.ld-l{transform-origin:50% 100%;animation:ldPop .5s cubic-bezier(.2,1.5,.4,1) both}
.ld-d{animation-delay:.45s}.ld-a1{animation-delay:.55s}.ld-a2{animation-delay:.65s}
@keyframes ldPop{0%{transform:scaleY(0) scaleX(.6)}60%{transform:scaleY(1.18) scaleX(.95)}100%{transform:scale(1)}}
.ld-win{transform-origin:50% 50%;animation:ldWin .5s cubic-bezier(.2,1.6,.4,1) .95s both}
@keyframes ldWin{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.ld-shn{animation:ldShn .9s ease-in-out 1.3s both}
@keyframes ldShn{0%{transform:translateX(0)}100%{transform:translateX(560px)}}
.ld-sp{transform-origin:100% 50%;animation:ldSp .5s cubic-bezier(.3,.6,.4,1) 3;animation-delay:var(--d);opacity:0}
@keyframes ldSp{0%{transform:translateX(30px) scaleX(.3);opacity:0}30%{opacity:1}100%{transform:translateX(-70px) scaleX(1.3);opacity:0}}
.ld-spw{animation:ldSpw 1s linear both}
@keyframes ldSpw{0%,70%{opacity:1}100%{opacity:0}}
.ld-glw{transform-origin:50% 50%;animation:ldGlw 1s ease-out both}
@keyframes ldGlw{0%{opacity:0;transform:scaleX(.3)}100%{opacity:.5;transform:scaleX(1)}}
.swL.nav .ld-car,.swL.nav .ld-spw,.swL.nav .ld-glw{animation-duration:.6s}
@media (prefers-reduced-motion:reduce){.ldlogo *{animation:none!important;transform:none!important;opacity:1!important}}

/* smoother page switches: cross-fade between pages, loader covers everything (no half-loaded nav flash), no heavy logo effects */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
.swL{z-index:2147483000!important}

.swDf .swAgB{max-height:88vh;overflow:auto;text-align:start}
.swDf h3{text-align:center}
.swDl2{margin:0 0 14px;padding:0 0 0 18px;font-size:13px;line-height:1.55;color:#c3cedb}
.swDl2 li{margin-bottom:8px}
[dir=rtl] .swDl2{padding:0 18px 0 0}
/* win-chance dots: 20 dots, green = wins, red = losses */
.swGd{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:4px auto 14px;max-width:260px}
.swGd i{aspect-ratio:1;border-radius:50%;background:#e5484d;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.swGd i.w{background:#20d6a4;box-shadow:0 0 10px rgba(32,214,164,.55),inset 0 -2px 0 rgba(0,0,0,.2)}
.swDl2 b,.swGl b{color:#ffbe2e}
.swGc{text-align:center;font-size:11px;color:#8da0b0;margin:-8px 0 14px}

/* ===== first open: the loader is a solid cover while the site starts, so the default screen never shows through (screen switches: see v60 below) ===== */
html,body{background-color:#181c48}
.swL.on:not(.nav){background:#181c48!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.swL.nav.out{animation:none}
@keyframes swFi{from{opacity:0}to{opacity:1}}
/* arriving from another screen: the logo is already settled (no second intro), only the coin keeps turning */
.swL.cont .ld-car,.swL.cont .ld-l,.swL.cont .ld-win,.swL.cont .ld-glw{animation:none!important}
.swL.cont .ld-chip{animation:ldChipSp 2.2s linear infinite!important}
.swL.cont .ld-sp,.swL.cont .ld-spw{animation:none!important;opacity:0}
.swL.cont .ld-shn{animation:none!important;transform:translateX(560px)}
.swL.cont .ld-glw{opacity:.5}
.swLm{display:none;margin-top:26px;max-width:290px;text-align:center}
.swLm.on{display:block}
.swLm p{margin:0 0 14px;font:600 13.5px/1.5 Inter,Arial,sans-serif;color:#c3cedb}
.swLm.slow p{color:#ffbe2e}
.swLm div{display:flex;gap:10px;justify-content:center}
.swLm button{height:42px;padding:0 20px;border-radius:12px;border:0;font:800 14px Inter,Arial,sans-serif;cursor:pointer}
.swLr{background:#20d6a4;color:#13163d}.swLc{background:#3a4289;color:#e6edf3}

/* ===== v60 screen switch: the same Pakbaazi logo loader as before, but over the current screen (light blur, no solid dark cover).
   The arriving screen shows as soon as it is drawn; the logo only stays up there if the screen still needs a moment ===== */
.swL.nav{background:rgba(12,15,44,.62);animation:swFi .2s ease-out both}
html.swn #swL:not(.late){visibility:hidden}
/* the bottom bar is the same on every screen, so it stays in place during the switch */
#bnav{view-transition-name:swbnav}
::view-transition-group(swbnav){animation-duration:0s}
/* ===== slider captcha ===== */
.capO{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(8,10,34,.74)}
.capO.on{display:flex}
.capB{width:min(340px,100%);padding:16px;border-radius:16px;background:#384086;box-shadow:0 20px 50px rgba(0,0,0,.45);animation:capIn .25s ease;font-family:Inter,'Noto Naskh Arabic',Arial,sans-serif}
@keyframes capIn{from{transform:translateY(14px) scale(.96);opacity:0}}
.capH{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.capT{display:block;font-size:17px;font-weight:800;color:#fff}.capS{display:block;margin-top:3px;font-size:12.5px;color:#9fb0c2;line-height:1.45}
.capX{flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:#48509b;border:0;display:grid;place-items:center}
.capX svg,.capR svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.capV{position:relative;width:100%;aspect-ratio:300/170;border-radius:10px;overflow:hidden;background:#1b2050;direction:ltr}
.capBg{position:absolute;inset:0;width:100%;height:100%}
.capPc{position:absolute;left:0;top:0;height:100%;width:calc(68/300*100%);will-change:transform}
.capR{position:absolute;right:8px;top:8px;width:32px;height:32px;border-radius:8px;background:rgba(25,29,72,.75);border:0;display:grid;place-items:center}
.capOk{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(21,23,26,.55)}
.capOk svg{width:58px;height:58px}.capOk circle{fill:#20d6a4}.capOk path{fill:none;stroke:#13163d;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:capCk .45s .1s ease forwards}
@keyframes capCk{to{stroke-dashoffset:0}}
.capOk b{font-size:15px;color:#fff}
.capB.ok .capOk{display:flex}
.capTr{position:relative;height:46px;margin-top:12px;border-radius:10px;background:#1e2356;border:1px solid #48509b;overflow:hidden;direction:ltr;touch-action:none}
.capFill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(32,214,164,.18)}
.capHint{position:absolute;inset:0;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#8fa0b3;pointer-events:none;padding-left:40px}
.capTr.drag .capHint{opacity:.25}
.capK{position:absolute;left:0;top:0;width:52px;height:44px;border-radius:9px;background:#20d6a4;border:0;display:grid;place-items:center;cursor:grab;touch-action:none}
.capK svg{width:22px;height:22px;fill:none;stroke:#13163d;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.capB.bad .capTr{border-color:#ff4d5e}.capB.bad .capK{background:#ff4d5e}.capB.bad .capV{animation:capSh .35s}
@keyframes capSh{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.capB.ok .capK{background:#20d6a4}
.capM{min-height:18px;margin-top:8px;font-size:12.5px;font-weight:700;color:#8fa0b3;text-align:center}.capM.bad{color:#ff6b78}
/* ===== LOGIN v81 — "vault of light": no chart, no wordmark. Big icon, a tunnel illusion pulling into it,
   3D coins drifting in depth, aurora light, glass sheet with a living gradient edge. All code, no images. ===== */
.hero{height:clamp(380px,46dvh,430px)!important;overflow:hidden;padding-bottom:30px}
.fade.b{height:28%;background:linear-gradient(0deg,#262c66 12%,rgba(35,38,38,0))}
  box-shadow:0 0 18px rgba(60,240,189,.25),inset 0 0 18px rgba(60,240,189,.15);opacity:0;animation:lgTn 6s linear infinite;will-change:transform,opacity}
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 45%,#000 20%,transparent 80%);mask-image:radial-gradient(60% 60% at 50% 45%,#000 20%,transparent 80%);
  animation:lgG 40s linear infinite}
  background:radial-gradient(circle at 35% 32%,#fff6c4 0%,#ffd34d 30%,#e9a700 62%,#b36f00 100%);
  box-shadow:inset 0 0 0 calc(var(--s)*.09) rgba(255,255,255,.35),inset 0 0 0 calc(var(--s)*.12) rgba(160,95,0,.55),0 calc(var(--s)*.25) calc(var(--s)*.4) rgba(0,0,0,.5);
  opacity:var(--o,1);animation:lgCf var(--d) linear infinite;animation-delay:var(--dl);will-change:transform}
  box-shadow:inset 0 0 0 2px rgba(160,95,0,.35)}
/* brand: big icon, halo, no wordmark */
.brand{--is:124px!important;margin-top:40px!important;z-index:3}
.brand::before{width:360px;height:300px}
.wm,.rule{display:none!important}
.iconwrap{filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(60,240,189,.35))}
.iconwrap::before,.iconwrap::after{border-color:rgba(60,240,189,.55)}
.lgH{position:absolute;left:50%;top:50%;z-index:-1;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(60,240,189,.35),rgba(60,240,189,.08) 50%,rgba(60,240,189,0));animation:lgH 3.6s ease-in-out infinite}
@keyframes lgH{50%{transform:scale(1.18);opacity:.7}}
/* the sheet: glass edge that keeps moving */
.sheet{position:relative;background:#262c66!important;border-radius:26px 26px 0 0!important;margin-top:-26px!important}
.sheet::before{display:none;content:"";position:absolute;left:0;right:0;top:0;height:1.5px;border-radius:26px 26px 0 0;
  background:linear-gradient(90deg,rgba(60,240,189,0),#3cf0bd 30%,#ffd34d 55%,#3cf0bd 75%,rgba(60,240,189,0));background-size:220% 100%;animation:lgE 4s linear infinite}
@keyframes lgE{to{background-position:-220% 0}}
.go{position:relative;overflow:hidden;box-shadow:0 10px 26px rgba(60,240,189,.28)}
.go::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:30%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));transform:translateX(-160%) skewX(-18deg);animation:lgGo 3.4s 1.2s ease-in-out infinite}
@keyframes lgGo{0%{transform:translateX(-160%) skewX(-18deg)}35%,100%{transform:translateX(480%) skewX(-18deg)}}
.f input:focus{box-shadow:0 0 0 4px rgba(60,240,189,.18)}
@media (max-height:720px){.brand{--is:104px!important;margin-top:26px!important}.lgTag{margin-top:14px}}
@media (prefers-reduced-motion:reduce){.lgH,.sheet::before,.go::after{animation:none}}

/* v83: just the name and one line, big and clean */
.lgTag{margin-top:16px;text-align:center;animation:rise .8s .9s cubic-bezier(.2,.8,.2,1) both}
.lgTag b{display:block;font-size:40px;font-weight:900;letter-spacing:6px;line-height:1;color:#fff;text-shadow:0 0 28px rgba(60,240,189,.45),0 4px 18px rgba(0,0,0,.7)}
.lgTag small{display:block;margin-top:9px;font-size:13px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#3cf0bd;text-shadow:0 2px 10px rgba(0,0,0,.7)}
[dir=rtl] .lgTag b{letter-spacing:4px}
[dir=rtl] .lgTag small{letter-spacing:0;font-size:15px;text-transform:none}
.brand{--is:116px!important;margin-top:34px!important}
@media (max-height:720px){.lgTag b{font-size:34px}.brand{--is:96px!important;margin-top:22px!important}}
/*Pakbaazi-brand*/.swWm{display:inline-block!important;width:5.15em!important;height:1.12em!important;vertical-align:middle;background:url(116e9ecc756c.webp) no-repeat left center/contain!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:transparent!important;-webkit-text-fill-color:transparent!important;letter-spacing:0!important;overflow:hidden;animation:none!important}.swWm span{display:none!important}.swWm::before,.swWm::after{display:none!important}.brand .wm{background:url(116e9ecc756c.webp) center/contain no-repeat!important;aspect-ratio:4.600!important;width:min(240px,64vw)!important}.brand .wm .shine{display:none!important}