/* IPOTEKA PAY 3.0 — komponentlar. Belgi: logotipdagi o‘zbek naqshi (pattern.jpg) */
.logo{border-radius:50%;display:block;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 6px 16px -4px rgba(0,20,90,.5)}
.logo.flat{box-shadow:none}
.pad{padding:0 16px}
.card{background:var(--card);border-radius:var(--r);padding:16px;margin:0 16px 12px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.label{font-size:12.5px;color:var(--mut);font-weight:500}

/* qahramon (hero) */
.hero{position:relative;color:#fff;margin:-44px 0 14px;padding:56px 20px 26px;border-radius:0 0 32px 32px;overflow:hidden;background:#0041DD url(img/pattern.jpg) center top/300px auto}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,50,190,.0) 0%,rgba(0,30,120,.42) 100%)}
.hero>*{position:relative}
.hero.deep::before{background:linear-gradient(180deg,rgba(6,36,92,.55),rgba(6,36,92,.86))}
.hero.tall{padding-bottom:70px}
.hero .back{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px)}
.hero h1{text-shadow:0 2px 14px rgba(0,20,90,.35)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);font-size:12px;font-weight:650}
.hbar{display:flex;align-items:center;gap:12px}
.hbar .who{flex:1;line-height:1.2}.hbar .who small{display:block;font-size:12px;opacity:.82}.hbar .who b{font-size:17px;font-family:'Inter Display';font-weight:700}
.hbtn{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
.hbtn em{position:absolute;right:-3px;top:-3px;background:var(--gold);color:#3b2a00;border-radius:99px;font-size:10.5px;font-weight:800;padding:1px 6px;font-style:normal}
.hact{display:flex;gap:8px;margin-top:16px}
.hact div{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border-radius:14px;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);font-weight:650;font-size:13.5px;border:1px solid rgba(255,255,255,.22)}

/* ID · Gov · Kredit tarixi — doimiy tezkor qator */
.idstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:-44px 16px 14px;position:relative;z-index:2}
.idstrip.flow{margin-top:0}
.idt{background:#fff;border-radius:20px;padding:12px 10px 11px;box-shadow:0 14px 28px -16px rgba(0,30,110,.55),0 1px 0 rgba(6,36,92,.05);display:flex;flex-direction:column;gap:2px;min-width:0}
.idt b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;margin-top:6px;line-height:1.15}
.idt span{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idt span.on{color:var(--ok);font-weight:650}
.idi{width:38px;height:38px;border-radius:12px;background:var(--wash);color:var(--blue);display:flex;align-items:center;justify-content:center}
.idi.on{background:linear-gradient(135deg,#0A5BE0,#0041DD);color:#fff}

/* bannerlar */
.bn-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 4px;scrollbar-width:none}
.bn-track::-webkit-scrollbar{display:none}
.bn{flex:none;width:326px;height:168px;border-radius:24px;position:relative;overflow:hidden;scroll-snap-align:center;color:#fff;box-shadow:0 14px 26px -16px rgba(0,30,110,.7)}
.bn-in{position:absolute;inset:0;padding:16px 18px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.bn h3{font-size:22px;line-height:1.08;max-width:210px}
.bn p{font-size:13px;opacity:.9;max-width:200px;line-height:1.3}
.bn .tag{position:absolute;left:16px;top:14px}
.tag{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:750;background:rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.tag.gold{background:var(--gold);color:#3b2a00}
.bn.promo{background:#06122f}
.bn.promo img{position:absolute;right:-30px;top:0;height:100%;width:78%;object-fit:cover;object-position:62% 55%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
.bn.promo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#06122f 0,#06122f 22%,rgba(6,18,47,.2) 70%,transparent);z-index:1}
.bn.promo .bn-in{z-index:2}
.coupon{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:5px 10px;border-radius:99px;font-size:12px;font-weight:700;margin-top:8px;width:max-content;backdrop-filter:blur(4px)}
.bn.prod{background:#0041DD url(img/pattern.jpg) center/300px auto}
.bn.prod::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,30,120,.78),rgba(0,50,170,.2))}
.bn.prod .bn-in{z-index:1}
.bn .cta{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--blue-d);font-weight:700;font-size:13px;padding:8px 14px;border-radius:12px;width:max-content}
.bn.ad{background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow)}
.bn.ad::before{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;background:var(--wash)}
.bn.ad .bn-in{z-index:1;justify-content:flex-end}
.bn.ad .tag{background:var(--wash);color:var(--blue)}
.bn.ad .cta{background:var(--blue);color:#fff}
.adico{position:absolute;right:20px;top:26px;width:78px;height:78px;border-radius:24px;background:linear-gradient(135deg,#0A5BE0,#0041DD);color:#fff;display:flex;align-items:center;justify-content:center;z-index:1;transform:rotate(6deg)}
.bn-dots{display:flex;justify-content:center;gap:6px;margin:10px 0 14px}
.bn-dots i{width:6px;height:6px;border-radius:99px;background:var(--tint);transition:all .2s}
.bn-dots i.on{width:20px;background:var(--blue)}
.adrow{display:flex;gap:12px;align-items:center;background:#fff;border:1px dashed var(--tint);border-radius:18px;padding:12px 14px;margin:0 16px 12px}
.adrow .ib{background:var(--wash)}
.adrow small{font-size:10.5px;color:var(--mut);letter-spacing:.02em}

/* ro‘yxat, ikonkalar */
.li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.li:last-child{border:0}
.li .t{flex:1;min-width:0}.li .t b{display:block;font-size:14.5px;font-weight:650}.li .t span{font-size:12.5px;color:var(--mut)}
.ib{width:44px;height:44px;border-radius:14px;background:var(--wash);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.ib.w{background:var(--warnbg);color:var(--warn)}.ib.g{background:var(--okbg);color:var(--ok)}
.ib.dk{background:linear-gradient(135deg,#0A5BE0,#0041DD);color:#fff}
.title-row{display:flex;align-items:center;gap:12px;padding:8px 16px 14px}
.title-row h2{flex:1}
.back{width:42px;height:42px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);flex:none}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:650;background:var(--soft);color:var(--blue)}
.chip.ok{background:var(--okbg);color:var(--ok)}.chip.warn{background:var(--warnbg);color:var(--warn)}.chip.err{background:var(--errbg);color:var(--err)}
.chip.mute{background:#EDEFF4;color:var(--mut)}
.chip.gold{background:var(--gold);color:#3b2a00}

/* tugmalar */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;border-radius:16px;background:linear-gradient(180deg,#0A5BE0,#0041DD);color:#fff;font-weight:650;font-size:16px;border:0;width:100%;cursor:pointer;box-shadow:0 12px 22px -12px rgba(0,65,221,.9),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.sec{background:var(--soft);color:var(--blue);box-shadow:none}
.btn.ghost{background:#fff;color:var(--blue);border:1.5px solid var(--tint);box-shadow:none}
.btn.danger{background:var(--errbg);color:var(--err);box-shadow:none}
.btn.gold{background:var(--gold);color:#3b2a00;box-shadow:0 12px 22px -12px rgba(255,170,0,.9)}
.btn.sm{height:44px;font-size:14.5px;border-radius:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row2{display:flex;gap:10px}.row2>*{flex:1}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tile{background:#fff;border-radius:18px;padding:12px 4px;text-align:center;cursor:pointer;border:0;font-size:11.5px;font-weight:650;line-height:1.2;color:var(--text);box-shadow:var(--shadow)}
.tile .ib{margin:0 auto 6px}
.card .tile{box-shadow:none;background:none}

/* formalar */
.field{display:block;margin-bottom:12px}
.field>span{display:block;font-size:12.5px;color:var(--mut);font-weight:500;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;height:52px;border-radius:15px;border:1.5px solid var(--line);background:#fff;padding:0 14px;font:inherit;font-size:16px;color:var(--text)}
.field textarea{height:96px;padding:12px 14px;resize:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 4px rgba(5,80,206,.12)}
.field .hint{font-size:12px;color:var(--mut);margin-top:4px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chipbtn{border:1.5px solid var(--line);background:#fff;border-radius:13px;padding:10px 14px;font-weight:650;font-size:14px;color:var(--text);cursor:pointer}
.chipbtn.on{background:var(--blue);border-color:var(--blue);color:#fff}
.switch{width:48px;height:29px;border-radius:99px;background:var(--tint);position:relative;flex:none;border:0;cursor:pointer;transition:background .15s}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:23px;height:23px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.switch.on{background:var(--blue)}.switch.on::after{transform:translateX(19px)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:2px 0}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--blue) var(--p,0%),var(--soft) var(--p,0%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--blue);margin-top:-10px;box-shadow:0 4px 10px rgba(0,40,150,.35)}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--soft)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.err-text{color:var(--err);font-size:13px;margin:-4px 0 10px}
.bar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-l),var(--blue-d));border-radius:99px}

/* pastki navigatsiya */
.nav{position:absolute;bottom:0;left:0;right:0;height:86px;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:9px 6px 0;border-radius:0 0 40px 40px}
.nav>div{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--mut);width:66px;position:relative;padding-top:2px}
.nav .on{color:var(--blue-d);font-weight:750}
.nav .on::before{content:"";position:absolute;top:-9px;width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--blue-d)}
.nav .qr{margin-top:-30px}
.nav .qr b{width:60px;height:60px;border-radius:22px;background:linear-gradient(180deg,#0A5BE0,#0041DD);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 24px -10px rgba(0,65,221,.9),0 0 0 6px var(--bg)}

/* varaq va toast */
.sheet-wrap{position:absolute;inset:0;background:rgba(6,36,92,.5);display:flex;align-items:flex-end;z-index:20;border-radius:40px}
.sheet-wrap[hidden]{display:none}
.sheet{background:var(--bg);width:100%;max-height:90%;overflow-y:auto;border-radius:30px 30px 40px 40px;padding:10px 16px 28px;animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.sheet .grab{width:40px;height:4px;background:var(--tint);border-radius:9px;margin:0 auto 14px}
.toast{position:absolute;left:16px;right:16px;bottom:104px;background:var(--navy);color:#fff;border-radius:16px;padding:13px 15px;font-size:14px;z-index:30;box-shadow:0 14px 30px -10px rgba(6,36,92,.6)}
.toast[hidden]{display:none}.toast.err{background:var(--err)}

/* bosqichlar, taqvim, savat */
.tl{display:flex;gap:14px;padding-bottom:18px}
.tl .c{display:flex;flex-direction:column;align-items:center}
.tl .n{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--tint);background:#fff;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.tl .n.done{background:var(--blue);border-color:var(--blue)}.tl .n.cur{border-color:var(--blue);box-shadow:0 0 0 5px rgba(5,80,206,.14)}
.tl .bar2{width:2px;flex:1;background:var(--soft);margin:2px 0 -16px}.tl .bar2.done{background:var(--blue)}
.weekstrip{display:flex;gap:6px;margin:6px 0 14px}
.weekstrip div{flex:1;text-align:center;padding:9px 0;border-radius:14px;background:#fff;cursor:pointer;box-shadow:var(--shadow)}
.weekstrip div.on{background:var(--blue);color:#fff}
.weekstrip .dotm{width:5px;height:5px;border-radius:50%;background:var(--blue);margin:3px auto 0}.weekstrip .on .dotm{background:#fff}
.chk{width:26px;height:26px;border-radius:9px;border:2px solid var(--tint);background:#fff;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;cursor:pointer}
.chk.on{background:var(--blue);border-color:var(--blue)}
.status{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px}
.s-SUCCEEDED,.s-CREDITED,.s-ACTIVE{background:var(--okbg);color:var(--ok)}
.s-UNKNOWN,.s-PENDING,.s-ACCEPTED_NOT_SENT,.s-QUEUED_FOR_CRM,.s-new,.s-assigned,.s-in_progress{background:var(--warnbg);color:var(--warn)}
.s-FAILED{background:var(--errbg);color:var(--err)}.s-CLOSED,.s-resolved{background:var(--soft);color:var(--blue)}
.otp{letter-spacing:.5em;text-align:center;font-size:24px!important}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.keypad button{height:58px;border-radius:18px;border:0;background:#fff;font-size:22px;font-weight:650;font-family:'Inter Display';box-shadow:var(--shadow)}
.dots{display:flex;gap:14px;justify-content:center;margin:22px 0}.dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--blue)}.dots i.f{background:var(--blue)}
.qrview{background:#0A1530;height:470px;position:relative;color:#fff;overflow:hidden;margin-top:-44px;padding-top:44px}
.qrview .frame{position:absolute;left:55px;top:110px;width:280px;height:280px}
.qrview .scan{position:absolute;left:20px;right:20px;height:3px;background:var(--blue3);box-shadow:0 0 18px var(--blue3);animation:scan 2.2s ease-in-out infinite alternate}
@keyframes scan{from{top:20px}to{top:255px}}
.qrcode{display:grid;grid-template-columns:repeat(21,1fr);gap:0;width:210px;margin:10px auto;background:#fff;padding:8px;border-radius:12px}.qrcode i{aspect-ratio:1;background:#fff}.qrcode i.k{background:#06245C}
.map{height:220px;border-radius:22px;background:#E6ECF7;position:relative;overflow:hidden;margin:0 16px 12px}
.pin{position:absolute;width:28px;height:28px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:var(--blue2);border:3px solid #fff;cursor:pointer}
.pin.sel{background:var(--blue);width:34px;height:34px}
.faq summary{padding:12px 0;font-weight:650;cursor:pointer}.faq details{border-bottom:1px solid var(--line)}.faq p{padding:0 0 12px;color:var(--mut);font-size:14px}
.bars .b{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:13px}.bars .b i{display:block;height:12px;background:var(--blue);border-radius:9px}

/* garov qarzi */
.calc-amt{font-family:'Inter Display';font-weight:700;font-size:38px;letter-spacing:-.03em;line-height:1}
.calc-amt small{font-size:16px;font-weight:600;color:var(--mut);margin-left:4px;letter-spacing:0}
.scale{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);margin-top:-2px}
.res{background:linear-gradient(135deg,#0A5BE0,#0033B8);color:#fff;border-radius:22px;padding:16px;position:relative;overflow:hidden}
.res::before{content:"";position:absolute;inset:0;background:url(img/pattern.jpg) center/260px auto;opacity:.35;mix-blend-mode:soft-light}
.res>*{position:relative}
.res .amt{font-size:30px}
.res .sub{display:flex;gap:10px;margin-top:12px}
.res .sub div{flex:1;background:rgba(255,255,255,.14);border-radius:14px;padding:9px 11px;font-size:11.5px}
.res .sub b{display:block;font-size:15px;margin-top:2px;font-family:'Inter Display'}
.coll{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.coll div{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:9px 2px 7px;text-align:center;font-size:10.5px;font-weight:650;cursor:pointer;line-height:1.15}
.coll div .ic{width:22px;height:22px;margin:0 auto 4px;display:block;color:var(--blue)}
.coll div.on{border-color:var(--blue);background:var(--wash);color:var(--blue-d);box-shadow:0 0 0 3px rgba(5,80,206,.12)}
.steps3{display:flex;gap:8px}
.steps3 div{flex:1;background:#fff;border-radius:16px;padding:10px;font-size:12px;box-shadow:var(--shadow)}
.steps3 b{display:block;font-size:12.5px;margin:4px 0 1px}
.steps3 i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}

/* kredit tarixi */
.gauge{position:relative;width:240px;margin:0 auto;text-align:center}
.gauge svg{width:240px;height:140px;display:block}
.gauge .num{position:absolute;left:0;right:0;top:58px;font-family:'Inter Display';font-weight:800;font-size:50px;letter-spacing:-.04em;line-height:1}
.gauge .lab{position:absolute;left:0;right:0;top:112px;font-size:13px;font-weight:650;opacity:.9}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 16px 12px}
.stat3 div{background:#fff;border-radius:18px;padding:12px;box-shadow:var(--shadow)}
.stat3 b{display:block;font-family:'Inter Display';font-size:19px;letter-spacing:-.02em;margin-top:3px}
.stat3 span{font-size:11.5px;color:var(--mut)}
.skeleton{height:90px;border-radius:20px;background:linear-gradient(90deg,#fff 0,#EEF2FA 50%,#fff 100%);background-size:200% 100%;animation:sk 1.2s linear infinite;margin:0 16px 12px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* aksiya */
.promo-hero{position:relative;margin:-44px 0 0;height:330px;color:#fff;background:#06122f;overflow:hidden}
.promo-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.promo-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,47,.55) 0,rgba(6,18,47,0) 30%,rgba(6,18,47,.92) 100%)}
.promo-hero .in{position:absolute;left:20px;right:20px;bottom:46px;z-index:2}
.promo-hero .back{position:absolute;left:16px;top:56px;z-index:3;background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(6px)}
.promo-hero h1{font-size:32px;margin:8px 0 4px}
.ticket{margin:-30px 16px 12px;position:relative;z-index:3;background:#fff;border-radius:24px;padding:18px;box-shadow:0 20px 34px -18px rgba(0,30,110,.6);display:flex;align-items:center;gap:14px}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--bg);margin-top:-9px}
.ticket::before{left:-9px}.ticket::after{right:-9px}
.ticket .big{font-family:'Inter Display';font-weight:800;font-size:46px;letter-spacing:-.04em;line-height:1;color:var(--blue-d)}
.count{display:flex;gap:8px}
.count div{flex:1;background:var(--wash);border-radius:14px;text-align:center;padding:8px 0}
.count b{display:block;font-family:'Inter Display';font-size:22px;color:var(--blue-d)}
.count span{font-size:10.5px;color:var(--mut)}

/* ID & Gov */
.oneid{border-radius:24px;padding:18px;margin:0 16px 12px;color:#fff;position:relative;overflow:hidden;background:#0041DD url(img/pattern.jpg) center/280px auto;box-shadow:0 18px 30px -18px rgba(0,30,110,.8)}
.oneid::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,30,120,.82),rgba(0,60,190,.35))}
.oneid>*{position:relative}
.oneid .row{display:flex;align-items:center;gap:12px}
.oneid .ico{width:50px;height:50px;border-radius:16px;background:#fff;color:var(--blue-d);display:flex;align-items:center;justify-content:center}
.consent-li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:center}
.consent-li:last-child{border:0}
.sparkline{display:flex;align-items:flex-end;gap:3px;height:32px}
.sparkline i{flex:1;background:var(--tint);border-radius:3px}
.sparkline i.last{background:var(--blue)}

/* ===== v3.1: Admin paneli, animatsiyalar ===== */
@keyframes bgdrift{to{background-position:360px 180px}}
.phone{z-index:1}
.admin-fab{position:fixed;right:18px;top:16px;z-index:40;display:flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:99px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.16);backdrop-filter:blur(10px);color:#fff;font-weight:650;font-size:14px;cursor:pointer;transition:background .2s,transform .15s}
.admin-fab:hover{background:rgba(255,255,255,.28)}.admin-fab:active{transform:scale(.96)}
.admin-fab.on{background:#fff;color:var(--blue-d)}
.admin-fab .ic{transition:transform .4s}.admin-fab.on .ic{transform:rotate(90deg)}
.drawer-bg{position:fixed;inset:0;background:rgba(6,20,60,.5);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:45}
.drawer-bg.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,94vw);background:var(--bg);z-index:50;transform:translateX(104%);transition:transform .45s cubic-bezier(.2,.9,.25,1);display:flex;flex-direction:column;box-shadow:-30px 0 60px -20px rgba(0,20,90,.5);font-size:13.5px;line-height:1.5}
.drawer.open{transform:none}
.dr-head{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;background:#fff;border-bottom:1px solid var(--line)}
.dr-head .brandrow{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.dr-head img{width:44px;height:44px;border-radius:50%;box-shadow:0 8px 18px -8px rgba(0,65,221,.7)}
.dr-head h3{font-size:16px}
.dr-x{width:38px;height:38px;border-radius:12px;border:0;background:var(--wash);color:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer}
.dr-body{flex:1;overflow-y:auto;padding:14px 14px 30px}
.drawer .box{background:#fff;border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.drawer h4{font-family:'Inter Display';font-size:14px;margin-bottom:10px;color:var(--navy)}
.drawer code{background:var(--soft);padding:1px 6px;border-radius:6px;font-size:12px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.opts.one{grid-template-columns:1fr}
.opt{font:inherit;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:1px;transition:all .18s}
.opt b{font-size:13.5px;color:var(--text)}.opt span{font-size:11.5px;color:var(--mut)}
.opt:hover{border-color:var(--blue3);transform:translateY(-1px)}
.opt.on{background:var(--blue);border-color:var(--blue)}.opt.on b,.opt.on span{color:#fff}
.opt.danger b{color:var(--err)}
.scn{font:inherit;text-align:left;width:100%;display:flex;gap:12px;align-items:center;border:0;background:var(--wash);border-radius:14px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:transform .15s,background .2s}
.scn:hover{background:var(--soft)}.scn:active{transform:scale(.98)}
.scn i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;font-size:13px}
.scn b{display:block;font-size:13.5px}.scn span{font-size:11.5px;color:var(--mut)}

/* ekran almashinuvi */
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.scroll.enter>*{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.scroll.enter>*:nth-child(1){animation-name:fade;animation-duration:.4s}
.scroll.enter>*:nth-child(2){animation-delay:.05s}.scroll.enter>*:nth-child(3){animation-delay:.1s}.scroll.enter>*:nth-child(4){animation-delay:.15s}
.scroll.enter>*:nth-child(5){animation-delay:.2s}.scroll.enter>*:nth-child(6){animation-delay:.25s}.scroll.enter>*:nth-child(7){animation-delay:.3s}.scroll.enter>*:nth-child(n+8){animation-delay:.34s}
/* hero: jonli naqsh */
@keyframes pdrift{to{background-position:300px 150px}}
.hero{animation:pdrift 70s linear infinite}
.hero::after{content:"";position:absolute;width:260px;height:260px;right:-60px;top:-80px;border-radius:50%;background:radial-gradient(circle,rgba(120,170,255,.55),transparent 65%);animation:glow 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes glow{from{transform:translate(0,0) scale(1);opacity:.7}to{transform:translate(-60px,50px) scale(1.25);opacity:1}}
.oneid{animation:pdrift 80s linear infinite}
/* bosish effekti */
.btn,.tile,.idt,.hbtn,.back,.chipbtn,.hact div,.adrow,.bn,.nav>div,.pill,.coll div,.scn{transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .2s,background .2s}
.btn:active,.tile:active,.idt:active,.hbtn:active,.back:active,.hact div:active,.adrow:active,.bn:active,.chipbtn:active,.coll div:active{transform:scale(.95)}
.card[role=button]:active,.li[role=button]:active{transform:scale(.985)}
.card[role=button],.li[role=button]{transition:transform .15s}
.btn:not(.sec):not(.ghost):not(.danger){background-size:200% 100%;position:relative;overflow:hidden}
.btn:not(.sec):not(.ghost):not(.danger)::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,70%{left:-80px}100%{left:120%}}
.idt:hover,.tile:hover{transform:translateY(-3px)}
.idi{transition:transform .3s}.idt:hover .idi{transform:rotate(-6deg) scale(1.08)}
/* navigatsiya */
.nav .on .ic{animation:navpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes navpop{0%{transform:translateY(4px) scale(.7)}60%{transform:translateY(-4px) scale(1.15)}100%{transform:none}}
.nav .on::before{animation:navbar .4s cubic-bezier(.3,1.4,.5,1)}
@keyframes navbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.nav .qr b{animation:qrpulse 3.2s ease-in-out infinite}
@keyframes qrpulse{0%,100%{box-shadow:0 14px 24px -10px rgba(0,65,221,.9),0 0 0 6px var(--bg),0 0 0 6px rgba(0,94,254,.0)}50%{box-shadow:0 14px 24px -10px rgba(0,65,221,.9),0 0 0 6px var(--bg),0 0 0 14px rgba(0,94,254,.14)}}
/* bannerlar */
.bn.promo img{animation:kenburns 10s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1) translateX(0)}to{transform:scale(1.12) translateX(-10px)}}
.bn.promo::after{content:"";position:absolute;top:0;bottom:0;width:90px;left:-120px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);z-index:3;animation:shine 6s ease-in-out infinite;pointer-events:none}
.hbtn em{animation:badge 2.4s ease-in-out infinite}
@keyframes badge{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.promo-hero img{animation:kenburns 14s ease-in-out infinite alternate}
.ticket .big{display:inline-block;animation:bigpop .8s cubic-bezier(.3,1.6,.5,1) .3s both}
@keyframes bigpop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.coupon .ic{animation:wiggle 3s ease-in-out infinite}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-16deg)}94%{transform:rotate(14deg)}}
/* chiziqlar va doira */
.bar i,.tl .n.done,.steps3 i{transform-origin:left}
.scroll.enter .bar i{animation:growx 1.1s cubic-bezier(.2,.8,.2,1) .25s both}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.garc{stroke-dasharray:100;animation:garc 1.4s cubic-bezier(.3,.8,.2,1) .2s both}
@keyframes garc{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.gdot{animation:fade .4s 1.4s both}
.tl .n.cur{animation:curpulse 2s ease-in-out infinite}
@keyframes curpulse{0%,100%{box-shadow:0 0 0 4px rgba(5,80,206,.14)}50%{box-shadow:0 0 0 9px rgba(5,80,206,.05)}}
.res.flash{animation:resflash .5s}
@keyframes resflash{0%{transform:scale(.985)}50%{transform:scale(1.01);box-shadow:0 0 0 6px rgba(0,94,254,.2)}100%{transform:none}}
/* logotip */
.logo{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.hbar .logo:active{transform:rotate(-20deg) scale(.9)}
.welcome-logo{animation:wlogo 1.1s cubic-bezier(.2,1.2,.3,1) both,ring 3.4s ease-out 1.1s infinite}
@keyframes wlogo{from{transform:scale(.3) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
@keyframes ring{0%{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 34px rgba(255,255,255,0)}}
/* varaq, toast, konfetti */
.sheet-wrap{animation:fade .25s}
.sheet{animation:sheetup .5s cubic-bezier(.2,1.1,.3,1)}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
.toast:not([hidden]){animation:toast .45s cubic-bezier(.2,1.2,.3,1)}
@keyframes toast{from{transform:translateY(30px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.cf{position:absolute;top:-16px;z-index:60;border-radius:2px;pointer-events:none;animation:cf 1.9s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes cf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),780px) rotate(var(--r));opacity:.9}}
.switch::after{transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.chk.on{animation:chkpop .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes chkpop{from{transform:scale(.6)}to{transform:none}}
.chip{animation:fade .4s both}
@media(prefers-reduced-motion:reduce){.hero,.oneid,body{animation:none!important}.scroll.enter>*{animation:none!important}}
/* Filialda kredit tekshiruvi */
.blprog{position:relative;background:#fff;border-radius:var(--r);padding:14px 16px 18px;margin-bottom:12px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center}
.blprog small{display:block;color:var(--mut);font-size:12px}.blprog b{font-family:'Inter Display';font-size:17px}
.blpct{font-family:'Inter Display';font-weight:700;color:var(--blue);font-size:20px}
.blline{position:absolute;left:16px;right:16px;bottom:8px;height:4px;border-radius:9px;background:var(--soft);overflow:hidden}.blline i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-d),var(--blue-l));border-radius:9px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.blc{background:#fff;border-radius:20px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow);position:relative;overflow:hidden;animation:rise .5s both;animation-delay:calc(var(--i)*70ms)}
.blc.wait{opacity:.6}.blc.run{box-shadow:0 0 0 2px var(--blue-l),var(--shadow)}
.blh{display:flex;gap:12px;align-items:center}.blh b{font-size:14px;display:block;margin-top:1px}.bls{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--blue)}
.blic{width:40px;height:40px;border-radius:14px;background:var(--wash);color:var(--blue);display:grid;place-items:center;flex:none}
.blc.done .blic{background:var(--okbg);color:var(--ok);animation:chkpop .4s}
.blspin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--soft);border-top-color:var(--blue);animation:blrot .8s linear infinite}@keyframes blrot{to{transform:rotate(360deg)}}
.blb{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);animation:fade .5s}
.blrow{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px}.blrow span{color:var(--mut);flex:none}.blrow b{text-align:right;font-weight:600;min-width:0;overflow-wrap:anywhere}
.blval{background:var(--wash);border-radius:14px;padding:10px 14px;margin-bottom:6px}.blval small{color:var(--mut);font-size:12px}.blval .amt{font-size:24px;color:var(--navy)}.blval .amt span{font-size:14px}
.blbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--soft)}.blbar i{display:block;height:100%;width:40%;background:var(--blue-l);animation:blbar 1.2s ease-in-out infinite}@keyframes blbar{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.blv{border-radius:22px;padding:18px;color:#fff;margin-top:14px;animation:bigpop .5s both}.blv.ok{background:linear-gradient(135deg,var(--blue-d),var(--blue-l))}.blv.bad{background:linear-gradient(135deg,#7A1A22,#C62F3B)}
.blvh{display:flex;gap:10px;align-items:center;font-size:16px}.blreason{margin-top:6px;font-size:14px}
.seg{display:flex;gap:6px;background:var(--bg);padding:4px;border-radius:14px}.seg button{flex:1;border:0;background:transparent;border-radius:11px;padding:10px 6px;font-weight:600;font-size:13px;color:var(--mut);display:flex;gap:6px;align-items:center;justify-content:center}.seg button.on{background:#fff;color:var(--blue);box-shadow:0 2px 8px -3px rgba(6,36,92,.3)}

.inp{width:100%;height:52px;border-radius:15px;border:1.5px solid var(--line);background:#fff;padding:0 14px;font:inherit;font-size:16px;color:var(--text)}.inp:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 4px rgba(5,80,206,.12)}