/* OKBuddy Pay · Midnight (okb-pay.js, also okb-golive.js). A standalone dark checkout: it does not follow the site theme.
   Midnight ink, emerald for success, gold for the pay action; Sora for figures, Manrope for text. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Sora:wght@600;700;800&display=swap');
.okp-lock,.okp-lock body{overflow:hidden}
.okp-back{
  --bg:#070B14;--bg2:#0D1424;--glass:rgba(255,255,255,.055);--glass2:rgba(255,255,255,.09);--edge:rgba(255,255,255,.10);--edge2:rgba(255,255,255,.18);
  --ink:#F4F6FB;--ink-2:#D5DBE7;--muted:#8E99AE;--gold:#F5C451;--gold2:#E9A23B;--emerald:#3DDC97;--emerald2:#1FA676;--red:#FF6B6B;
  --surface:rgba(255,255,255,.055);--line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.16);--sunk:rgba(255,255,255,.06);--paper:#0D1424;--green:#3DDC97;--green-2:#1FA676;--green-wash:rgba(61,220,151,.14);--red-wash:rgba(255,107,107,.12);
  --f:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--fd:'Sora','Manrope',system-ui,sans-serif;--ui:var(--f);--display:var(--fd);--round:var(--fd);--font:var(--f);
  --spring:cubic-bezier(.3,1.45,.5,1);--out:cubic-bezier(.16,1,.3,1);
  position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,6,12,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s;font-family:var(--f);color:var(--ink);-webkit-font-smoothing:antialiased;color-scheme:dark}
.okp-back.on{opacity:1}
.okp-sheet{position:relative;width:100%;max-width:460px;height:100%;max-height:100%;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 60% at 15% 0%,#14253A 0%,transparent 60%),radial-gradient(90% 50% at 100% 100%,#1A1A12 0%,transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg));
  transform:translateY(28px) scale(.985);transition:transform .45s var(--out)}
.okp-back.on .okp-sheet{transform:none}
@media (min-width:700px){.okp-back{align-items:center}.okp-sheet{height:auto;min-height:620px;max-height:min(820px,94vh);border-radius:30px;box-shadow:0 40px 120px -30px rgba(0,0,0,.8),inset 0 0 0 1px var(--edge)}}
/* moving light behind everything */
.okp-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.okp-sheet::before,.okp-sheet::after,.okp-aurora i{content:"";position:absolute;width:380px;height:380px;border-radius:50%;filter:blur(70px);opacity:.38;z-index:-1;pointer-events:none}
.okp-sheet::before{background:#1FA676;left:-140px;top:-120px;animation:okpDrift1 14s ease-in-out infinite alternate}
.okp-sheet::after{background:#C7922F;right:-160px;bottom:-140px;opacity:.28;animation:okpDrift2 17s ease-in-out infinite alternate}
.okp-aurora i:nth-child(1){background:#2A6BD8;left:40%;top:30%;width:260px;height:260px;opacity:.16;animation:okpDrift2 19s ease-in-out infinite alternate}
.okp-aurora i:nth-child(2),.okp-aurora i:nth-child(3){display:none}
@keyframes okpDrift1{to{transform:translate(120px,160px) scale(1.15)}}
@keyframes okpDrift2{to{transform:translate(-110px,-130px) scale(1.2)}}
.okp-sheet>*{position:relative;z-index:1}
/* header */
.okp-top{display:flex;align-items:center;gap:12px;padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));flex:none}
.okp-mark{width:40px;height:40px;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(230,236,232,.9));display:grid;place-items:center;flex:none;box-shadow:0 6px 20px -8px rgba(61,220,151,.6)}
.okp-mark .okp-okb{width:24px;height:auto;animation:okpNod 3s ease-in-out infinite;transform-origin:50% 90%}
.okp-brand{flex:1;min-width:0;display:flex;flex-direction:column}
.okp-brand b{font:700 16px/1.2 var(--fd);letter-spacing:-.01em}
.okp-brand small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okp-secure{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:rgba(61,220,151,.12);color:var(--emerald);font:700 11.5px var(--f);letter-spacing:.02em;flex:none}
.okp-ib{width:40px;height:40px;border-radius:50%;border:0;background:var(--glass2);color:var(--ink);display:grid;place-items:center;font-size:16px;cursor:pointer;flex:none;transition:background .2s,transform .2s}
.okp-ib:hover{background:rgba(255,255,255,.16)}.okp-ib:active{transform:scale(.92)}
.okp-body{flex:1;overflow-y:auto;padding:4px 18px;padding-bottom:max(22px,env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;scrollbar-width:none}
.okp-body::-webkit-scrollbar{display:none}
/* the glass card */
.okp-cardwrap{perspective:1100px;margin:6px 0 18px;animation:okpRise .6s var(--out) both}
.okp-gcard{position:relative;height:196px;border-radius:24px;transform-style:preserve-3d;transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .5s var(--out)}
.okp-face{position:absolute;inset:0;border-radius:24px;padding:20px 22px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:#fff;
  background:linear-gradient(135deg,#1E3B33 0%,#0F2A23 45%,#0B1B26 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -28px rgba(0,0,0,.9),0 18px 40px -24px rgba(61,220,151,.35)}
.okp-face::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at var(--gx,50%) 0%,rgba(255,255,255,.18),transparent 60%),repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 9px);pointer-events:none}
.okp-face::after{content:"";position:absolute;top:-60%;left:-30%;width:60%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:rotate(18deg) translateX(-120%);animation:okpGlint 5.5s 1s ease-in-out infinite;pointer-events:none}
@keyframes okpGlint{0%,55%{transform:rotate(18deg) translateX(-120%)}75%,100%{transform:rotate(18deg) translateX(380%)}}
.okp-gmark{position:absolute;right:18px;top:16px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.okp-gmark .okp-okb{width:26px;height:auto}
.okp-gname{font:700 13px var(--fd);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.okp-glabel{display:block;margin-top:26px;font-size:12px;color:rgba(255,255,255,.65);letter-spacing:.04em}
.okp-gamt{display:block;font:800 40px/1.05 var(--fd);letter-spacing:-.035em;margin-top:2px;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#CFEBDD);-webkit-background-clip:text;background-clip:text;color:transparent}
.okp-glines{position:absolute;left:22px;right:22px;bottom:16px;display:flex;flex-wrap:wrap;gap:6px}
.okp-glines span{display:inline-flex;gap:8px;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.1);font-size:12px;font-weight:600;color:rgba(255,255,255,.9)}
.okp-glines em{font-style:normal;color:var(--gold);font-variant-numeric:tabular-nums}
/* card preview */
.okp-cc .front{background:linear-gradient(135deg,#2B2F3A 0%,#15181F 55%,#0B0D12 100%)}
.okp-gcard.flip{transform:rotateY(180deg)}
.okp-face.back{transform:rotateY(180deg);background:linear-gradient(135deg,#22262F,#0E1015)}
.okp-chip{position:absolute;left:22px;top:22px;width:44px;height:32px;border-radius:8px;background:linear-gradient(135deg,#F7D98B,#C99A35 55%,#F2CF7A);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.okp-chip::after{content:"";position:absolute;inset:7px 10px;border:1px solid rgba(80,55,10,.35);border-radius:4px}
.okp-cl{position:absolute;right:20px;top:20px;height:28px;display:flex;align-items:center}
.okp-cbrand{height:22px;width:auto;animation:okpPop .4s var(--spring) both}.okp-cbrand.v{filter:brightness(0) invert(1)}
b.okp-cbrand.r{font:800 16px var(--fd);font-style:italic;color:#fff;letter-spacing:-.02em}
.okp-cnum{position:absolute;left:22px;right:22px;top:84px;font:600 21px/1 'Sora',ui-monospace,monospace;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.okp-crow{position:absolute;left:22px;right:22px;bottom:18px;display:flex;justify-content:space-between;gap:12px}
.okp-crow small{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.okp-crow b{font:600 14px var(--f);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;display:block}
.okp-strip{position:absolute;left:0;right:0;top:28px;height:42px;background:#050608}
.okp-cvvbox{position:absolute;right:22px;top:88px;width:110px;height:38px;border-radius:8px;background:repeating-linear-gradient(90deg,#E9E6DD 0 6px,#DCD8CC 6px 12px);color:#111;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:0 10px}
.okp-cvvbox small{position:absolute;top:-16px;right:4px;font-size:9.5px;color:rgba(255,255,255,.6);letter-spacing:.1em}
.okp-cvvbox b{font:700 15px var(--fd);letter-spacing:.2em}
.okp-face.back p{position:absolute;left:22px;bottom:16px;margin:0;font-size:12px;color:rgba(255,255,255,.6)}
/* tabs */
.okp-tabs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--edge);margin-bottom:16px;animation:okpRise .6s .06s var(--out) both}
.okp-tabind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));box-shadow:inset 0 0 0 1px var(--edge2),0 6px 16px -8px rgba(0,0,0,.6);transform:translateX(calc(var(--i)*100%));transition:transform .45s var(--spring)}
.okp-tabs button{position:relative;height:42px;border:0;background:none;color:var(--muted);font:700 14px var(--f);cursor:pointer;border-radius:12px;transition:color .25s}
.okp-tabs button[aria-selected="true"]{color:var(--ink)}
.okp-pane{animation:okpPane .45s var(--out) both;min-height:210px}
@keyframes okpPane{from{opacity:0;transform:translateY(10px)}}
/* UPI apps */
.okp-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.okp-app{border:0;background:none;padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;color:var(--ink);font:inherit;animation:okpPop .5s var(--d,0ms) var(--spring) both}
.okp-logo{position:relative;width:62px;height:62px;border-radius:20px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -12px rgba(0,0,0,.8),inset 0 -2px 0 rgba(0,0,0,.06);transition:transform .25s var(--spring),box-shadow .25s}
.okp-logo::after{content:"";position:absolute;inset:-4px;border-radius:24px;border:2px solid var(--gold);opacity:0;transform:scale(.9);transition:opacity .2s,transform .3s var(--spring)}
.okp-app:hover .okp-logo{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(0,0,0,.9),0 0 0 1px rgba(245,196,81,.3)}
.okp-app:focus-visible .okp-logo::after,.okp-app:active .okp-logo::after{opacity:1;transform:none}
.okp-app:active .okp-logo{transform:scale(.93)}
.okp-logo img{width:40px;height:40px;object-fit:contain}.okp-logo.wd img{width:48px;height:26px}
.okp-app small{font-size:12px;font-weight:700;white-space:nowrap;color:var(--ink-2)}
.okp-app[disabled],.okp-row[disabled]{opacity:.45;cursor:wait}
.okp-row{width:100%;display:flex;align-items:center;gap:14px;padding:14px;border:0;border-radius:18px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--edge);color:var(--ink);font:inherit;text-align:left;cursor:pointer;margin-bottom:10px;transition:background .2s,transform .2s;animation:okpRise .5s .22s var(--out) both}
.okp-row:hover{background:var(--glass2)}.okp-row:active{transform:scale(.985)}
.okp-row>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.okp-row b{font-size:15px}.okp-row small{font-size:12.5px;color:var(--muted)}.okp-row>i{color:var(--muted)}
.okp-ic{width:44px;height:44px;border-radius:14px;background:var(--green-wash);color:var(--emerald);display:grid;place-items:center;font-size:17px;flex:none}
.okp-ic.wd{background:#fff}.okp-ic.wd img{width:34px;height:16px;object-fit:contain}
/* banks */
.okp-banks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.okp-bank{border:0;border-radius:18px;padding:14px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;color:var(--ink);font:inherit;background:var(--glass);box-shadow:inset 0 0 0 1px var(--edge);transition:background .2s,transform .2s;animation:okpPop .45s var(--d,0ms) var(--spring) both}
.okp-bank:hover{background:var(--glass2)}.okp-bank:active{transform:scale(.95)}
.okp-bank span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:800 16px var(--fd);color:#0B1220;background:linear-gradient(145deg,#fff,#DDE6F2)}
.okp-bank small{font-size:12px;font-weight:600;text-align:center;line-height:1.2;color:var(--ink-2)}
/* forms */
.okp-form{display:flex;flex-direction:column;gap:12px}
.okp-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.okp-form input,.okp-form select{height:52px;border:0;border-radius:15px;padding:0 16px;font:600 16px var(--f);letter-spacing:.02em;text-transform:none;background:rgba(255,255,255,.06);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge);outline:none;width:100%;box-sizing:border-box;transition:box-shadow .2s,background .2s}
.okp-form input::placeholder{color:rgba(255,255,255,.3)}
.okp-form input:focus,.okp-form select:focus{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 4px rgba(245,196,81,.14)}
.okp-form select option{background:#0D1424;color:#fff}
.okp-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* buttons */
.okp-pay{position:relative;overflow:hidden;height:56px;border:0;border-radius:18px;background:linear-gradient(180deg,#3DDC97,#1FA676);color:#04140D;font:800 16px var(--f);letter-spacing:.01em;cursor:pointer;width:100%;margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 14px 30px -14px rgba(61,220,151,.7),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s var(--spring),filter .2s}
.okp-pay.gold{background:linear-gradient(180deg,#F8D06A,#E9A23B);color:#201404;box-shadow:0 14px 34px -14px rgba(245,196,81,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.okp-pay::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-110%);animation:okpShine 3.2s 1.2s ease-in-out infinite}
@keyframes okpShine{55%,100%{transform:translateX(110%)}}
.okp-pay:hover{filter:brightness(1.06)}.okp-pay:active{transform:scale(.97)}.okp-pay:disabled{opacity:.55;filter:saturate(.5)}
.okp-pay.ghost{background:var(--glass2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge2)}.okp-pay.ghost::after{display:none}
.okp-pay.danger{background:linear-gradient(180deg,#FF8080,#E04848);color:#fff}.okp-pay.danger::after{display:none}
.okp-link{border:0;background:none;color:var(--gold);font:700 14px var(--f);cursor:pointer;padding:10px}
.okp-note{font-size:12.5px;color:var(--muted);margin:4px 0 0;line-height:1.5}
.okp-safe{display:flex;gap:10px;align-items:flex-start;font-size:11.5px;line-height:1.5;color:var(--muted);margin:18px 2px 6px}
.okp-safe svg{width:15px;height:15px;flex:none;color:var(--emerald);margin-top:1px}
.okp-err{background:var(--red-wash);color:#FFB3B3;border-radius:14px;padding:11px 14px;font-size:13.5px;margin-bottom:14px;display:flex;gap:9px;align-items:flex-start;flex-wrap:wrap;box-shadow:inset 0 0 0 1px rgba(255,107,107,.25)}
.okp-err.shake{animation:okpShake .45s ease}
@keyframes okpShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* waiting */
.okp-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.okp-center h2{font:700 21px/1.3 var(--fd);letter-spacing:-.01em;margin:18px 0 0;text-wrap:balance}
.okp-muted{color:var(--muted);font-size:14px;margin:0;max-width:320px;line-height:1.5}
.okp-amt-sm{font:800 30px var(--fd);letter-spacing:-.02em;margin-top:10px;font-variant-numeric:tabular-nums}
.okp-timer{font:600 13px var(--fd);color:var(--muted);min-height:18px;margin:2px 0 12px;font-variant-numeric:tabular-nums}
.okp-actions{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:330px}
.okp-ringwrap{position:relative;width:170px;height:170px;margin-top:10px}
.okp-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.okp-ring circle{fill:none;stroke-width:5}
.okp-ring .tr{stroke:rgba(255,255,255,.08)}
.okp-ring .pr{stroke:var(--emerald);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 6px rgba(61,220,151,.6))}
.okp-ringwrap.spin .okp-ring{animation:okpSpin 1.2s linear infinite}
@keyframes okpSpin{to{transform:rotate(270deg)}}
.okp-ringwrap::before{content:"";position:absolute;inset:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(61,220,151,.22),transparent);animation:okpBeat 1.8s ease-in-out infinite}
.okp-wbody{position:absolute;left:50%;top:50%;width:84px;margin:-52px 0 0 -42px;animation:okpStep .7s ease-in-out infinite;transform-origin:50% 100%}
.okp-wbody .okp-okb{width:84px;height:auto;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.okp-wapp{position:absolute;right:4px;top:8px;width:44px;height:44px;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 22px -8px rgba(0,0,0,.7);animation:okpFloat 2.2s ease-in-out infinite}
.okp-wapp img{width:30px;height:30px;object-fit:contain}
/* success */
.okp-success{position:relative;overflow:hidden;padding-top:46px}
.okp-flood{position:absolute;left:50%;top:150px;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:radial-gradient(closest-side,rgba(61,220,151,.45),rgba(61,220,151,0));animation:okpFlood 1.1s var(--out) forwards;z-index:-1}
@keyframes okpFlood{from{transform:scale(0)}to{transform:scale(22);opacity:.0}}
.okp-hop{position:relative;width:118px;height:136px;animation:okpHop .95s var(--spring) both}
.okp-hop .okp-okb{width:108px;height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));background:rgba(255,255,255,.92);border-radius:28px;padding:14px 12px 8px;box-sizing:content-box;margin-left:-6px}
.okp-hop .okp-tick{position:absolute;right:-14px;top:-10px}
.okp-tick svg{width:52px;height:52px;filter:drop-shadow(0 6px 14px rgba(61,220,151,.55))}
.okp-tick circle{fill:var(--emerald);transform-origin:center;animation:okpPopC .45s .35s var(--spring) both}
.okp-tick path{fill:none;stroke:#04140D;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:okpDraw .45s .6s ease-out forwards}
.okp-success h2{animation:okpRise .5s .5s var(--out) both}.okp-success .okp-amt-sm{animation:okpRise .5s .6s var(--out) both;color:var(--gold)}
.okp-receipt{width:100%;max-width:340px;margin-top:20px;border-radius:20px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--edge);padding:6px 16px;text-align:left;animation:okpSlip .7s .75s var(--out) both;position:relative}
.okp-receipt::before{content:"";position:absolute;left:16px;right:16px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}
.okp-receipt div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;font-size:13.5px}.okp-receipt div+div{border-top:1px dashed rgba(255,255,255,.12)}
.okp-receipt span{color:var(--muted)}.okp-receipt b{font-weight:700;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.okp-receipt .mono{font-family:var(--fd);font-size:12.5px;letter-spacing:.03em}
@keyframes okpSlip{from{opacity:0;transform:translateY(40px)}}
.okp-conf{position:absolute;left:50%;top:48%;width:0;height:0;pointer-events:none;z-index:-1}
.okp-conf b{position:absolute;width:8px;height:13px;border-radius:2px;opacity:0;animation:okpConf 1.6s cubic-bezier(.2,.7,.4,1) .3s forwards}
/* confirm and toast */
.okp-confirm{position:absolute;inset:0;z-index:5;background:rgba(3,6,12,.6);backdrop-filter:blur(4px);display:flex;align-items:flex-end;padding:12px;animation:okpFade .18s}
.okp-confirm>div{background:#121A2B;border-radius:24px;padding:20px;width:100%;box-sizing:border-box;box-shadow:inset 0 0 0 1px var(--edge),0 30px 60px -20px rgba(0,0,0,.8);animation:okpRise .35s var(--out) both}
.okp-confirm b{font:700 18px var(--fd)}.okp-confirm p{font-size:14px;color:var(--muted);margin:6px 0 16px}
.okp-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#F4F6FB;color:#0B1220;padding:12px 18px;border-radius:14px;font:600 14px var(--f,system-ui);z-index:2147483001;max-width:90vw;box-shadow:0 20px 40px -14px rgba(0,0,0,.6)}
.okp-in{animation:okpRise .5s var(--out) both}
/* motion */
@keyframes okpRise{from{opacity:0;transform:translateY(14px)}}
@keyframes okpPop{from{opacity:0;transform:scale(.7)}}
@keyframes okpFade{from{opacity:0}}
@keyframes okpNod{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-10deg)}92%{transform:rotate(8deg)}}
@keyframes okpRing{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.15);opacity:0}}
@keyframes okpBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes okpStep{0%,100%{transform:translateY(0) rotate(-5deg)}25%{transform:translateY(-10px) rotate(0)}50%{transform:translateY(0) rotate(5deg)}75%{transform:translateY(-10px) rotate(0)}}
@keyframes okpFloat{50%{transform:translateY(-7px)}}
@keyframes okpHop{0%{transform:translateY(40px) scale(.6);opacity:0}45%{transform:translateY(-28px) scale(1.05) rotate(-4deg);opacity:1}70%{transform:translateY(0) scale(1,.94)}85%{transform:translateY(-6px) scale(1)}100%{transform:none}}
@keyframes okpPopC{from{transform:scale(0)}}
@keyframes okpDraw{to{stroke-dashoffset:0}}
@keyframes okpConf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.okp-back :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.okp-back *,.okp-sheet::before,.okp-sheet::after{animation:none!important;transition:none!important}.okp-tick path{stroke-dashoffset:0}.okp-conf,.okp-flood{display:none}}
.okp-ringwrap::after{content:"";position:absolute;inset:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#E3ECE7);box-shadow:0 12px 30px -10px rgba(0,0,0,.7)}
.okp-wbody,.okp-wapp{z-index:2}.okp-wbody{width:64px;margin:-42px 0 0 -32px}.okp-wbody .okp-okb{width:64px}
label.okp-form>span{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}