/* Go live (okb-golive.js): plan, setting up, live. Builds on okb-pay.css. */
.okg-hero{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#3D6B5E,#244639);color:#fff;border-radius:22px;padding:18px;margin-bottom:18px;position:relative;overflow:hidden;box-shadow:0 14px 30px -18px rgba(20,60,45,.7)}
.okg-hero small{font-size:12.5px;opacity:.85}.okg-hero b{display:block;font:800 26px/1.15 var(--round,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);letter-spacing:-.02em}
.okg-globe{position:relative;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.okg-globe .okp-okb{width:34px;height:auto;animation:okpNod 2.8s ease-in-out infinite;transform-origin:50% 90%}
.okg-globe i{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);opacity:0;animation:okpRing 2.6s ease-out infinite}.okg-globe i+i{animation-delay:1.3s}
.okg-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}
.okg-seg button{height:44px;border-radius:14px;border:1px solid var(--line,#E8E8ED);background:var(--surface,#fff);color:var(--ink,#1D1D1F);font:650 14px var(--ui,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);cursor:pointer;transition:border-color .15s,box-shadow .2s,transform .2s}
.okg-seg button[aria-checked="true"]{border-color:var(--green,#355F53);box-shadow:0 0 0 3px var(--green-wash,#E2EDE7);color:var(--green,#355F53)}
.okg-seg button:active{transform:scale(.97)}
.okg-sum{border:1px solid var(--line,#E8E8ED);border-radius:18px;padding:6px 16px;margin-bottom:14px}
.okg-sum div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:14.5px}.okg-sum div+div{border-top:1px solid var(--line,#E8E8ED)}
.okg-sum b{font-variant-numeric:tabular-nums}
.okg-perks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;font-size:14px;color:var(--ink-2,#424245)}
.okg-perks li{display:flex;gap:10px;align-items:flex-start}.okg-perks i{color:var(--green,#355F53);margin-top:3px}
.okg-go{position:relative;overflow:hidden}.okg-go::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-100%);animation:okgShine 2.8s ease-in-out infinite}
@keyframes okgShine{60%,100%{transform:translateX(100%)}}
/* setting up */
.okg-setup{padding-top:30px}
.okg-build{position:relative;width:170px;height:150px;margin:10px auto 4px}
.okg-orb{position:absolute;left:50%;top:50%;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;background:radial-gradient(closest-side,var(--green-wash,#E2EDE7),transparent);animation:okpBeat 1.6s ease-in-out infinite}
.okg-tile{position:absolute;width:34px;height:24px;border-radius:7px;background:var(--green,#355F53);opacity:.85;animation:okgTile 2.4s ease-in-out infinite}
.okg-tile.t1{left:12px;top:30px}.okg-tile.t2{right:10px;top:46px;width:28px;background:#E9B949;animation-delay:.6s}.okg-tile.t3{left:26px;bottom:20px;width:26px;height:18px;background:#7FBFA5;animation-delay:1.2s}
@keyframes okgTile{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
.okg-who{position:absolute;left:50%;top:20px;width:80px;margin-left:-40px;animation:okpStep .7s ease-in-out infinite;transform-origin:50% 100%}
.okg-who .okp-okb{width:80px;height:auto;display:block}
.okg-bar{width:100%;max-width:320px;height:6px;border-radius:6px;background:var(--sunk,#F5F5F7);overflow:hidden;margin:14px 0 6px}
.okg-bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#7FBFA5,var(--green,#355F53));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.okg-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px;width:100%;max-width:320px;text-align:left}
.okg-steps li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--muted,#6E6E73);transition:color .25s}
.okg-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sunk,#F5F5F7);color:var(--muted,#6E6E73);font-size:13px;flex:none;transition:background .3s,color .3s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.okg-steps li.run{color:var(--ink,#1D1D1F);font-weight:600}.okg-steps li.run .okg-dot{background:var(--green-wash,#E2EDE7);color:var(--green,#355F53);animation:okpBeat 1s ease-in-out infinite}
.okg-steps li.done{color:var(--ink,#1D1D1F)}.okg-steps li.done .okg-dot{background:var(--green,#355F53);color:#fff;transform:scale(1.08)}
.okg-steps li.bad .okg-dot{background:var(--red,#C2412D);color:#fff}
/* live */
.okg-live{padding-top:40px;position:relative;overflow:hidden}
.okg-live h2{font-size:24px;animation:okpRise .5s .45s cubic-bezier(.2,1,.3,1) both}.okg-live .okp-muted{animation:okpRise .5s .55s cubic-bezier(.2,1,.3,1) both}
.okg-url{display:flex;align-items:center;gap:10px;width:100%;max-width:340px;border:1px solid var(--line,#E8E8ED);border-radius:16px;padding:6px 6px 6px 12px;margin-top:16px;background:var(--surface,#fff);animation:okpRise .5s .65s cubic-bezier(.2,1,.3,1) both}
.okg-lock{color:var(--green,#355F53)}.okg-host{flex:1;min-width:0;font:600 14px var(--mono,ui-monospace,Menlo,monospace);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.okg-acts{display:grid;gap:8px;width:100%;max-width:340px;margin-top:12px;animation:okpRise .5s .75s cubic-bezier(.2,1,.3,1) both}
.okg-acts a.okp-pay{display:grid;place-items:center;text-decoration:none}
@media (prefers-reduced-motion:reduce){.okg-globe .okp-okb,.okg-globe i,.okg-orb,.okg-tile,.okg-who,.okg-go::after,.okg-steps li.run .okg-dot{animation:none!important}}