git / moonbite-network / static/wallet-flagship.html · raw

<!DOCTYPE html><html lang="en" data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><meta name="theme-color" content="#07080B"><title>MoonBite Wallet</title><meta name="description" content="MoonBite (MBITE) self-custody wallet — your keys, your coins."><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"><style>/* ==========================================================================   MoonBite Wallet — "Obsidian"   One object carries the brand: a brushed black-metal card that holds your   balance. Everything else is quiet so the card and the numbers lead.   ========================================================================== */:root{  --void:#07080B; --void-2:#0C0E12; --panel:#111419; --panel-2:#171B21; --panel-3:#1F242C;  --bone:#F5F2EA; --ash:#9A958B; --ash-dim:#5F5B54;  --gold:#D9A441; --gold-soft:#E8C583; --gold-deep:#9A7328; --on-gold:#17120A;  --gain:#3BB27C; --loss:#D24B39;  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --line-gold:rgba(217,164,65,.34);  --glow:rgba(217,164,65,.14); --veil:rgba(7,8,11,.74); --glass:rgba(17,20,25,.72);  --d:'Archivo Black','Helvetica Neue',Arial,sans-serif;  --b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;  --m:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;  --r-xl:28px; --r-lg:20px; --r-md:14px;  --gut:20px; --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);  font-synthesis:none;}:root[data-theme="light"]{  --void:#F3EFE6; --void-2:#FBF9F4; --panel:#FFFFFF; --panel-2:#F1EDE3; --panel-3:#E7E1D4;  --bone:#14120D; --ash:#6B675F; --ash-dim:#A49E93;  --gold:#9A7328; --gold-soft:#B98E33; --gold-deep:#6E5119; --on-gold:#FFFDF7;  --gain:#1F8F5E; --loss:#B93A29;  --line:rgba(20,18,13,.08); --line-2:rgba(20,18,13,.14); --line-gold:rgba(154,115,40,.38);  --glow:rgba(154,115,40,.10); --veil:rgba(243,239,230,.8); --glass:rgba(255,255,255,.8);}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--void);color:var(--bone);font-family:var(--b);-webkit-font-smoothing:antialiased}body{min-height:100vh;overflow-x:hidden;font-feature-settings:"ss01" 1,"cv11" 1}button{font:inherit;color:inherit}[hidden]{display:none !important}   /* component display rules must not resurrect hidden controls */.mono{font-family:var(--m);font-feature-settings:"tnum" 1,"zero" 1;letter-spacing:-.01em}.num{font-feature-settings:"tnum" 1}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:middle}:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}/* ---- ambient: moonlight from above + film grain ---- */.sky{position:fixed;inset:0;z-index:-1;background:var(--void);overflow:hidden;pointer-events:none}.sky::before{content:"";position:absolute;left:50%;top:-55vh;width:150vw;max-width:1300px;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;  background:radial-gradient(closest-side,var(--glow),transparent 70%);animation:breathe 10s ease-in-out infinite}.sky::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}/* ---- shell ---- */.app{max-width:440px;margin:0 auto;min-height:100vh;position:relative}.screen{display:none;flex-direction:column;min-height:100vh;  padding:calc(env(safe-area-inset-top) + 14px) var(--gut) calc(env(safe-area-inset-bottom) + 20px)}.screen.active{display:flex;animation:enter .5s var(--ease)}@keyframes enter{from{opacity:0;transform:translateY(14px) scale(.995)}to{opacity:1;transform:none}}.screen.center{align-items:center;text-align:center}.spacer{flex:1 1 auto;min-height:8px}.top{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin:2px 0 22px;width:100%}.back{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--bone);cursor:pointer;  background:var(--panel);border:1px solid var(--line);transition:background .15s,transform .2s var(--spring)}.back:active{transform:scale(.9);background:var(--panel-2)}.back .icon{width:18px;height:18px}.title{font-weight:600;font-size:15.5px;text-align:center;letter-spacing:-.005em}.h-xl{font-family:var(--d);font-size:30px;line-height:1.05;letter-spacing:-.01em}.page-title{font-family:var(--d);font-size:32px;letter-spacing:-.01em;margin:10px 0 24px}.eyebrow{font-family:var(--m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}.muted{color:var(--ash);line-height:1.55}/* ---- the MBITE glyph via <use>: colours flow in through custom properties ---- */.glyph{display:block;overflow:visible;--gm:var(--bone);--gb:var(--gold)}/* ==========================================================================   THE CARD   ========================================================================== */.card-stage{perspective:1100px;width:100%}.mcard{position:relative;width:100%;aspect-ratio:1.586;text-align:left;border-radius:24px;padding:20px 22px;overflow:hidden;isolation:isolate;  color:#F5F2EA;--gm:#F5F2EA;--gb:#D9A441;  background:    radial-gradient(130% 95% at 0% 0%,rgba(217,164,65,.22),transparent 52%),    radial-gradient(80% 70% at 100% 110%,rgba(217,164,65,.12),transparent 60%),    repeating-linear-gradient(112deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),    linear-gradient(150deg,#1D2028 0%,#0C0E12 52%,#16191F 100%);  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.06),    0 40px 70px -30px rgba(0,0,0,.9),0 0 90px -34px rgba(217,164,65,.45);  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;  transition:transform .6s var(--ease);will-change:transform}.mcard.live{transition:transform .08s linear}.mcard .glyph{--gm:#F5F2EA;--gb:#D9A441}/* light catching the brushed metal; follows the pointer */.mcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;z-index:3;  background:radial-gradient(55% 60% at var(--mx,22%) var(--my,0%),rgba(255,233,180,.26),transparent 62%),             linear-gradient(115deg,transparent 30%,rgba(255,240,205,.07) 45%,transparent 60%);  background-size:100% 100%,250% 100%;animation:sweep 7s ease-in-out infinite}@keyframes sweep{0%,100%{background-position:0 0,130% 0}50%{background-position:0 0,-30% 0}}.mcard .engrave{position:absolute;right:-70px;bottom:-84px;width:230px;height:230px;opacity:.09;z-index:0;--gm:#F5F2EA;--gb:#F5F2EA}.mcard .row{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}.mcard .brand{display:flex;align-items:center;gap:9px}.mcard .brand .glyph{width:24px;height:24px}.mcard .brand b{font-family:var(--d);font-weight:400;font-size:13px;letter-spacing:.2em}.mcard .tag{font-family:var(--m);font-size:9.5px;letter-spacing:.18em;color:rgba(245,242,234,.6);  border:1px solid rgba(245,242,234,.16);border-radius:999px;padding:4px 9px}.mcard .mid{position:absolute;left:22px;right:22px;top:50%;transform:translateY(-44%);z-index:2}.mcard .lbl{font-family:var(--m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,234,.55);  display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:4px 0}.mcard .lbl .icon{width:14px;height:14px}.bal{display:flex;align-items:baseline;gap:10px;margin-top:4px;white-space:nowrap}.bal .fig{font-family:var(--b);font-weight:500;font-size:var(--bal-size,46px);letter-spacing:-.045em;line-height:1;  font-feature-settings:"tnum" 1;transition:filter .35s var(--ease)}.bal .fig .dec{color:rgba(245,242,234,.45)}.bal .unit{font-family:var(--m);font-weight:700;font-size:11px;letter-spacing:.18em;color:#D9A441}.mcard .foot{position:absolute;left:22px;right:22px;bottom:18px;z-index:2}.mcard .addr-m{font-family:var(--m);font-size:12px;letter-spacing:.06em;color:rgba(245,242,234,.7)}.mcard .mark{display:flex}.mcard .mark i{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(217,164,65,.8)}.mcard .mark i+i{margin-left:-9px;background:rgba(217,164,65,.25)}.hide-bal .bal .fig,.hide-bal .sens{filter:blur(12px);user-select:none}/* card on onboarding / unlock: floating */.float{animation:float 6s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0) rotateX(8deg) rotateY(-14deg) rotateZ(-4deg)}50%{transform:translateY(-10px) rotateX(4deg) rotateY(-6deg) rotateZ(-2deg)}}.hero-stage{perspective:1000px;width:86%;max-width:330px;margin:10px auto 44px;position:relative}.hero-stage::after{content:"";position:absolute;left:12%;right:12%;bottom:-34px;height:22px;border-radius:50%;  background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(6px);animation:shadow 6s ease-in-out infinite}@keyframes shadow{50%{transform:scaleX(.88);opacity:.7}}/* ---- buttons ---- */.btn{width:100%;height:58px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:10px;  font-family:var(--b);font-weight:600;font-size:16px;letter-spacing:-.005em;cursor:pointer;border:1px solid transparent;  transition:transform .2s var(--spring),background .15s,opacity .15s,box-shadow .25s}.btn:active{transform:scale(.97)}.btn .icon{width:18px;height:18px}.btn-primary{color:var(--on-gold);  background:linear-gradient(180deg,#E6B85A 0%,#D9A441 55%,#C8922F 100%);  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 34px -14px rgba(217,164,65,.8)}.btn-primary .glyph{--gm:var(--on-gold);--gb:var(--on-gold)}:root[data-theme="light"] .btn-primary{background:linear-gradient(180deg,#B48834,#9A7328)}.btn-primary:disabled,:root[data-theme="light"] .btn-primary:disabled{background:var(--panel-2);color:var(--ash-dim);box-shadow:none;cursor:default;transform:none}.btn-dark{background:var(--bone);color:var(--void)}.btn-ghost{background:var(--panel);color:var(--bone);border-color:var(--line)}.btn-ghost .icon{stroke:var(--gold)}.btn-text{background:none;border:none;color:var(--ash);height:48px;font-weight:500;font-size:15px}.btn-glyph{width:20px;height:20px}/* ---- welcome ---- */.welcome-copy{width:100%}.welcome-copy .h1{font-family:var(--d);font-size:clamp(32px,9.6vw,40px);line-height:.98;letter-spacing:-.02em;margin:14px 0 14px}.welcome-copy .h1 em{font-style:normal;background:linear-gradient(180deg,#F0CB7E,#C8922F);-webkit-background-clip:text;background-clip:text;color:transparent}:root[data-theme="light"] .welcome-copy .h1 em{background:linear-gradient(180deg,#B48834,#7E5D1E);-webkit-background-clip:text;background-clip:text}.welcome-copy .lead{color:var(--ash);font-size:15.5px;line-height:1.55;max-width:310px;margin:0 auto 30px}.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px;width:100%}.trust div{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line);  font-size:11.5px;color:var(--ash);line-height:1.3}.trust .icon{width:17px;height:17px;stroke:var(--gold)}/* ---- inputs / text bits ---- */.input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);color:var(--bone);  font-family:var(--b);font-size:15px;padding:16px;outline:none;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--line-gold);box-shadow:0 0 0 4px var(--glow)}.input::placeholder{color:var(--ash-dim)}textarea.input{font-family:var(--m);font-size:14px;line-height:1.65}.field{width:100%;margin-bottom:12px}.warn{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line-gold);border-radius:var(--r-md);text-align:left;width:100%;  padding:13px 14px;color:var(--gold-soft);font-size:13px;line-height:1.5;background:linear-gradient(180deg,rgba(217,164,65,.08),rgba(217,164,65,.03))}.warn .icon{width:17px;height:17px;stroke:var(--gold);margin-top:1px}.old-banner{margin-top:14px;align-items:center;font-size:13px;line-height:1.45}.old-banner .grow{flex:1}.btn-mini{flex:none;background:var(--gold);color:var(--on-gold);border:none;border-radius:999px;padding:7px 13px;font-weight:700;font-size:12.5px;cursor:pointer}.btn-mini:disabled{opacity:.5;cursor:default}.adv{width:100%;margin-top:12px;text-align:left}.adv summary{cursor:pointer;color:var(--ash);font-size:13.5px;padding:8px 2px;list-style:none}.adv summary::-webkit-details-marker{display:none}.adv summary::before{content:'+ ';color:var(--gold)}.adv[open] summary::before{content:'\2212  '}.adv .input{margin-top:8px}.adv .warn{margin-top:10px}.err{color:var(--loss);font-size:13px;min-height:18px;margin-top:10px;font-family:var(--m);line-height:1.45}.steps{display:flex;gap:6px;width:100%;margin:-8px 0 26px}.steps i{flex:1;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden;position:relative}.steps i.on::after{content:"";position:absolute;inset:0;background:var(--gold);animation:fill .6s var(--ease) both}@keyframes fill{from{transform:translateX(-100%)}}/* ---- seed ---- */.seed-wrap{position:relative;width:100%;margin:4px 0 14px;border-radius:var(--r-lg)}.seed-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.seed-grid .word{display:flex;align-items:baseline;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:filter .4s var(--ease)}.seed-grid .word i{font-family:var(--m);font-size:10.5px;color:var(--gold);font-style:normal;min-width:16px}.seed-grid .word b{font-family:var(--m);font-weight:700;font-size:15px}.seed-wrap.veiled .word{filter:blur(8px)}.veil{position:absolute;inset:-1px;border-radius:var(--r-lg);display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;  text-align:center;background:var(--veil);border:1px solid var(--line-2);cursor:pointer;padding:20px}.seed-wrap.veiled .veil{display:flex}.veil .vi{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line-gold);box-shadow:0 0 40px -8px var(--glow)}.veil .vi .icon{width:22px;height:22px;stroke:var(--gold)}.veil b{font-size:15.5px;font-weight:600}.veil span{font-size:13px;color:var(--ash);max-width:240px;line-height:1.5}.ack{display:flex;gap:12px;align-items:flex-start;width:100%;padding:14px;margin-top:12px;border-radius:var(--r-md);background:var(--panel);  border:1px solid var(--line);cursor:pointer;text-align:left;font-size:13.5px;line-height:1.5;color:var(--ash);user-select:none;transition:border-color .2s,opacity .2s}.ack .box{width:22px;height:22px;flex:none;border-radius:7px;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:background .2s,border-color .2s}.ack .box .icon{width:14px;height:14px;stroke:var(--on-gold);stroke-width:3;opacity:0;transform:scale(.5);transition:all .25s var(--spring)}.ack.on{color:var(--bone);border-color:var(--line-gold)}.ack.on .box{background:var(--gold);border-color:var(--gold)}.ack.on .box .icon{opacity:1;transform:none}.ack.off{opacity:.4;pointer-events:none}/* ---- PIN ---- */.lock-badge{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;margin:0 auto 20px;  background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line-gold);box-shadow:0 20px 50px -20px var(--glow),inset 0 1px 0 rgba(255,255,255,.06)}.lock-badge .icon{width:26px;height:26px;stroke:var(--gold)}.pin-h{font-family:var(--d);font-size:25px;letter-spacing:-.01em;margin-bottom:8px}.pin-dots{display:flex;gap:16px;margin:30px 0 4px;justify-content:center}.pin-dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-2);transition:background .2s,border-color .2s,transform .3s var(--spring)}.pin-dots i.on{background:var(--gold);border-color:var(--gold);transform:scale(1.15);box-shadow:0 0 14px rgba(217,164,65,.55)}.pin-dots.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}.pin-dots.shake i{border-color:var(--loss)}@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px;width:100%;max-width:300px;margin:0 auto}.key{aspect-ratio:1;max-height:76px;width:100%;justify-self:center;border-radius:50%;background:var(--panel);border:1px solid var(--line);  color:var(--bone);font-family:var(--b);font-weight:400;font-size:28px;cursor:pointer;display:grid;place-items:center;transition:transform .15s var(--spring),background .12s}.key:active{transform:scale(.88);background:var(--panel-3)}.key.ghost{background:transparent;border:none;cursor:default}.key[data-k="del"]{background:transparent;border-color:transparent}.key .icon{width:24px;height:24px}/* ==========================================================================   HOME   ========================================================================== */.home-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:20px}.wordmark{display:flex;align-items:center;gap:10px}.wordmark .glyph{width:28px;height:28px}.wordmark b{font-family:var(--d);font-weight:400;font-size:15px;letter-spacing:.14em}.live{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);  font-family:var(--m);font-size:11px;color:var(--ash)}.live .dot{width:7px;height:7px;border-radius:50%;background:var(--gain);animation:ping 2.2s ease-out infinite}.live.off .dot{background:var(--ash-dim);animation:none}.live b{color:var(--bone);font-weight:700}@keyframes ping{0%{box-shadow:0 0 0 0 rgba(59,178,124,.55)}80%,100%{box-shadow:0 0 0 7px rgba(59,178,124,0)}}.under{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:18px 0 0;font-size:13px;color:var(--ash)}.under b{color:var(--bone);font-weight:600}.under #balMaturing{color:var(--gold-soft)}.under #balMaturing:empty{display:none}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:22px}.act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;height:88px;border-radius:var(--r-lg);cursor:pointer;  background:var(--panel);border:1px solid var(--line);font-size:13px;font-weight:600;transition:transform .2s var(--spring),background .15s}.act:active{transform:scale(.95);background:var(--panel-2)}.act .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--panel-3)}.act .icon{width:19px;height:19px}.act.prime{color:var(--on-gold);border-color:transparent;  background:linear-gradient(180deg,#E6B85A 0%,#D9A441 55%,#C8922F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 34px -16px rgba(217,164,65,.85)}:root[data-theme="light"] .act.prime{background:linear-gradient(180deg,#B48834,#9A7328)}.act.prime .ic{background:rgba(23,18,10,.12)}.section-h{display:flex;align-items:baseline;justify-content:space-between;width:100%;margin:30px 2px 12px}.section-h h3{font-weight:600;font-size:18px;letter-spacing:-.01em}.section-h a{font-size:13px;font-weight:500;color:var(--gold);cursor:pointer}/* network panel: real numbers from the explorer API only */.netgrid{display:grid;grid-template-columns:repeat(3,1fr);width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}.netgrid div{padding:14px 14px 13px;border-left:1px solid var(--line)}.netgrid div:first-child{border-left:none}.netgrid small{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:7px}.netgrid b{font-size:15px;font-weight:600;font-feature-settings:"tnum" 1;letter-spacing:-.01em}/* ---- activity ---- */.activity{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:2px 16px}.activity .empty{text-align:center;color:var(--ash);font-size:13.5px;line-height:1.7;padding:30px 10px 28px}.activity .empty::before{content:"";display:block;width:46px;height:46px;margin:0 auto 12px;border-radius:50%;  background:radial-gradient(circle at 35% 35%,var(--panel-3),var(--panel-2));border:1px solid var(--line-2)}.tx{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:13px;padding:14px 0;border-top:1px solid var(--line)}.tx:first-child{border-top:none}.tx .ic{width:44px;height:44px;border-radius:50%;background:var(--panel-3);display:grid;place-items:center}.tx .ic .icon{width:18px;height:18px}.tx.in .ic{background:rgba(59,178,124,.13)}.tx.in .ic .icon{stroke:var(--gain)}.tx .meta{min-width:0}.tx .meta .t{font-weight:600;font-size:15px;letter-spacing:-.005em}.tx .meta .s{font-size:12px;color:var(--ash);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx .amt{font-weight:600;font-size:15px;text-align:right;font-feature-settings:"tnum" 1;letter-spacing:-.01em;transition:filter .3s}.tx.in .amt{color:var(--gain)}.hide-bal .tx .amt{filter:blur(9px)}/* ---- receive ---- */.recv{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;gap:18px;margin-bottom:16px;  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px 20px 24px}.qr-wrap{position:relative;padding:12px}.qr-wrap .c{position:absolute;width:26px;height:26px;border:2.5px solid var(--gold)}.qr-wrap .c.tl{top:0;left:0;border-right:none;border-bottom:none;border-radius:12px 0 0 0}.qr-wrap .c.tr{top:0;right:0;border-left:none;border-bottom:none;border-radius:0 12px 0 0}.qr-wrap .c.bl{bottom:0;left:0;border-right:none;border-top:none;border-radius:0 0 0 12px}.qr-wrap .c.br{bottom:0;right:0;border-left:none;border-top:none;border-radius:0 0 12px 0}.qr-frame{position:relative;width:236px;height:236px;background:#F5F2EA;border-radius:22px;padding:16px}#qrFrame{width:100%;height:100%;display:grid;place-items:center}#qrFrame svg{width:100%;height:100%;display:block}/* ECC level M: keep the centre mark to ~5% of the code so it always scans */.qr-badge{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:10px;background:#0B0D12;  display:grid;place-items:center;box-shadow:0 0 0 4px #F5F2EA}.qr-badge .glyph{width:24px;height:24px;--gm:#F5F2EA;--gb:#D9A441}.addr{font-family:var(--m);font-size:13.5px;line-height:1.7;word-break:break-all;color:var(--ash);max-width:290px}.addr .hl{color:var(--bone);font-weight:700}.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;  color:var(--ash);background:var(--panel-2);border-radius:999px;padding:7px 12px}.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.row2.one{grid-template-columns:1fr}/* ---- send ---- */.to-pill{display:flex;align-items:center;gap:10px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 18px;transition:border-color .15s,box-shadow .15s}.to-pill:focus-within{border-color:var(--line-gold);box-shadow:0 0 0 4px var(--glow)}.to-pill .lbl{font-size:13px;font-weight:600;color:var(--ash)}.to-pill input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--bone);font-family:var(--m);font-size:13.5px;padding:10px 0}.to-pill input::placeholder{color:var(--ash-dim)}.paste{height:38px;padding:0 15px;border-radius:999px;border:none;background:var(--panel-3);color:var(--gold);font-size:13px;font-weight:600;cursor:pointer;flex:none}.amount-stage{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:170px;width:100%;padding:12px 0}.amt-input{width:100%;background:none;border:none;outline:none;text-align:center;color:var(--bone);  font-family:var(--b);font-weight:500;font-size:var(--amt-size,68px);letter-spacing:-.05em;line-height:1.1;caret-color:var(--gold);  font-feature-settings:"tnum" 1;transition:font-size .18s var(--ease),color .2s}.amt-input::placeholder{color:var(--ash-dim)}.amt-unit{font-family:var(--m);font-weight:700;font-size:11.5px;letter-spacing:.18em;color:var(--gold);margin-top:4px}.avail{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px}.avail .pill{font-size:13px;color:var(--ash);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px}.avail .pill b{color:var(--bone);font-weight:600}.avail a{font-size:13px;font-weight:600;color:var(--gold);cursor:pointer;background:var(--panel);border:1px solid var(--line-gold);border-radius:999px;padding:8px 15px}.amount-stage.over .amt-input{color:var(--loss)}.npad{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin:6px 0 14px}.nk{height:60px;border:none;background:none;color:var(--bone);font-family:var(--b);font-size:26px;font-weight:400;cursor:pointer;border-radius:var(--r-md);  display:grid;place-items:center;transition:background .1s,transform .15s var(--spring)}.nk:active{background:var(--panel);transform:scale(.92)}.nk .icon{width:24px;height:24px}/* ---- sheet ---- */.scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.sheet{position:fixed;left:50%;bottom:0;z-index:71;width:100%;max-width:440px;transform:translate(-50%,105%);  background:var(--void-2);border:1px solid var(--line-2);border-bottom:none;border-radius:30px 30px 0 0;  padding:12px var(--gut) calc(env(safe-area-inset-bottom) + 18px);transition:transform .45s var(--ease);box-shadow:0 -30px 60px -20px rgba(0,0,0,.6)}.sheet-open .scrim{opacity:1;pointer-events:auto}.sheet-open .sheet{transform:translate(-50%,0)}.grab{width:40px;height:5px;border-radius:5px;background:var(--line-2);margin:0 auto 22px}.sheet-head{text-align:center;margin-bottom:20px}.sheet-head .big{font-weight:500;font-size:44px;letter-spacing:-.05em;margin-top:6px;font-feature-settings:"tnum" 1}.sheet-head .big small,.receipt .amtbig small{font-family:var(--m);font-weight:700;font-size:12px;letter-spacing:.16em;color:var(--gold);margin-left:8px}.review{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:2px 16px}.review .row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line)}.review .row:first-child{border-top:none}.review .row .k{color:var(--ash);font-size:14px;flex:none}.review .row .v{font-size:14px;font-weight:600;text-align:right;min-width:0;word-break:break-all;font-feature-settings:"tnum" 1}.review .row .v.mono{font-weight:700;font-size:13px}.review .row.total .k{color:var(--bone);font-weight:600}.review .row.total .v{color:var(--gold)}.fine{font-size:12.5px;color:var(--ash);text-align:center;margin:14px 0 6px;line-height:1.5}/* ---- receipt (after a successful broadcast) ---- */.receipt{position:fixed;inset:0;z-index:95;display:none;background:var(--void);overflow:auto}.receipt.show{display:block;animation:enter .45s var(--ease)}.receipt .in{max-width:440px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;  padding:calc(env(safe-area-inset-top) + 50px) var(--gut) calc(env(safe-area-inset-bottom) + 20px)}.done-ring{width:112px;height:112px;margin-bottom:26px;filter:drop-shadow(0 0 30px rgba(217,164,65,.35))}.done-ring circle{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:302;stroke-dashoffset:302;transform:rotate(-90deg);transform-origin:center}.done-ring path{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}.receipt.show .done-ring circle{animation:draw .8s var(--ease) .1s forwards}.receipt.show .done-ring path{animation:draw .45s var(--ease) .75s forwards}@keyframes draw{to{stroke-dashoffset:0}}.receipt .amtbig{font-weight:500;font-size:48px;letter-spacing:-.05em;margin:8px 0 4px;font-feature-settings:"tnum" 1}.status-pill{display:inline-flex;align-items:center;gap:8px;margin:12px 0 26px;padding:8px 14px;border-radius:999px;background:rgba(217,164,65,.1);color:var(--gold-soft);font-size:13px;font-weight:500}.status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.3}}.receipt .review{width:100%;text-align:left}.txid{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;border:none;color:var(--bone)}.txid .icon{width:15px;height:15px;stroke:var(--gold)}/* ---- settings ---- */.set-group{width:100%;margin-bottom:26px}.set-label{font-size:13px;font-weight:500;color:var(--ash);margin:0 4px 10px}.set-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}.seg{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px}.seg-btn{flex:1;height:42px;border:none;border-radius:999px;background:transparent;color:var(--ash);font-weight:600;font-size:14px;cursor:pointer;transition:background .2s,color .2s}.seg-btn.active{background:var(--panel-3);color:var(--bone);box-shadow:inset 0 0 0 1px var(--line-gold)}.set-row{display:flex;align-items:center;gap:14px;padding:15px 16px;cursor:pointer;transition:background .12s;font-size:15.5px;border-top:1px solid var(--line)}.set-row:first-child{border-top:none}.set-row:active{background:var(--panel-2)}.set-row.static{cursor:default}.set-row.static:active{background:transparent}.set-row.danger{color:var(--loss)}.set-row .lead-ic{width:34px;height:34px;border-radius:11px;background:var(--panel-3);display:grid;place-items:center;flex:none}.set-row .set-lead{width:17px;height:17px;stroke:var(--gold)}.set-row.danger .set-lead{stroke:var(--loss)}.set-row .grow{flex:1}.set-row .set-ic{width:16px;height:16px;stroke:var(--ash-dim)}.set-addr{flex:1;font-family:var(--m);font-size:12.5px;line-height:1.6;word-break:break-all}.net-ok{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--gain);font-weight:500}.net-ok .dot{width:7px;height:7px;border-radius:50%;background:var(--gain)}.bio-state{font-family:var(--m);font-size:10.5px;color:var(--ash);text-transform:uppercase;letter-spacing:.08em;background:var(--panel-3);border-radius:999px;padding:5px 10px}.bio-row.on .bio-state{color:var(--on-gold);background:var(--gold)}.set-foot{font-size:12px;color:var(--ash-dim);text-align:center;line-height:1.6;margin-top:2px}.bio-unlock{margin-top:18px;max-width:300px}/* ---- floating tab bar ---- */.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:20;  width:calc(100% - 40px);max-width:330px;height:66px;border-radius:999px;padding:6px;  background:var(--glass);border:1px solid var(--line-2);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);  box-shadow:0 20px 44px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);display:grid;grid-template-columns:repeat(3,1fr)}.tabbar[hidden]{display:none}.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:none;cursor:pointer;border-radius:999px;  color:var(--ash);font-weight:600;font-size:10.5px;transition:background .25s,color .25s}.tab .icon{width:21px;height:21px}.tab.active{color:var(--bone);background:var(--panel-3)}.tab.active .icon{stroke:var(--gold)}#s-home,#s-activity,#s-settings{padding-bottom:calc(env(safe-area-inset-bottom) + 110px)}/* ---- toast ---- */.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 14px);transform:translateX(-50%) translateY(-20px) scale(.96);  background:var(--bone);color:var(--void);border-radius:999px;padding:11px 18px;display:flex;align-items:center;gap:9px;  font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .4s var(--spring);z-index:99;box-shadow:0 14px 34px -10px rgba(0,0,0,.6)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}.toast .icon{width:16px;height:16px;stroke:var(--gain)}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}}@media (max-height:720px){  .hero-stage{margin-bottom:30px;width:74%}  .welcome-copy .h1{font-size:34px}  .nk{height:52px}  .amount-stage{min-height:120px}}@media (max-width:360px){ :root{--gut:16px} .mcard{padding:16px 18px} .mcard .mid,.mcard .foot{left:18px;right:18px} }</style></head><body><div class="sky"></div><svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>  <symbol id="i-send" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></symbol>  <symbol id="i-recv" viewBox="0 0 24 24"><path d="M12 5v14M19 12l-7 7-7-7"/></symbol>  <symbol id="i-copy" viewBox="0 0 24 24"><rect x="9" y="9" width="12" height="12" rx="2.5"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></symbol>  <symbol id="i-share" viewBox="0 0 24 24"><path d="M12 15V3M7 8l5-5 5 5"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"/></symbol>  <symbol id="i-lock" viewBox="0 0 24 24"><rect x="4.5" y="10.5" width="15" height="10" rx="2.5"/><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/></symbol>  <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/><path d="M9.5 12l2 2 3.5-4"/></symbol>  <symbol id="i-key" viewBox="0 0 24 24"><circle cx="8" cy="15" r="4"/><path d="M11 12l8-8M17 3l3 3M14 6l2 2"/></symbol>  <symbol id="i-chip" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4"/></symbol>  <symbol id="i-back" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></symbol>  <symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7"/></symbol>  <symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 8v5M12 16.5v.5"/><path d="M10.3 4l-7 12A2 2 0 0 0 5 19h14a2 2 0 0 0 1.7-3l-7-12a2 2 0 0 0-3.4 0Z"/></symbol>  <symbol id="i-del" viewBox="0 0 24 24"><path d="M20 6H9l-5 6 5 6h11a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1ZM17 10l-4 4M13 10l4 4"/></symbol>  <symbol id="i-home" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M3 10h18M15 14.5h3"/></symbol>  <symbol id="i-activity" viewBox="0 0 24 24"><path d="M4 12h3l2.5-6 4 13 2.5-7H21"/></symbol>  <symbol id="i-gear" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2"/><path d="M12 3v2.5M12 18.5V21M5.2 5.2l1.8 1.8M17 17l1.8 1.8M3 12h2.5M18.5 12H21M5.2 18.8l1.8-1.8M17 7l1.8-1.8"/></symbol>  <symbol id="i-eye" viewBox="0 0 24 24"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"/><circle cx="12" cy="12" r="3"/></symbol>  <symbol id="i-eye-off" viewBox="0 0 24 24"><path d="M3 3l18 18"/><path d="M10.6 5.6A9.6 9.6 0 0 1 12 5.5C18 5.5 21.5 12 21.5 12a17 17 0 0 1-3 3.7M6.6 6.6C3.9 8.4 2.5 12 2.5 12S6 18.5 12 18.5a9 9 0 0 0 4.2-1"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/></symbol>  <symbol id="i-logout" viewBox="0 0 24 24"><path d="M15 5H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h9"/><path d="M12 12h9M18 9l3 3-3 3"/></symbol>  <symbol id="i-chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></symbol>  <symbol id="i-touch" viewBox="0 0 24 24"><path d="M12 10v3M8.5 8.5a5 5 0 0 1 7 0M6 11a8.5 8.5 0 0 1 .8-3.6M18 11a8.5 8.5 0 0 0-.8-3.6M8.5 13.5a5 5 0 0 0 1.2 4M15.5 13.5a5 5 0 0 1-.5 5M11.5 20a8.5 8.5 0 0 1-1.2-2"/></symbol>  <!-- MBITE currency glyph (d02): bitten moon struck by two bars; colours via --gm / --gb -->  <symbol id="g-mbite" viewBox="-140 -140 280 280"><path style="fill:var(--gm,#F5F2EA)" d="M 13.99 -99.02 A 100 100 0 1 0 99.02 -13.99 A 62 62 0 0 1 13.99 -99.02 Z"/><rect style="fill:var(--gb,#D9A441)" x="-127.5" y="-40.5" width="255" height="13"/><rect style="fill:var(--gb,#D9A441)" x="-127.5" y="11.5" width="255" height="13"/></symbol></defs></svg><div class="app">  <!-- ======================= WELCOME ======================= -->  <section id="s-welcome" class="screen center active">    <div class="spacer"></div>    <div class="hero-stage" aria-hidden="true">      <div class="mcard float">        <svg class="glyph engrave"><use href="#g-mbite"/></svg>        <div class="row"><div class="brand"><svg class="glyph"><use href="#g-mbite"/></svg><b>MOONBITE</b></div><span class="tag">SELF-CUSTODY</span></div>        <div class="mid"><div class="lbl">Balance</div><div class="bal"><span class="fig">0<span class="dec">.00</span></span><span class="unit">MBITE</span></div></div>        <div class="foot row"><span class="addr-m">moon1 •••• ••••</span><span class="mark"><i></i><i></i></span></div>      </div>    </div>    <div class="welcome-copy">      <div class="eyebrow">MoonBite Wallet</div>      <h1 class="h1">Money that<br><em>answers to you.</em></h1>      <p class="lead">Hold, send and receive MBITE. Your keys are made and kept on this device — no account, no custodian.</p>      <button class="btn btn-primary" data-act="startCreate"><svg class="glyph btn-glyph"><use href="#g-mbite"/></svg>Create a wallet</button>      <button class="btn btn-text" style="margin-top:6px" data-act="go" data-arg="s-import">Restore with a recovery phrase</button>      <div class="trust">        <div><svg class="icon"><use href="#i-shield"/></svg>Non-custodial</div>        <div><svg class="icon"><use href="#i-chip"/></svg>Signed on device</div>        <div><svg class="icon"><use href="#i-lock"/></svg>Encrypted at rest</div>      </div>    </div>    <div style="height:6px"></div>  </section>  <!-- ======================= BACKUP ======================= -->  <section id="s-create" class="screen">    <div class="top"><button class="back" data-act="go" data-arg="s-welcome" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Back up</div><span></span></div>    <div class="steps" aria-hidden="true"><i class="on"></i><i></i><i></i></div>    <h2 class="h-xl" style="margin-bottom:10px">Your recovery phrase</h2>    <p class="muted" style="margin-bottom:18px;font-size:14.5px">These 12 words <b style="color:var(--bone)">are</b> your wallet. Write them on paper, in order, and keep them offline.</p>    <div class="seed-wrap veiled" id="seedWrap">      <div class="seed-grid" id="seedGrid"></div>      <div class="veil" data-ui="reveal" role="button" tabindex="0">        <div class="vi"><svg class="icon"><use href="#i-eye"/></svg></div>        <b>Tap to reveal</b>        <span>Make sure no one can see your screen.</span>      </div>    </div>    <div class="warn"><svg class="icon"><use href="#i-alert"/></svg><span>No one can recover these words for you — not even MoonBite. Lose them and the coins are gone.</span></div>    <div class="ack off" id="seedAck" data-ui="ack" role="checkbox" aria-checked="false" tabindex="0"><span class="box"><svg class="icon"><use href="#i-check"/></svg></span>I’ve written down all 12 words and stored them somewhere safe.</div>    <details class="adv" id="createAdv"><summary>Add an extra password (optional)</summary>      <input class="input" id="createPass" type="password" placeholder="Extra password" autocomplete="new-password" spellcheck="false" autocapitalize="off">      <input class="input" id="createPass2" type="password" placeholder="Type it again" autocomplete="new-password" spellcheck="false" autocapitalize="off">      <div class="warn"><svg class="icon"><use href="#i-alert"/></svg><span>With a password, someone who finds your 12 words still can’t open your wallet. But you need BOTH to restore it, and nobody can reset the password. Write it down separately. Capitals and spaces count.</span></div>    </details>    <div class="err" id="createErr"></div>    <div class="spacer"></div>    <button class="btn btn-primary" id="toPinBtn" data-act="toPin" disabled>Continue</button>    <div style="height:10px"></div>  </section>  <section id="s-import" class="screen">    <div class="top"><button class="back" data-act="go" data-arg="s-welcome" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Restore</div><span></span></div>    <div class="steps" aria-hidden="true"><i class="on"></i><i></i><i></i></div>    <h2 class="h-xl" style="margin-bottom:10px">Enter your phrase</h2>    <p class="muted" style="margin-bottom:18px;font-size:14.5px">Type or paste your 12 words in order, separated by spaces.</p>    <div class="field"><textarea class="input" id="importInput" rows="5" placeholder="word one  word two  word three …" style="resize:none" spellcheck="false" autocomplete="off" autocapitalize="off"></textarea></div>    <details class="adv" id="importAdv"><summary>I also set an extra password</summary>      <input class="input" id="importPass" type="password" placeholder="Extra password" autocomplete="off" spellcheck="false" autocapitalize="off">      <p class="muted" style="font-size:12.5px;margin-top:8px">Type it exactly, capitals and spaces included. A wrong password opens a different, empty wallet rather than an error.</p>    </details>    <div class="err" id="importErr"></div>    <div class="spacer"></div>    <button class="btn btn-primary" data-act="doImport">Restore wallet</button>    <div style="height:10px"></div>  </section>  <section id="s-pin-set" class="screen center">    <div class="top"><button class="back" data-act="pinBack" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Secure this device</div><span></span></div>    <div class="steps" aria-hidden="true"><i class="on"></i><i class="on"></i><i></i></div>    <div class="spacer"></div>    <div class="lock-badge"><svg class="icon"><use href="#i-lock"/></svg></div>    <h2 class="pin-h" id="pinSetTitle">Create a 6-digit PIN</h2>    <p class="muted" style="font-size:14px" id="pinSetHint">It encrypts your phrase on this device.</p>    <div class="pin-dots" id="setDots"></div>    <div class="err" id="pinErr"></div>    <div class="spacer"></div>    <div class="pad" id="setPad"></div>    <div style="height:14px"></div>  </section>  <!-- ======================= UNLOCK ======================= -->  <section id="s-unlock" class="screen center">    <div class="hero-stage" style="width:58%;max-width:230px;margin:18px auto 34px" aria-hidden="true">      <div class="mcard float" style="padding:14px 16px;border-radius:16px">        <svg class="glyph engrave" style="width:150px;height:150px;right:-30px;bottom:-36px"><use href="#g-mbite"/></svg>        <div class="row"><div class="brand"><svg class="glyph" style="width:18px;height:18px"><use href="#g-mbite"/></svg><b style="font-size:10px">MOONBITE</b></div></div>        <div class="mid" style="left:16px;right:16px"><div class="lbl" style="font-size:8.5px"><svg class="icon" style="width:11px;height:11px"><use href="#i-lock"/></svg>Locked</div></div>      </div>    </div>    <h2 class="pin-h">Welcome back</h2>    <p class="muted" style="font-size:14px">Enter your PIN to unlock</p>    <div class="pin-dots" id="unlockDots"></div>    <div class="err" id="unlockErr"></div>    <div class="spacer"></div>    <div class="pad" id="unlockPad"></div>    <button class="btn btn-ghost bio-unlock" id="bioUnlockBtn" data-act="bioUnlock" hidden><svg class="icon"><use href="#i-touch"/></svg>Unlock with biometrics</button>    <div style="height:14px"></div>  </section>  <!-- ======================= HOME ======================= -->  <section id="s-home" class="screen">    <div class="home-top">      <div class="wordmark"><svg class="glyph"><use href="#g-mbite"/></svg><b>MOONBITE</b></div>      <div class="live off" id="livePill" title="Latest block on MoonBite mainnet"><span class="dot"></span><span id="liveTxt">Connecting</span></div>    </div>    <div class="card-stage">      <div class="mcard" id="mcard">        <svg class="glyph engrave"><use href="#g-mbite"/></svg>        <div class="row"><div class="brand"><svg class="glyph"><use href="#g-mbite"/></svg><b>MOONBITE</b></div><span class="tag">MAINNET</span></div>        <div class="mid">          <button class="lbl" data-ui="toggleHide" aria-label="Hide or show balance">Total balance <svg class="icon" id="hideIc"><use href="#i-eye"/></svg></button>          <div class="bal"><span class="fig" id="balView" aria-live="polite">0<span class="dec">.00</span></span><span class="unit">MBITE</span></div>          <span id="balNum" class="sr">0.00</span>        </div>        <div class="foot row"><span class="addr-m" data-bind="address"></span><span class="mark" aria-hidden="true"><i></i><i></i></span></div>      </div>    </div>    <div class="under">Spendable <b id="balSpend" class="sens num">0.00</b><span id="balMaturing" class="sens" title="Mining rewards can be spent after 100 blocks (about 3 hours)"></span></div>    <div class="warn old-banner" id="oldBanner" hidden><svg class="icon"><use href="#i-alert"/></svg><span class="grow" id="oldBannerTxt"></span><button class="btn-mini" id="oldBannerBtn" data-act="moveLeftoverStart" hidden>Move now</button></div>    <div class="actions">      <button class="act prime" data-act="go" data-arg="s-send"><span class="ic"><svg class="icon"><use href="#i-send"/></svg></span>Send</button>      <button class="act" data-act="openReceive"><span class="ic"><svg class="icon"><use href="#i-recv"/></svg></span>Receive</button>      <button class="act" data-act="copyAddr"><span class="ic"><svg class="icon"><use href="#i-copy"/></svg></span>Copy</button>    </div>    <div class="section-h"><h3>Network</h3><a data-act="refreshBalance" data-ui="refresh">Refresh</a></div>    <div class="netgrid">      <div><small>Block</small><b id="nHeight">—</b></div>      <div><small>Last block</small><b id="nAge">—</b></div>      <div><small>Fee from</small><b>0.00001</b></div>    </div>    <div class="section-h"><h3>Activity</h3><a data-act="tab" data-arg="s-activity">See all</a></div>    <div class="activity" id="activity"><div class="empty">No transactions yet.<br>Receive MBITE to get started.</div></div>  </section>  <!-- ======================= RECEIVE ======================= -->  <section id="s-receive" class="screen">    <div class="top"><button class="back" data-act="go" data-arg="s-home" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Receive</div><span></span></div>    <div class="recv">      <span class="chip"><span class="dot"></span>MBITE · MoonBite mainnet</span>      <div class="qr-wrap">        <span class="c tl"></span><span class="c tr"></span><span class="c bl"></span><span class="c br"></span>        <div class="qr-frame"><div id="qrFrame"></div><div class="qr-badge"><svg class="glyph"><use href="#g-mbite"/></svg></div></div>      </div>      <div class="addr" id="recvAddr"></div>    </div>    <div class="warn"><svg class="icon"><use href="#i-alert"/></svg><span>Only send MBITE on the MoonBite network to this address. Other coins sent here will be lost.</span></div>    <div class="spacer"></div>    <div class="row2 one" id="recvBtns" style="margin-top:16px">      <button class="btn btn-primary" data-act="copyAddr"><svg class="icon"><use href="#i-copy"/></svg>Copy address</button>      <button class="btn btn-ghost" data-ui="share" id="shareBtn" hidden><svg class="icon"><use href="#i-share"/></svg>Share</button>    </div>    <div style="height:10px"></div>  </section>  <!-- ======================= SEND ======================= -->  <section id="s-send" class="screen">    <div class="top"><button class="back" data-act="go" data-arg="s-home" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Send</div><span></span></div>    <label class="to-pill"><span class="lbl">To</span><input id="sendTo" placeholder="moon1…" spellcheck="false" autocomplete="off" autocapitalize="off"><button type="button" class="paste" data-ui="paste">Paste</button></label>    <div class="amount-stage" id="amtStage">      <input class="amt-input" id="sendAmt" inputmode="none" autocomplete="off" placeholder="0" aria-label="Amount">      <div class="amt-unit">MBITE</div>      <div class="avail"><span class="pill">Available <b class="num" id="sendAvail">0.00</b></span><a data-act="sendMax">Max</a></div>    </div>    <div class="npad" id="npad"></div>    <button class="btn btn-primary" id="sendNext" data-ui="openSheet" disabled>Review</button>    <div style="height:6px"></div>  </section>  <!-- ======================= ACTIVITY ======================= -->  <section id="s-activity" class="screen">    <h1 class="page-title">Activity</h1>    <div class="activity" id="activityFull"><div class="empty">No transactions yet.<br>Your sends and receives will appear here.</div></div>  </section>  <!-- ======================= SETTINGS ======================= -->  <section id="s-settings" class="screen">    <h1 class="page-title">Settings</h1>    <div class="set-group">      <div class="set-label">Your address</div>      <div class="set-card"><div class="set-row" data-act="copyAddr"><div class="set-addr" id="setAddr">—</div><svg class="icon set-ic"><use href="#i-copy"/></svg></div></div>    </div>    <div class="set-group">      <div class="set-label">Security</div>      <div class="set-card">        <div class="set-row bio-row" id="bioRow" data-act="bioToggle" hidden><span class="lead-ic"><svg class="icon set-lead"><use href="#i-touch"/></svg></span><span class="grow">Biometric unlock</span><span class="bio-state" id="bioState">Off</span></div>        <div class="set-row" data-act="changePinStart"><span class="lead-ic"><svg class="icon set-lead"><use href="#i-lock"/></svg></span><span class="grow">Change PIN</span><svg class="icon set-ic"><use href="#i-chev"/></svg></div>        <div class="set-row" data-act="revealStart"><span class="lead-ic"><svg class="icon set-lead"><use href="#i-key"/></svg></span><span class="grow">Reveal recovery phrase</span><svg class="icon set-ic"><use href="#i-chev"/></svg></div>        <div class="set-row" data-act="moveIntro"><span class="lead-ic"><svg class="icon set-lead"><use href="#i-key"/></svg></span><span class="grow">Move to a new phrase</span><svg class="icon set-ic"><use href="#i-chev"/></svg></div>        <div class="set-row static"><span class="lead-ic"><svg class="icon set-lead"><use href="#i-lock"/></svg></span><span class="grow">Extra password</span><span class="bio-state" id="passState">Off</span></div>      </div>    </div>    <div class="set-group">      <div class="set-label">Appearance</div>      <div class="seg" id="themeSeg">        <button class="seg-btn" data-act="setTheme" data-arg="dark">Dark</button>        <button class="seg-btn" data-act="setTheme" data-arg="light">Light</button>        <button class="seg-btn" data-act="setTheme" data-arg="system">System</button>      </div>    </div>    <div class="set-group">      <div class="set-label">Show amounts in</div>      <div class="seg" id="unitSeg">        <button class="seg-btn" data-act="setUnit" data-arg="mbite">MBITE</button>        <button class="seg-btn" data-act="setUnit" data-arg="units">Base units</button>      </div>    </div>    <div class="set-group">      <div class="set-label">Network</div>      <div class="set-card"><div class="set-row static"><span class="grow">MoonBite mainnet</span><span class="net-ok"><span class="dot"></span>Connected</span></div></div>    </div>    <div class="set-group">      <div class="set-card">        <div class="set-row danger" data-act="lockWallet"><span class="lead-ic"><svg class="icon set-lead"><use href="#i-lock"/></svg></span><span class="grow">Lock wallet</span></div>        <div class="set-row danger" data-act="signOutStart"><span class="lead-ic"><svg class="icon set-lead"><use href="#i-logout"/></svg></span><span class="grow">Sign out of this device</span><svg class="icon set-ic"><use href="#i-chev"/></svg></div>      </div>    </div>    <div class="set-foot">Self-custody · your keys never leave this device</div>  </section>  <!-- ======================= MOVE TO A NEW PHRASE ======================= -->  <section id="s-move" class="screen">    <div class="top"><button class="back" data-act="go" data-arg="s-settings" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">New phrase</div><span></span></div>    <h2 class="h-xl" style="margin-bottom:10px">Move to a new recovery phrase</h2>    <p class="muted" style="margin-bottom:14px;font-size:14.5px">If anyone may have seen your 12 words, do this now. The wallet makes a fresh phrase, then sends every coin from your old address to the new one in a single transaction (network fee <b class="num" id="moveFee">0.00001</b> MBITE).</p>    <div class="set-card" style="margin-bottom:12px"><div class="set-row static"><span class="grow">Ready to move</span><b class="num" id="moveSpend">—</b></div><div class="set-row static" id="moveMatRow" hidden><span class="grow">Still maturing</span><b class="num" id="moveMat">—</b></div></div>    <div class="warn" id="moveMatNote" hidden><svg class="icon"><use href="#i-alert"/></svg><span>Mining rewards younger than 100 blocks can’t move yet. The wallet keeps your old phrase, encrypted on this device, and offers to move them when they unlock.</span></div>    <div class="warn" id="moveBlocked" hidden><svg class="icon"><use href="#i-alert"/></svg><span>Coins from your previous phrase are still being moved. Finish that from the home screen first.</span></div>    <div class="warn"><svg class="icon"><use href="#i-alert"/></svg><span>After the move, your old address is no longer yours to rely on. Point your miner and anyone who pays you at the new address.</span></div>    <div class="spacer"></div>    <button class="btn btn-primary" id="moveStartBtn" data-act="moveStart">Continue</button>    <div style="height:10px"></div>  </section>  <section id="s-move-pin" class="screen center">    <div class="top"><button class="back" data-act="moveCancel" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Confirm it’s you</div><span></span></div>    <div class="spacer"></div>    <div class="lock-badge"><svg class="icon"><use href="#i-key"/></svg></div>    <h2 class="pin-h" id="movePinTitle">Enter your PIN</h2>    <p class="muted" style="font-size:14px" id="movePinHint">Your PIN will also protect the new phrase.</p>    <div class="pin-dots" id="movePinDots"></div>    <div class="err" id="movePinErr"></div>    <div class="spacer"></div>    <div class="pad" id="movePinPad"></div>    <div style="height:14px"></div>  </section>  <section id="s-move-new" class="screen">    <div class="top"><button class="back" data-act="moveCancel" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">New phrase</div><span></span></div>    <div class="steps" aria-hidden="true"><i class="on"></i><i></i><i></i></div>    <h2 class="h-xl" style="margin-bottom:10px">Your new recovery phrase</h2>    <p class="muted" style="margin-bottom:18px;font-size:14.5px">Write these 12 words on paper, in order. They replace your old phrase.</p>    <div class="seed-wrap veiled" id="moveWrap">      <div class="seed-grid" id="moveGrid"></div>      <div class="veil" data-act="moveReveal" role="button" tabindex="0">        <div class="vi"><svg class="icon"><use href="#i-eye"/></svg></div>        <b>Tap to reveal</b>        <span>Make sure no one can see your screen.</span>      </div>    </div>    <div class="ack off" id="moveAck" data-act="moveAckToggle" role="checkbox" aria-checked="false" tabindex="0"><span class="box"><svg class="icon"><use href="#i-check"/></svg></span>I’ve written down all 12 new words.</div>    <div class="spacer"></div>    <button class="btn btn-primary" id="moveToCheckBtn" data-act="moveToCheck" disabled>Continue</button>    <div style="height:10px"></div>  </section>  <section id="s-move-check" class="screen">    <div class="top"><button class="back" data-act="go" data-arg="s-move-new" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Check</div><span></span></div>    <div class="steps" aria-hidden="true"><i class="on"></i><i class="on"></i><i></i></div>    <h2 class="h-xl" style="margin-bottom:10px">Check your paper</h2>    <p class="muted" style="margin-bottom:18px;font-size:14.5px">Type these words from what you wrote down. Your old phrase stops being used once you continue.</p>    <div class="field"><label class="muted" for="mvW0" id="mvL0">Word</label><input class="input" id="mvW0" spellcheck="false" autocomplete="off" autocapitalize="off"></div>    <div class="field"><label class="muted" for="mvW1" id="mvL1">Word</label><input class="input" id="mvW1" spellcheck="false" autocomplete="off" autocapitalize="off"></div>    <div class="field"><label class="muted" for="mvW2" id="mvL2">Word</label><input class="input" id="mvW2" spellcheck="false" autocomplete="off" autocapitalize="off"></div>    <details class="adv" id="moveAdv"><summary>Add an extra password to the new phrase (optional)</summary>      <input class="input" id="mvPass" type="password" placeholder="Extra password" autocomplete="new-password" spellcheck="false" autocapitalize="off">      <input class="input" id="mvPass2" type="password" placeholder="Type it again" autocomplete="new-password" spellcheck="false" autocapitalize="off">      <div class="warn"><svg class="icon"><use href="#i-alert"/></svg><span>You will need the new 12 words AND this password to restore. Nobody can reset it. Capitals and spaces count.</span></div>    </details>    <div class="err" id="moveCheckErr"></div>    <div class="spacer"></div>    <button class="btn btn-primary" id="moveExecBtn" data-act="moveExecute">Move my coins</button>    <div style="height:10px"></div>  </section>  <section id="s-move-done" class="screen">    <div class="top"><span></span><div class="title">Done</div><span></span></div>    <div class="steps" aria-hidden="true"><i class="on"></i><i class="on"></i><i class="on"></i></div>    <h2 class="h-xl" style="margin-bottom:10px" id="moveDoneTitle">Your new phrase is active</h2>    <p class="muted" style="margin-bottom:14px;font-size:14.5px" id="moveDoneMsg"></p>    <div class="set-label">Your new address</div>    <div class="set-card" style="margin-bottom:12px"><div class="set-row" data-act="copyAddr"><div class="set-addr" id="moveNewAddr">—</div><svg class="icon set-ic"><use href="#i-copy"/></svg></div></div>    <div class="warn"><svg class="icon"><use href="#i-alert"/></svg><span>Mining? Restart your miner and paste this new address at its “Rewards go to” prompt. Biometric unlock was turned off; turn it back on in Settings if you use it.</span></div>    <div class="spacer"></div>    <button class="btn btn-primary" data-act="go" data-arg="s-home">Done</button>    <div style="height:10px"></div>  </section>  <!-- ======================= SIGN OUT ======================= -->  <section id="s-signout" class="screen">    <div class="top"><button class="back" data-act="go" data-arg="s-settings" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Sign out</div><span></span></div>    <h2 class="h-xl" style="margin-bottom:10px">Remove this wallet from this device</h2>    <p class="muted" style="margin-bottom:18px;font-size:14.5px">Your coins stay on the chain. Signing out only erases the encrypted wallet saved in this browser. To open it again, here or anywhere, you restore it with your 12-word recovery phrase.</p>    <div class="warn"><svg class="icon"><use href="#i-alert"/></svg><span>Without the 12 words, a signed-out wallet cannot be opened again by anyone, including MoonBite.</span></div>    <div class="ack" id="signOutAck" data-act="signOutAck" role="checkbox" aria-checked="false" tabindex="0"><span class="box"><svg class="icon"><use href="#i-check"/></svg></span>I have my 12-word recovery phrase written down.</div>    <div class="spacer"></div>    <button class="btn btn-primary" id="signOutBtn" data-act="signOutConfirm" disabled>Sign out</button>    <div style="height:10px"></div>  </section>  <section id="s-reveal-pin" class="screen center">    <div class="top"><button class="back" data-act="go" data-arg="s-settings" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Confirm it’s you</div><span></span></div>    <div class="spacer"></div>    <div class="lock-badge"><svg class="icon"><use href="#i-key"/></svg></div>    <h2 class="pin-h">Reveal recovery phrase</h2>    <p class="muted" style="font-size:14px">Enter your PIN to show your 12 words.</p>    <div class="pin-dots" id="revealDots"></div>    <div class="err" id="revealErr"></div>    <div class="spacer"></div>    <div class="pad" id="revealPad"></div>    <div style="height:14px"></div>  </section>  <section id="s-reveal" class="screen">    <div class="top"><button class="back" data-act="revealDone" aria-label="Done"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Recovery phrase</div><span></span></div>    <div class="warn" style="margin-bottom:16px"><svg class="icon"><use href="#i-alert"/></svg><span>Never share these words. Anyone who has them controls your coins.</span></div>    <div class="seed-grid" id="revealGrid"></div>    <div class="warn" id="revealPassNote" style="margin-top:14px" hidden><svg class="icon"><use href="#i-alert"/></svg><span>This wallet also uses your extra password. These 12 words alone open a different, empty wallet. Keep both.</span></div>    <div class="spacer"></div>    <button class="btn btn-ghost" data-act="revealCopy"><svg class="icon"><use href="#i-copy"/></svg>Copy phrase</button>    <button class="btn btn-text" data-act="revealDone">Done</button>  </section>  <section id="s-changepin-current" class="screen center">    <div class="top"><button class="back" data-act="go" data-arg="s-settings" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Change PIN</div><span></span></div>    <div class="spacer"></div>    <div class="lock-badge"><svg class="icon"><use href="#i-lock"/></svg></div>    <h2 class="pin-h">Enter current PIN</h2>    <p class="muted" style="font-size:14px">Confirm it’s you before choosing a new one.</p>    <div class="pin-dots" id="cpCurDots"></div>    <div class="err" id="cpCurErr"></div>    <div class="spacer"></div>    <div class="pad" id="cpCurPad"></div>    <div style="height:14px"></div>  </section>  <section id="s-changepin-new" class="screen center">    <div class="top"><button class="back" data-act="go" data-arg="s-settings" aria-label="Back"><svg class="icon"><use href="#i-back"/></svg></button><div class="title">Change PIN</div><span></span></div>    <div class="spacer"></div>    <div class="lock-badge"><svg class="icon"><use href="#i-lock"/></svg></div>    <h2 class="pin-h" id="cpNewTitle">Choose a new PIN</h2>    <p class="muted" style="font-size:14px" id="cpNewHint">6 digits.</p>    <div class="pin-dots" id="cpNewDots"></div>    <div class="err" id="cpNewErr"></div>    <div class="spacer"></div>    <div class="pad" id="cpNewPad"></div>    <div style="height:14px"></div>  </section>  <nav class="tabbar" id="tabbar" hidden>    <button class="tab" data-act="tab" data-arg="s-home"><svg class="icon"><use href="#i-home"/></svg><span>Wallet</span></button>    <button class="tab" data-act="tab" data-arg="s-activity"><svg class="icon"><use href="#i-activity"/></svg><span>Activity</span></button>    <button class="tab" data-act="tab" data-arg="s-settings"><svg class="icon"><use href="#i-gear"/></svg><span>Settings</span></button>  </nav></div><!-- send review: nothing is broadcast until Confirm --><div class="scrim" data-ui="closeSheet"></div><div class="sheet" role="dialog" aria-modal="true" aria-labelledby="sheetTitle">  <div class="grab"></div>  <div class="sheet-head">    <div class="muted" id="sheetTitle" style="font-size:14px">You’re sending</div>    <div class="big" id="sheetAmt">0<small>MBITE</small></div>  </div>  <div class="review" id="sendReview" style="display:none">    <div class="row"><span class="k">To</span><span class="v mono" id="rvTo">—</span></div>    <div class="row"><span class="k">Amount</span><span class="v" id="rvAmt">0 MBITE</span></div>    <div class="row"><span class="k">Network fee</span><span class="v" id="rvFee">0.00001 MBITE</span></div>    <div class="row total"><span class="k">Total</span><span class="v" id="rvTot">0 MBITE</span></div>  </div>  <div class="err" id="sendErr" style="text-align:center"></div>  <p class="fine">Transactions on MoonBite can’t be reversed. Check the address.</p>  <button class="btn btn-primary" id="sendBtn" data-act="doSend" disabled>Confirm and send</button>  <button class="btn btn-text" style="width:100%" data-ui="closeSheet">Cancel</button></div><!-- receipt, shown after a successful broadcast --><div class="receipt" id="receipt" role="dialog" aria-modal="true" aria-labelledby="rcTitle">  <div class="in">    <svg class="done-ring" viewBox="0 0 112 112" aria-hidden="true"><circle cx="56" cy="56" r="48"/><path d="M36 57l13 13 27-28"/></svg>    <div class="eyebrow" id="rcTitle">Sent</div>    <div class="amtbig" id="rcAmt">0<small>MBITE</small></div>    <div class="status-pill"><span class="dot"></span>Broadcast · waiting for a block (about 2 min)</div>    <div class="review">      <div class="row"><span class="k">To</span><span class="v mono" id="rcTo">—</span></div>      <div class="row"><span class="k">Network fee</span><span class="v" id="rcFee">—</span></div>      <div class="row"><span class="k">Transaction</span><span class="v"><button class="txid mono" data-ui="copyTx" aria-label="Copy transaction ID"><span id="rcTx">—</span><svg class="icon"><use href="#i-copy"/></svg></button></span></div>    </div>    <div class="spacer"></div>    <button class="btn btn-dark" data-ui="closeReceipt" style="margin-top:24px">Done</button>  </div></div><div class="toast" id="toast" role="status" aria-live="polite"><svg class="icon"><use href="#i-check"/></svg><span id="toastMsg">Copied</span></div><script type="module" src="/static/wallet-flagship.js?v=20261017a"></script><script type="module" src="/static/wallet-flagship-ui.js?v=20261015b"></script></body></html>