:root{--ink:#0b1220;--muted:#6b7793;--line:#e9edf6;--accent:#4f46e5;--accent-2:#7c3aed;--accent-3:#06b6d4;--ok:#10b981;--ok-2:#059669;--danger:#e11d48;--card:#ffffffd1;--radius:30px;--shadow:0 40px 90px -38px #312e818c}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-color:#f5f7fc;background-image:radial-gradient(1100px 760px at 8% -10%,#e7ecff,#0000 58%),radial-gradient(900px 760px at 112% -4%,#f3e9ff,#0000 54%),radial-gradient(1000px 860px at 50% 118%,#e2fbff,#0000 60%),none;background-position:0 0,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,repeat;background-size:auto,auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,sans-serif}button{font:inherit;cursor:pointer}.screen{justify-content:center;align-items:center;min-height:100svh;padding:22px;display:flex}.panel{border-radius:var(--radius);background:var(--card);width:100%;max-width:452px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px)saturate(150%);text-align:center;border:1px solid #ffffffe6;padding:36px 26px 24px;animation:.55s cubic-bezier(.2,.8,.2,1) both rise}.title{letter-spacing:-.025em;margin:4px 0 8px;font-size:25px;font-weight:750}.sub{max-width:340px;color:var(--muted);margin:0 auto;font-size:15px;line-height:1.55}.orb{place-items:center;width:140px;height:140px;margin:8px auto 26px;display:grid;position:relative}.orb .ring{border:1.5px solid #4f46e566;border-radius:50%;animation:2.4s ease-out infinite ring;position:absolute;inset:0}.orb .ring:nth-child(2){animation-delay:.8s}.orb .ring:nth-child(3){animation-delay:1.6s}.tile{color:#fff;background:linear-gradient(140deg, var(--accent), var(--accent-2));border-radius:24px;place-items:center;width:78px;height:78px;animation:3s ease-in-out infinite float;display:grid;position:relative;box-shadow:0 22px 46px -14px #4f46e5b3}.tile svg{width:38px;height:38px}.bar{background:#e9edf6;border-radius:999px;height:6px;margin:26px auto 4px;position:relative;overflow:hidden}.bar:after{content:"";border-radius:inherit;background:linear-gradient(90deg, var(--accent), var(--accent-3));width:38%;animation:1.25s ease-in-out infinite slide;position:absolute;inset:0}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;align-items:baseline;gap:8px;margin:20px auto 0;padding:9px 16px;display:inline-flex;box-shadow:0 10px 24px -18px #0f172a80}.chip span{color:var(--muted);font-size:13px;font-weight:600}.chip strong{letter-spacing:-.01em;font-variant-numeric:tabular-nums;font-size:16px;font-weight:760}.bankLogo{border:1px solid var(--line);border-radius:22px;place-items:center;display:inline-grid;overflow:hidden;box-shadow:0 12px 30px -16px #0f172a73}.bankLogo img{object-fit:contain}.bankLogo--lg{border:0;border-radius:24px;animation:3s ease-in-out infinite float;box-shadow:0 22px 46px -14px #0f172a66}.bankMono{letter-spacing:-.02em;font-size:22px;font-weight:800}.logoWrap{justify-content:center;margin:4px auto 18px;display:flex}.badge{color:#fff;border-radius:26px;place-items:center;width:76px;height:76px;margin:6px auto 22px;display:grid}.badge svg{width:36px;height:36px}.badge.info{background:linear-gradient(140deg, var(--accent), var(--accent-2));box-shadow:0 22px 46px -16px #4f46e5b3}.badge.warn{background:linear-gradient(140deg, #fb7185, var(--danger));box-shadow:0 22px 46px -16px #e11d4899}.amountCard{background:linear-gradient(140deg,#eef1ff,#f7edff);border:1px solid #e9e3ff;border-radius:22px;margin:24px 0 18px;padding:20px}.amountLabel{color:var(--muted);letter-spacing:.02em;text-transform:uppercase;font-size:13px;font-weight:650}.amount{letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-top:6px;font-size:42px;font-weight:800;line-height:1}.reqList{text-align:left;gap:12px;margin-top:4px;display:grid}.reqRow{border:1px solid var(--line);background:#fff;border-radius:18px;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.reqText{gap:3px;min-width:0;display:grid}.reqText span{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:12px;font-weight:650}.reqText strong{letter-spacing:-.01em;overflow-wrap:anywhere;font-size:17px;font-weight:720}.copyBtn{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));border:0;border-radius:14px;flex:none;align-items:center;gap:7px;padding:11px 15px;font-size:14px;font-weight:700;transition:transform .12s,filter .12s,background .2s;display:inline-flex;box-shadow:0 12px 26px -12px #4f46e5d9}.copyBtn svg{width:16px;height:16px}.copyBtn:hover{filter:brightness(1.05)}.copyBtn:active{transform:scale(.95)}.copyBtn[data-copied=true]{background:linear-gradient(135deg, var(--ok), var(--ok-2))}.primary{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));border:0;border-radius:18px;width:100%;margin-top:22px;padding:16px;font-size:16px;font-weight:740;transition:transform .12s,filter .12s;box-shadow:0 20px 40px -16px #4f46e5e6}.primary:hover{filter:brightness(1.04)}.primary:active{transform:scale(.985)}.trust{color:var(--muted);align-items:center;gap:7px;margin-top:22px;font-size:12.5px;font-weight:600;display:inline-flex}.trust svg{width:14px;height:14px}.panel.wide{text-align:left;max-width:880px}.invoiceGrid{grid-template-columns:1.1fr .9fr;align-items:stretch;gap:28px;display:grid}.invoiceMain{flex-direction:column;display:flex}.bankHead{align-items:center;gap:14px;margin-bottom:6px;display:flex}.bankHeadText{gap:2px;display:grid}.bankHeadText span{color:var(--muted);font-size:13px;font-weight:600}.bankHeadText strong{letter-spacing:-.02em;font-size:22px;font-weight:760}.invoice .amountCard{text-align:left}.invoice .trust{margin-top:auto;padding-top:22px}.qrCard{text-align:center;border:1px solid var(--line);background:linear-gradient(160deg,#fff,#f3f6ff);border-radius:24px;flex-direction:column;justify-content:center;align-items:center;padding:26px 20px;display:flex}.qrFrame{border:1px solid var(--line);background:#fff;border-radius:20px;place-items:center;padding:16px;display:grid;box-shadow:0 24px 50px -28px #0f172a80}.qrSkeleton{background:linear-gradient(110deg,#eef1f7 30%,#f7f9fc 50%,#eef1f7 70%) 0 0/200% 100%;border-radius:12px;width:216px;height:216px;animation:1.3s linear infinite shimmer}.qrTitle{letter-spacing:-.02em;margin:18px 0 6px;font-size:19px;font-weight:740}.qrSub{max-width:260px;color:var(--muted);margin:0;font-size:14px;line-height:1.5}@media (max-width:720px){.invoiceGrid{grid-template-columns:1fr;gap:22px}}@keyframes rise{0%{opacity:0;transform:translateY(14px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ring{0%{opacity:.85;transform:scale(.5)}to{opacity:0;transform:scale(1.55)}}@keyframes float{0%,to{transform:translateY(-4px)}50%{transform:translateY(5px)}}@keyframes slide{0%{transform:translate(-130%)}to{transform:translate(330%)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width:420px){.panel{padding:30px 18px 20px}.amount{font-size:38px}}@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important}.bar:after{width:100%;animation:none}}