*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
:root, [data-theme="dark"]{
  --bg:#0b1220;
  --surface:#0f1a2e;
  --surface-2:#132340;
  --line:rgba(255,255,255,.08);
  --text:#eaf0ff;
  --muted:#8ea0c2;
  --brand:#10b981;
  --brand-2:#059669;
  --accent:#f59e0b;
  --danger:#ef4444;
  --card-bg-a:rgba(255,255,255,.04);
  --card-bg-b:rgba(255,255,255,.02);
  --input-bg:rgba(0,0,0,.25);
  --chip-bg:rgba(255,255,255,.05);
  --ghost-bg:rgba(255,255,255,.06);
  --ghost-bg-hover:rgba(255,255,255,.1);
  --grid-line:rgba(255,255,255,.03);
  --bg-grad:radial-gradient(1000px 600px at 10% -10%,rgba(16,185,129,.18),transparent 60%),
    radial-gradient(900px 600px at 110% 10%,rgba(59,130,246,.14),transparent 60%),
    linear-gradient(180deg,#0a1120 0%,#0b1220 100%);
  --qr-dark:#0b1220;
  --radius:16px;
  --shadow:0 20px 60px -20px rgba(0,0,0,.6),0 8px 24px -12px rgba(0,0,0,.5);
}
[data-theme="light"]{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f0f3f9;
  --line:rgba(15,23,42,.09);
  --text:#0f172a;
  --muted:#5b6b85;
  --brand:#059669;
  --brand-2:#047857;
  --card-bg-a:rgba(255,255,255,.9);
  --card-bg-b:rgba(255,255,255,.7);
  --input-bg:rgba(15,23,42,.04);
  --chip-bg:rgba(15,23,42,.04);
  --ghost-bg:rgba(15,23,42,.05);
  --ghost-bg-hover:rgba(15,23,42,.09);
  --grid-line:rgba(15,23,42,.05);
  --bg-grad:radial-gradient(1000px 600px at 10% -10%,rgba(16,185,129,.18),transparent 60%),
    radial-gradient(900px 600px at 110% 10%,rgba(59,130,246,.12),transparent 60%),
    linear-gradient(180deg,#eef2f9 0%,#f5f7fb 100%);
  --qr-dark:#0f172a;
  --shadow:0 20px 60px -20px rgba(15,23,42,.15),0 8px 24px -12px rgba(15,23,42,.1);
}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .3s ease,color .3s ease;
}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg-grad);transition:background .4s ease}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:float 14s ease-in-out infinite}
.b1{width:340px;height:340px;background:#10b981;top:-80px;left:-80px}
.b2{width:380px;height:380px;background:#3b82f6;bottom:-120px;right:-120px;animation-delay:-6s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}}
.grid-overlay{position:absolute;inset:0;background-image:
  linear-gradient(var(--grid-line) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:32px 32px;mask-image:radial-gradient(circle at 50% 30%,#000 40%,transparent 75%);}

.shell{max-width:520px;margin:0 auto;padding: clamp(12px, 3.8vw, 20px) clamp(12px, 3.8vw, 22px) calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap: clamp(10px, 2.8vw, 16px)}

.brandbar{display:flex;align-items:center;gap: clamp(10px, 2.8vw, 14px);padding: clamp(6px, 2vw, 10px) 4px 6px}
.logo{width: clamp(34px, 10vw, 42px);height: clamp(34px, 10vw, 42px);border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;color:#fff;box-shadow:0 8px 24px -8px rgba(16,185,129,.5);flex:0 0 auto}
.brand-text{flex:1;min-width:0}
.brand-title{font-weight:700;letter-spacing:-.01em;font-size: clamp(15px, 4.2vw, 17px)}
.brand-sub{font-size:12px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size: clamp(10px, 2.8vw, 12px);font-weight:600;color:var(--brand);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);padding: clamp(5px, 1.8vw, 7px) clamp(8px, 2.6vw, 12px);border-radius:999px;flex:0 0 auto;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

.card{
  background:linear-gradient(180deg,var(--card-bg-a),var(--card-bg-b));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding: clamp(12px, 3.6vw, 18px);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
  width:100%;
}
.theme-toggle{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ghost-bg);border:1px solid var(--line);color:var(--text);cursor:pointer;transition:transform .3s ease,background .2s ease;position:relative;overflow:hidden}
.theme-toggle:hover{background:var(--ghost-bg-hover)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{position:absolute;transition:transform .5s cubic-bezier(.5,0,.2,1.4),opacity .3s ease}
[data-theme="dark"] .theme-toggle .ic-sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="dark"] .theme-toggle .ic-moon{opacity:0;transform:rotate(-90deg) scale(.4)}
[data-theme="light"] .theme-toggle .ic-sun{opacity:0;transform:rotate(90deg) scale(.4)}
[data-theme="light"] .theme-toggle .ic-moon{opacity:1;transform:rotate(0) scale(1)}

.pay-to{display:flex;align-items:center;gap: clamp(10px, 3vw, 16px);transition: border-color .25s ease, background .25s ease, box-shadow .25s ease}
.pay-to.is-success{
  animation: successIn .6s cubic-bezier(.2,.8,.2,1) both;
  border-color: color-mix(in oklab, var(--brand) 55%, transparent);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand) 12%, var(--card-bg-a)),
    color-mix(in oklab, var(--brand) 6%, var(--card-bg-b)));
  box-shadow: 0 20px 50px -18px color-mix(in oklab, var(--brand) 30%, transparent), var(--shadow);
}
@keyframes successIn{
  0%{ opacity:.65; transform: translateY(-10px) scale(.985); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .pay-to.is-success{ animation: none !important; transform: none !important; }
}
[data-motion="reduced"] .pay-to.is-success{ animation: none !important; transform: none !important; }
.avatar{width: clamp(44px, 13vw, 56px);height: clamp(44px, 13vw, 56px);border-radius:14px;background:linear-gradient(135deg,#10b981,#0ea5e9);display:grid;place-items:center;font-weight:800;font-size: clamp(18px, 5.5vw, 24px);color:#fff;box-shadow:0 10px 30px -10px rgba(14,165,233,.5);position:relative;overflow:hidden;flex:0 0 auto}
.avatar::after{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0 60%,rgba(255,255,255,.25) 70%,transparent 80%);animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pay-info{flex:1;min-width:0}
.pay-label{font-size: clamp(11px, 3.2vw, 13px);color:var(--muted);letter-spacing:.02em}
.pay-name{font-size: clamp(17px, 5.2vw, 22px);font-weight:700;letter-spacing:-.01em;margin-top:2px}

.row{display:flex;align-items:center;gap:12px}
.col.grow{flex:1;min-width:0;overflow:hidden}
.field-label{font-size:12px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.upi-value{font-size: clamp(14px, 4vw, 17px);font-weight:600;margin-top:4px;word-break:break-all}

.ghost-btn{display:inline-flex;align-items:center;gap:6px;background:var(--ghost-bg);border:1px solid var(--line);color:var(--text);padding: clamp(7px, 2.4vw, 10px) clamp(10px, 3vw, 14px);border-radius:10px;font-weight:600;font-size: clamp(12px, 3.4vw, 14px);cursor:pointer;transition:transform .15s ease,background .2s ease;flex:0 0 auto}
.ghost-btn:hover{background:var(--ghost-bg-hover)}
.ghost-btn:active{transform:scale(.96)}

.amount-input-wrap{margin-top:8px;display:flex;align-items:center;gap:8px;background:var(--input-bg);border:1px solid var(--line);border-radius:12px;padding: clamp(10px, 3.2vw, 14px) clamp(12px, 3.6vw, 16px);transition:border-color .2s ease,box-shadow .2s ease,background .3s ease}
.amount-input-wrap:focus-within{border-color:color-mix(in oklab,var(--brand) 60%,transparent);box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 15%,transparent)}
.rupee{font-size: clamp(18px, 5vw, 22px);font-weight:700;color:var(--muted)}
#amount{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font-size: clamp(22px, 7vw, 28px);font-weight:700;font-family:inherit;letter-spacing:-.02em}
#amount::-webkit-outer-spin-button,#amount::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#amount{-moz-appearance:textfield}

.chips{display:flex;flex-wrap:wrap;gap: clamp(6px, 2vw, 10px);margin-top:12px}
.chip{background:var(--chip-bg);border:1px solid var(--line);color:var(--text);padding: clamp(7px, 2.2vw, 9px) clamp(11px, 3.4vw, 16px);border-radius:999px;font-weight:600;font-size: clamp(12px, 3.4vw, 14px);cursor:pointer;transition:all .2s ease;white-space:nowrap}
.chip:hover{background:color-mix(in oklab,var(--brand) 12%,transparent);border-color:color-mix(in oklab,var(--brand) 40%,transparent)}
.chip.active{background:linear-gradient(135deg,color-mix(in oklab,var(--brand) 25%,transparent),color-mix(in oklab,var(--brand) 10%,transparent));border-color:color-mix(in oklab,var(--brand) 60%,transparent);color:var(--brand)}

.cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  color:#fff;border:0;padding:16px 20px;border-radius:14px;
  font-weight:700;font-size:16px;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 14px 40px -12px rgba(16,185,129,.55);
  position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease
}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s ease}
.cta:hover::before{transform:translateX(100%)}
.cta:active{transform:scale(.98)}
.cta.loading{pointer-events:none;opacity:.75}

.qr-card{display:flex;flex-direction:column;gap: clamp(10px, 3vw, 16px);align-items:stretch;width:100%}
.qr-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.qr-amt{font-size: clamp(18px, 5.5vw, 24px);font-weight:800;margin-top:2px;letter-spacing:-.01em}
.qr-frame{position:relative;align-self:center;padding: clamp(12px, 4vw, 18px);background:#fff;border-radius:16px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);animation:pop .5s cubic-bezier(.2,.9,.3,1.2);max-width:100%}
@keyframes pop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
.qr-corner{position:absolute;width: clamp(16px, 5vw, 22px);height: clamp(16px, 5vw, 22px);border: clamp(2px, .7vw, 3px) solid var(--brand)}
.qr-corner.tl{top:-2px;left:-2px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.qr-corner.tr{top:-2px;right:-2px;border-left:0;border-bottom:0;border-top-right-radius:8px}
.qr-corner.bl{bottom:-2px;left:-2px;border-right:0;border-top:0;border-bottom-left-radius:8px}
.qr-corner.br{bottom:-2px;right:-2px;border-left:0;border-top:0;border-bottom-right-radius:8px}
#qrCanvas{display:block;width: min(64vw, 260px);height:auto;max-width:100%}
.upi-link{align-self:center;color:var(--brand);text-decoration:none;font-weight:600;font-size:14px;padding:8px 14px;border-radius:10px;border:1px solid rgba(16,185,129,.35);background:rgba(16,185,129,.08)}
.upi-link:hover{background:rgba(16,185,129,.15)}

.foot{padding:8px 4px 0;color:var(--muted);font-size:12px;text-align:center;line-height:1.5}

.reveal{opacity:0;transform:translateY(12px);animation:rise .55s cubic-bezier(.2,.8,.2,1) forwards}
.delay-1{animation-delay:.06s}
.delay-2{animation-delay:.12s}
.delay-3{animation-delay:.18s}
.delay-4{animation-delay:.06s}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px) scale(.95);background:var(--surface);color:var(--text);border:1px solid var(--line);padding:10px 16px;border-radius:12px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.4);box-shadow:var(--shadow);z-index:50;display:inline-flex;align-items:center;gap:8px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast.success{border-color:var(--accent);box-shadow:0 10px 30px -10px color-mix(in oklab, var(--accent) 40%, transparent), var(--shadow)}
.toast .toast-ic{width:16px;height:16px;color:var(--accent);flex:none}
.toast.show .toast-ic{animation:toastPop .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes toastPop{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
[data-motion="reduced"] .toast{transition:opacity .2s ease}
[data-motion="reduced"] .toast.show .toast-ic{animation:none}

.copy-details-btn .ic-check{display:none;color:var(--accent)}
.copy-details-btn.copied .ic-copy{display:none}
.copy-details-btn.copied .ic-check{display:inline-block;animation:toastPop .45s cubic-bezier(.2,.9,.3,1.4)}
.copy-details-btn.copied{border-color:var(--accent);color:var(--accent)}

@media (max-width:380px){.brand-sub{display:none}}

/* ==== QR continuous animations (subtle) ==== */
.qr-card{--qr-speed:1;--qr-play:running}
.qr-frame{animation:pop .5s cubic-bezier(.2,.9,.3,1.2),qrGlow calc(4s / var(--qr-speed)) ease-in-out infinite .5s;animation-play-state:running,var(--qr-play)}
.qr-corner{animation:cornerPulse calc(3s / var(--qr-speed)) ease-in-out infinite;animation-play-state:var(--qr-play);transform-origin:center}
.qr-corner.tr{animation-delay:calc(-.75s / var(--qr-speed))}
.qr-corner.br{animation-delay:calc(-1.5s / var(--qr-speed))}
.qr-corner.bl{animation-delay:calc(-2.25s / var(--qr-speed))}
#qrCanvas{animation:qrFloat calc(5s / var(--qr-speed)) ease-in-out infinite;animation-play-state:var(--qr-play)}
.qr-card.anim-off .qr-frame,
.qr-card.anim-off .qr-corner,
.qr-card.anim-off #qrCanvas{animation:none}
.qr-card.anim-off .qr-frame{animation:pop .5s cubic-bezier(.2,.9,.3,1.2)}

@keyframes qrGlow{
  0%,100%{box-shadow:0 20px 50px -20px rgba(0,0,0,.5),0 0 0 0 rgba(16,185,129,.0)}
  50%{box-shadow:0 22px 54px -18px rgba(0,0,0,.52),0 0 0 4px rgba(16,185,129,.08)}
}
@keyframes cornerPulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
  50%{transform:scale(1.06);filter:drop-shadow(0 0 3px rgba(16,185,129,.35))}
}
@keyframes qrFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.5px)}
}

/* ==== Animation control panel ==== */
.anim-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:var(--surface-2,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.08))}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{position:relative;width:38px;height:22px;border-radius:999px;background:rgba(120,120,140,.35);transition:background .25s}
.switch .thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.4,.2,.2,1.2)}
.switch input:checked + .track{background:var(--brand,#10b981)}
.switch input:checked + .track .thumb{transform:translateX(16px)}
.switch-label{font-size:13px;font-weight:600;opacity:.85}
.speed{display:flex;align-items:center;gap:10px;flex:1;min-width:180px;justify-content:flex-end}
.speed input[type=range]{-webkit-appearance:none;appearance:none;flex:1;max-width:160px;height:4px;border-radius:999px;background:linear-gradient(to right,var(--brand,#10b981) 0,var(--brand,#10b981) var(--pct,30%),rgba(120,120,140,.3) var(--pct,30%),rgba(120,120,140,.3) 100%);outline:none}
.speed input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--brand,#10b981);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .15s}
.speed input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.speed input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--brand,#10b981);cursor:pointer}
.speed-val{font-size:12px;font-variant-numeric:tabular-nums;opacity:.75;min-width:44px;text-align:right}

/* ==== UPI deep link buttons ==== */
.pay-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:stretch;padding: clamp(12px, 4vw, 16px) clamp(14px, 4.2vw, 20px);border-radius:14px;text-decoration:none;font-weight:700;font-size: clamp(14px, 4vw, 16px);color:#fff;background:linear-gradient(135deg,var(--brand,#10b981),#0891b2);box-shadow:0 12px 28px -12px rgba(16,185,129,.7),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s ease,box-shadow .25s ease,filter .2s ease;position:relative;overflow:hidden;min-height:48px}
.pay-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);transform:translateX(-120%);transition:transform .8s ease}
.pay-cta:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 18px 36px -14px rgba(16,185,129,.85)}
.pay-cta:hover::before{transform:translateX(120%)}
.pay-cta:active{transform:translateY(0) scale(.99)}
.app-picks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:420px){.app-picks{grid-template-columns:repeat(2,1fr)}}
.app-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border-radius:10px;border:1px solid var(--line,rgba(255,255,255,.1));background:var(--surface-2,rgba(255,255,255,.04));color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;transition:transform .15s,background .2s,border-color .2s}
.app-chip:hover{transform:translateY(-1px);background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.4)}
.app-chip:active{transform:translateY(0) scale(.97)}
.app-chip .dotc{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

/* ==== Advanced fields & presets ==== */
.advanced-card{padding:0;overflow:hidden}
.advanced-card details{width:100%}
.advanced-card summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:14px;user-select:none}
.advanced-card summary::-webkit-details-marker{display:none}
.advanced-card summary .chev{transition:transform .25s ease;opacity:.7}
.advanced-card details[open] summary .chev{transform:rotate(180deg)}
.adv-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px;animation:advIn .3s ease-out}
@keyframes advIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:420px){.grid2{grid-template-columns:1fr}}
.adv-body input[type=text]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line,rgba(255,255,255,.1));background:var(--surface-2,rgba(255,255,255,.04));color:var(--text);font:inherit;font-size:14px;outline:none;transition:border-color .2s,background .2s}
.adv-body input[type=text]:focus{border-color:var(--brand,#10b981);background:rgba(16,185,129,.06)}
.preset-bar{display:flex;gap:8px;align-items:stretch}
.preset-bar input{flex:1}
.preset-bar .ghost-btn{white-space:nowrap}
.preset-list{display:flex;flex-wrap:wrap;gap:8px;min-height:2px}
.preset-list:empty::before{content:"No presets yet";display:block;font-size:12px;color:var(--muted,#888);opacity:.7;padding:4px 2px}
.preset-item{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:999px;background:var(--surface-2,rgba(255,255,255,.05));border:1px solid var(--line,rgba(255,255,255,.1));font-size:12.5px;font-weight:600;animation:pop .25s cubic-bezier(.2,.9,.3,1.2)}
.preset-item .load{background:none;border:0;color:var(--text);font:inherit;cursor:pointer;padding:0;font-weight:600}
.preset-item .load:hover{color:var(--brand,#10b981)}
.preset-item .del{width:22px;height:22px;border-radius:50%;border:0;background:rgba(239,68,68,.15);color:#ef4444;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,transform .15s}
.preset-item .del:hover{background:rgba(239,68,68,.3);transform:scale(1.1)}
.preset-item .amt{opacity:.65;font-weight:500;margin-left:2px}

/* ==== Download button group ==== */
.dl-group{display:inline-flex;gap:6px}
.dl-group .dl-btn{padding:6px 10px}

/* ==== UPI string live preview ==== */
.uri-preview-card{padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border)}
.uri-preview-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.uri-preview-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.uri-copy{padding:6px 10px;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.uri-preview{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;color:var(--text);background:var(--surface-3,rgba(0,0,0,.18));border:1px dashed var(--border);border-radius:10px;padding:10px 12px;word-break:break-all;white-space:pre-wrap;max-height:96px;overflow:auto;transition:background .35s ease,border-color .35s ease}
.uri-preview.flash{animation:uriFlash .5s ease}
@keyframes uriFlash{0%{background:color-mix(in oklab,var(--accent) 22%,transparent);border-color:var(--accent)}100%{}}
[data-theme="light"] .uri-preview{background:rgba(0,0,0,.04)}

/* ==== Motion & accessibility card ==== */
:root{--motion-scale:1;--motion-duration-scale:1}
/* Motion presets — scale duration + intensity by viewport */
:root[data-motion-preset="compact"] .qr-corner,
:root[data-motion-preset="compact"] .blob{animation-duration:calc(var(--anim-dur,6s) * 1.6) !important;opacity:.55}
:root[data-motion-preset="standard"] .qr-corner,
:root[data-motion-preset="standard"] .blob{animation-duration:calc(var(--anim-dur,6s) * 1.2) !important}
:root[data-motion-preset="compact"] .reveal{animation-duration:.35s}
:root[data-motion-preset="expressive"] .reveal{animation-duration:.6s}
:root[data-motion-preset="compact"] .pay-to.is-success,
:root[data-motion-preset="compact"] .qr-card{animation-duration:.35s !important}
.motion-card{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.motion-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.motion-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.motion-body{overflow:hidden;transition:max-height .35s ease,opacity .25s ease;max-height:60px;opacity:1}
.motion-body[hidden]{display:block !important;max-height:0;opacity:0;pointer-events:none}
.range-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.range-row input[type="range"]{width:100%;accent-color:var(--brand,#10b981)}
.range-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text);min-width:44px;text-align:right}

/* Apply motion scaling to key animations */
.reveal{transform:translateY(calc(12px * var(--motion-scale)))}

/* Reduced motion mode: strip non-essential animation, keep essential fades */
:root[data-motion="reduced"] .reveal{animation:reveal-fade .35s ease-out forwards;transform:none}
@keyframes reveal-fade{from{opacity:0}to{opacity:1}}
:root[data-motion="reduced"] .blob,
:root[data-motion="reduced"] .badge .dot,
:root[data-motion="reduced"] .avatar::after,
:root[data-motion="reduced"] #qrCanvas,
:root[data-motion="reduced"] .qr-corner{animation:none !important}
:root[data-motion="reduced"] .qr-frame{animation:pop .3s ease-out !important}
:root[data-motion="reduced"] .cta::before,
:root[data-motion="reduced"] .pay-cta::before{animation:none !important}
:root[data-motion="reduced"] .uri-preview.flash{animation:none}
:root[data-motion="reduced"] *{scroll-behavior:auto !important}

/* Respect OS-level preference by default when user hasn't chosen */
@media (prefers-reduced-motion: reduce){
  :root:not([data-motion="full"]) .blob{animation:none}
}

/* ==== Amount preset chips (extended) ==== */
.chips{flex-wrap:wrap}
.chip-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip-op{background:transparent;border:1px dashed var(--border);color:var(--muted);font-weight:600}
.chip-op:hover{color:var(--text);border-color:var(--accent);background:color-mix(in oklab,var(--accent) 10%,transparent)}
.chip-op.danger{border-style:solid;border-color:color-mix(in oklab,#ef4444 40%,var(--border));color:#ef4444}
.chip-op.danger:hover{background:color-mix(in oklab,#ef4444 12%,transparent);color:#fca5a5}
.chip-op.bump{animation:chipBump .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes chipBump{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
:root[data-motion="reduced"] .chip-op.bump{animation:none}

/* Amount validation */
.amount-help{font-size:12px;color:var(--muted);margin-top:8px;opacity:.85}
.amount-error{font-size:13px;color:#ff6b6b;margin-top:6px;min-height:18px;font-weight:600;transition:opacity .2s}
.amount-error:empty{opacity:0}
#amount.invalid{border-color:#ff6b6b !important;box-shadow:0 0 0 3px rgba(255,107,107,.18) !important}
.cta[disabled],.cta[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:grayscale(.3);pointer-events:none}
@keyframes shakeX{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.shake{animation:shakeX .45s cubic-bezier(.36,.07,.19,.97) both}

/* Custom amount quick-apply */
.custom-amt{margin-top:14px;padding-top:14px;border-top:1px dashed color-mix(in oklab, var(--border) 80%, transparent)}
.custom-amt-label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.custom-amt-row{display:flex;align-items:center;gap:8px;background:var(--input-bg,rgba(255,255,255,.04));border:1px solid var(--border);border-radius:12px;padding:6px 10px;transition:border-color .2s, box-shadow .2s}
.custom-amt-row:focus-within{border-color:var(--brand,#10b981);box-shadow:0 0 0 3px color-mix(in oklab, var(--brand,#10b981) 25%, transparent)}
.rupee-sm{color:var(--muted);font-weight:700}
#customAmount{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font-size:16px;font-weight:600;padding:8px 0}
#customAmount::-webkit-outer-spin-button,#customAmount::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.apply-btn{background:linear-gradient(135deg,var(--brand,#10b981),var(--brand-2,#059669));color:#fff;border:0;border-radius:10px;padding:8px 16px;font-weight:700;font-size:14px;cursor:pointer;transition:transform .15s, box-shadow .2s;white-space:nowrap}
.apply-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in oklab, var(--brand,#10b981) 45%, transparent)}
.apply-btn:active{transform:translateY(0)}
.apply-btn.pulse{animation:applyPulse .5s ease}
@keyframes applyPulse{0%{transform:scale(1)}40%{transform:scale(.94)}100%{transform:scale(1)}}

/* QR generation transition: skeleton + progress + crossfade */
.qr-frame{overflow:hidden}
.qr-frame #qrCanvas{transition:opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1.2);opacity:1;transform:scale(1)}
.qr-frame.is-loading #qrCanvas{opacity:0;transform:scale(.94)}
.qr-frame .qr-skeleton{position:absolute;inset:16px;border-radius:10px;background:linear-gradient(135deg,#eef2f7,#dbe2ec);opacity:0;pointer-events:none;transition:opacity .35s ease;overflow:hidden}
.qr-frame.is-loading .qr-skeleton{opacity:1}
.qr-skeleton .sk-cell{position:absolute;width:34%;height:34%;border:6px solid #cbd5e1;border-radius:6px;background:#fff}
.qr-skeleton .sk-cell.tl{top:6%;left:6%}
.qr-skeleton .sk-cell.tr{top:6%;right:6%}
.qr-skeleton .sk-cell.bl{bottom:6%;left:6%}
.qr-skeleton .sk-shimmer{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.9) 48%,transparent 66%);transform:translateX(-100%);animation:skShimmer 1.1s ease-in-out infinite}
@keyframes skShimmer{to{transform:translateX(100%)}}
.qr-loading-text{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(12px,3.4vw,14px);font-weight:700;color:#64748b;letter-spacing:.02em;opacity:.85;animation:qrLoadingPulse 1.6s ease-in-out infinite}
@keyframes qrLoadingPulse{0%,100%{opacity:.55}50%{opacity:.9}}

.qr-progress{height:3px;width:100%;max-width:260px;margin:10px auto 0;background:color-mix(in oklab, var(--border) 80%, transparent);border-radius:999px;overflow:hidden;opacity:0;transition:opacity .25s ease}
.qr-frame.is-loading + .qr-progress,
.qr-card.is-generating .qr-progress{opacity:1}
.qr-progress-bar{height:100%;width:30%;background:linear-gradient(90deg, var(--brand,#10b981), var(--brand-2,#059669));border-radius:999px;transform:translateX(-100%);animation:qrProg 1.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes qrProg{
  0%{transform:translateX(-100%);width:30%}
  50%{width:55%}
  100%{transform:translateX(360%);width:30%}
}

/* Reduce motion: shorter crossfade, no shimmer, static progress */
:root[data-motion="reduced"] .qr-skeleton .sk-shimmer,
:root[data-motion="reduced"] .qr-loading-text,
:root[data-motion="reduced"] .qr-progress-bar{animation:none}
:root[data-motion="reduced"] .qr-loading-text{opacity:.75}
:root[data-motion="reduced"] .qr-progress-bar{width:100%;transform:none;opacity:.7}
:root[data-motion="reduced"] .qr-frame #qrCanvas{transition:opacity .18s linear;transform:none !important}
:root[data-motion="reduced"] .qr-frame.is-loading #qrCanvas{transform:none}
@media (prefers-reduced-motion: reduce){
  .qr-skeleton .sk-shimmer,.qr-loading-text,.qr-progress-bar{animation:none}
  .qr-loading-text{opacity:.75}
  .qr-progress-bar{width:100%;transform:none;opacity:.7}
  .qr-frame #qrCanvas{transition:opacity .18s linear;transform:none !important}
}

/* ========== Theme controls ========== */
[data-accent="emerald"]{--brand:#10b981;--brand-2:#059669}
[data-accent="blue"]   {--brand:#3b82f6;--brand-2:#2563eb}
[data-accent="violet"] {--brand:#8b5cf6;--brand-2:#6d28d9}
[data-accent="rose"]   {--brand:#f43f5e;--brand-2:#e11d48}
[data-accent="amber"]  {--brand:#f59e0b;--brand-2:#d97706}
[data-accent="cyan"]   {--brand:#06b6d4;--brand-2:#0891b2}

/* Card style variants */
[data-card="solid"][data-theme="dark"]{--card-bg-a:rgba(20,28,45,.96);--card-bg-b:rgba(16,22,38,.96)}
[data-card="solid"][data-theme="light"]{--card-bg-a:#ffffff;--card-bg-b:#ffffff}
[data-card="outline"] .card{background:transparent!important;backdrop-filter:none!important}
[data-card="outline"] .card{border-color:color-mix(in oklab,var(--brand) 35%,var(--line))}
[data-card="glass"] .card{backdrop-filter:blur(14px) saturate(140%)}

.theme-card{display:flex;flex-direction:column;gap:12px}
.theme-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.theme-title{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.theme-mode{display:inline-flex;gap:6px;background:var(--ghost-bg);border:1px solid var(--line);padding:4px;border-radius:12px}
.mode-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--text);padding:6px 10px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease,transform .15s ease}
.mode-btn:hover{transform:translateY(-1px)}
[data-theme="dark"] .mode-btn[data-mode="dark"],
[data-theme="light"] .mode-btn[data-mode="light"]{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 6px 16px -8px color-mix(in oklab,var(--brand) 60%,transparent)}

.theme-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.theme-sub{font-size:12px;font-weight:600;color:var(--muted)}

.accent-swatches{display:inline-flex;flex-wrap:wrap;gap:8px}
.swatch{position:relative;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--sw,var(--brand));cursor:pointer;padding:0;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}
.swatch:hover{transform:scale(1.1)}
[data-accent="emerald"] .swatch[data-accent="emerald"],
[data-accent="blue"]    .swatch[data-accent="blue"],
[data-accent="violet"]  .swatch[data-accent="violet"],
[data-accent="rose"]    .swatch[data-accent="rose"],
[data-accent="amber"]   .swatch[data-accent="amber"],
[data-accent="cyan"]    .swatch[data-accent="cyan"],
[data-accent="custom"]  .swatch-custom{border-color:#fff;box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 55%,transparent),0 6px 14px -6px color-mix(in oklab,var(--brand) 50%,transparent);transform:scale(1.05)}
.swatch-custom{display:inline-grid;place-items:center;background:conic-gradient(from 0deg,#ef4444,#f59e0b,#10b981,#06b6d4,#3b82f6,#8b5cf6,#ef4444);overflow:hidden}
.swatch-custom input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;border:0;padding:0}
.swatch-plus{color:#fff;font-weight:800;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.4);pointer-events:none}

.card-style{display:inline-flex;gap:6px;background:var(--ghost-bg);border:1px solid var(--line);padding:4px;border-radius:12px}
.style-btn{background:transparent;border:0;color:var(--text);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease,transform .15s ease}
.style-btn:hover{transform:translateY(-1px)}
[data-card="glass"] .style-btn[data-card="glass"],
[data-card="solid"] .style-btn[data-card="solid"],
[data-card="outline"] .style-btn[data-card="outline"]{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}

/* Smooth transitions on theme swap */
.card,.mode-btn,.style-btn,.swatch,.chip,.pay-cta,.ghost-btn,.amount-input-wrap{transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease,transform .15s ease}

/* Inline field validation */
.field-help{font-size:12px;color:var(--muted);margin-top:6px;opacity:.85}
.field-error{font-size:12.5px;color:#ff6b6b;margin-top:4px;min-height:16px;font-weight:600;transition:opacity .2s}
.field-error:empty{opacity:0}
.adv-body input.invalid{border-color:#ff6b6b !important;box-shadow:0 0 0 3px rgba(255,107,107,.15) !important}
.adv-body input.valid{border-color:color-mix(in oklab,var(--brand) 55%,var(--line)) !important}

/* ==== Animation level (Normal / Low) ==== */
.seg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);padding:2px 0}
.seg{display:inline-flex;background:color-mix(in oklab,var(--surface) 70%,transparent);border:1px solid var(--line);border-radius:999px;padding:3px;position:relative}
.seg-btn{background:transparent;color:var(--muted);border:0;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;letter-spacing:.02em;transition:color .25s ease,background .25s ease,transform .25s ease}
.seg-btn:hover{color:var(--text)}
.seg-btn[aria-selected="true"]{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 4px 14px -6px color-mix(in oklab,var(--brand) 60%,transparent)}
[data-motion="reduced"] .seg-btn{transition:none}

/* Low level: keep interactions crisp, quiet the ambient motion */
:root[data-anim-level="low"] .blob{animation:none;opacity:.35}
:root[data-anim-level="low"] .qr-frame{animation:pop .45s cubic-bezier(.2,.9,.3,1.2) !important}
:root[data-anim-level="low"] .qr-corner{animation:none !important}
:root[data-anim-level="low"] #qrCanvas{animation:none !important}
:root[data-anim-level="low"] .cta::before,
:root[data-anim-level="low"] .pay-cta::before{animation:none !important;opacity:0 !important}
:root[data-anim-level="low"] .qr-skeleton .sk-shimmer{animation-duration:calc(2.4s / var(--qr-speed,1))}
:root[data-anim-level="low"] .uri-preview.flash{animation-duration:.3s}
:root[data-anim-level="low"] .reveal{animation-duration:.35s}
:root[data-anim-level="low"] .badge .dot{animation:none}
:root[data-anim-level="low"] .avatar::after{animation:none}

/* ==== Smooth theme transition ==== */
:root{--theme-ease:cubic-bezier(.65,.05,.36,1)}
html:not(.theme-transitioning) body,
html:not(.theme-transitioning) .card,
html:not(.theme-transitioning) .cta,
html:not(.theme-transitioning) .pay-cta,
html:not(.theme-transitioning) .ghost-btn,
html:not(.theme-transitioning) input,
html:not(.theme-transitioning) textarea,
html:not(.theme-transitioning) select,
html:not(.theme-transitioning) .chip,
html:not(.theme-transitioning) .app-chip,
html:not(.theme-transitioning) .seg,
html:not(.theme-transitioning) .uri-preview{
  transition:background-color .45s var(--theme-ease),color .45s var(--theme-ease),border-color .45s var(--theme-ease),box-shadow .45s var(--theme-ease)}

.theme-toggle.spin svg{animation:themeSpin .55s cubic-bezier(.5,0,.2,1.4)}
@keyframes themeSpin{0%{transform:rotate(-40deg) scale(.7)}60%{transform:rotate(15deg) scale(1.15)}100%{transform:rotate(0) scale(1)}}

/* Native View Transitions: circular clip reveal from the toggle */
@supports (view-transition-name: root){
  ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
  ::view-transition-old(root){z-index:1}
  ::view-transition-new(root){z-index:2;
    animation:themeClipReveal .55s cubic-bezier(.65,.05,.36,1) both}
}
@keyframes themeClipReveal{
  from{clip-path:circle(0 at var(--tt-x,50%) var(--tt-y,50%))}
  to{clip-path:circle(150% at var(--tt-x,50%) var(--tt-y,50%))}
}

/* Fallback overlay for browsers without View Transitions */
.theme-fade{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:0;background:radial-gradient(circle at var(--tt-x,50%) var(--tt-y,50%),color-mix(in oklab,var(--brand) 22%,transparent),transparent 60%)}
.theme-fade.run{animation:themeFadeSweep .55s ease-out}
@keyframes themeFadeSweep{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

[data-motion="reduced"] .theme-toggle.spin svg,
[data-motion="reduced"] .theme-fade.run{animation:none}
[data-motion="reduced"] html:not(.theme-transitioning) *{transition:none !important}

/* ==== PNG download progress ==== */
.dl-png{position:relative;overflow:hidden}
.dl-png .ic-check{position:absolute;left:10px;top:50%;transform:translateY(-50%) scale(.4);opacity:0;color:#10b981;transition:opacity .25s ease,transform .25s cubic-bezier(.5,0,.2,1.6)}
.dl-png.is-done .ic-check{opacity:1;transform:translateY(-50%) scale(1)}
.dl-png.is-done .ic-dl{opacity:0}
.dl-png .ic-dl{transition:opacity .25s ease,transform .3s ease}
.dl-png.is-busy .ic-dl{animation:dlBounce var(--dl-dur,750ms) cubic-bezier(.4,0,.6,1)}
@keyframes dlBounce{0%{transform:translateY(-3px)}50%{transform:translateY(2px)}100%{transform:translateY(-3px)}}
.dl-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;overflow:hidden;pointer-events:none}
.dl-progress-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:2px;box-shadow:0 0 8px color-mix(in oklab,var(--brand) 60%,transparent)}
.dl-png.is-busy .dl-progress-fill{animation:dlFill var(--dl-dur,750ms) cubic-bezier(.65,.05,.36,1) forwards}
.dl-png.is-done .dl-progress-fill{width:100%;opacity:0;transition:opacity .5s ease .1s}
@keyframes dlFill{0%{width:0}70%{width:82%}100%{width:100%}}
.dl-png.is-busy{pointer-events:none}

[data-motion="reduced"] .dl-png .ic-dl,
[data-motion="reduced"] .dl-png.is-busy .ic-dl{animation:none}
[data-motion="reduced"] .dl-png.is-busy .dl-progress-fill{animation-timing-function:linear}
[data-anim-level="low"] .dl-progress-fill{box-shadow:none}

/* ==== Very low motion global override ==== */
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.12s !important;
  scroll-behavior:auto !important;
}
[data-motion="reduced"] .blob,
[data-motion="reduced"] .grid-overlay,
[data-motion="reduced"] .qr-corner,
[data-motion="reduced"] .pay-cta::before,
[data-motion="reduced"] .cta::before,
[data-motion="reduced"] .sk-shimmer{animation:none !important}
[data-motion="reduced"] .reveal{opacity:1 !important;transform:none !important}
[data-motion="reduced"] .qr-card.pop{animation:none !important;transform:none !important}
[data-motion="reduced"] .theme-toggle svg{transition:opacity .15s ease, transform .15s ease}
[data-motion="reduced"] .dl-png.is-busy .dl-progress-fill{animation-duration:.2s !important;animation-timing-function:linear !important}
[data-motion="reduced"] .dl-png.is-busy .ic-dl{animation:none !important}

/* ==== Force outline card style everywhere ==== */
[data-card="outline"] .card{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1.5px solid var(--line) !important;
  box-shadow:none !important;
}
[data-card="outline"] .card::before{display:none !important}
[data-card="outline"] .qr-frame{background:#fff !important}

/* ==== Bigger primary CTA (fluid on small screens) ==== */
.cta{
  padding: clamp(14px, 5vw, 22px) clamp(16px, 5vw, 26px) !important;
  font-size: clamp(15px, 4.6vw, 18px) !important;
  font-weight:800 !important;
  min-height: clamp(52px, 15vw, 64px) !important;
  border-radius: clamp(14px, 4vw, 18px) !important;
  letter-spacing:.01em;
  width:100%;
}
.cta svg{width: clamp(18px, 5vw, 22px) !important;height: clamp(18px, 5vw, 22px) !important;flex:0 0 auto}

/* ==== Ensure QR keeps animating regardless of motion prefs ==== */
.qr-corner{animation:qrCornerPulse 2.2s ease-in-out infinite !important}
#qrCanvas{animation:qrFloat 4s ease-in-out infinite !important}
.qr-frame{animation:qrGlow 3.2s ease-in-out infinite !important}
@keyframes qrCornerPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes qrFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes qrGlow{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.0),0 10px 30px -10px rgba(0,0,0,.25)}50%{box-shadow:0 0 24px 2px rgba(16,185,129,.25),0 10px 30px -10px rgba(0,0,0,.3)}}

/* ==== Very smooth UI: quiet ambient motion, smooth transitions ==== */
.blob{animation:none !important;opacity:.22 !important}
.badge .dot{animation:none !important;box-shadow:none !important}
*{transition-timing-function:cubic-bezier(.2,.7,.2,1)}
button, a, input, .card, .chip{transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease, opacity .25s ease}
.chip:hover, .ghost-btn:hover{transform:translateY(-1px)}
.cta:hover{transform:translateY(-2px)}
.cta:active{transform:translateY(0)}
html{scroll-behavior:smooth}

/* ==== Mobile & small-screen spacing optimizations ==== */
@media (max-width: 420px){
  .brandbar{padding-left:0;padding-right:0}
  .brand-sub{display:none}
  .row{gap:10px}
  .chips{justify-content:space-between}
  .chip{flex:1 1 calc(25% - 6px);text-align:center;padding-left:0;padding-right:0}
}

@media (max-width: 360px){
  :root{--radius:14px}
  .shell{gap:10px;padding:10px 10px calc(20px + env(safe-area-inset-bottom))}
  .brandbar{gap:8px}
  .badge{padding:4px 8px}
  .badge .dot{width:5px;height:5px}
  .pay-to{gap:10px}
  .avatar{border-radius:12px}
  .amount-input-wrap{gap:6px}
  .chips{gap:6px}
  .chip{flex:1 1 calc(33.333% - 5px);font-size:11px;padding:7px 4px}
  .cta{gap:8px}
  .qr-frame{padding:10px}
  .qr-corner{width:14px;height:14px;border-width:2px}
  .foot{font-size:11px}
}

@media (max-width: 320px){
  .shell{padding:8px 8px calc(18px + env(safe-area-inset-bottom))}
  .brand-title{font-size:14px}
  .pay-name{font-size:15px}
  .upi-value{font-size:13px}
  #amount{font-size:20px}
  .chip{flex:1 1 calc(33.333% - 4px);font-size:10px;padding:6px 2px}
  .cta{font-size:14px;padding:12px 14px !important;min-height:48px !important}
  .pay-cta{font-size:13px;padding:10px 12px}
}

/* Prevent horizontal overflow / layout shift on all widths */
body{overflow-x:hidden}
.shell,.card,.qr-card{max-width:100%}
#qrCanvas{max-width:100%;height:auto}

/* Ensure interactive elements remain tappable and readable */
button, a, input, .chip{touch-action:manipulation}
input, button, .chip{font-family:inherit}

/* Respect safe-area for notched devices in landscape */
@supports (padding: max(0px)){
  .shell{padding-left: max(12px, env(safe-area-inset-left));padding-right: max(12px, env(safe-area-inset-right))}
}

/* Pay-apps grid + QR generation reveal (kept smooth even under reduced motion) */
.pay-apps-label{margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.65;text-align:center}
.pay-apps{margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:380px){.pay-apps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Ensure the loading skeleton + progress animate even when the site is locked to reduced motion */
.qr-frame.is-loading .qr-skeleton{opacity:1 !important}
.qr-frame.is-loading .sk-shimmer{animation:skShimmer 1.1s ease-in-out infinite !important;opacity:1 !important}
.qr-card.is-generating .qr-progress .qr-progress-bar{animation:qrProg 1.2s ease-in-out infinite !important;opacity:1 !important}
.qr-card.is-generating .qr-progress{opacity:1 !important}

/* Fresh QR pop-in when it renders */
@keyframes qrIn{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
#qrCanvas.qr-in{animation:qrIn .45s cubic-bezier(.2,.7,.2,1) both}

/* Generate button busy state */
.cta.is-busy{opacity:.85;pointer-events:none}
.cta.is-busy span::after{content:'…'}

@keyframes qrProg{0%{transform:translateX(-100%)}50%{transform:translateX(20%)}100%{transform:translateX(100%)}}
.qr-progress{position:relative;height:3px;margin-top:10px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;opacity:0;transition:opacity .25s}
.qr-progress-bar{position:absolute;inset:0;width:60%;background:linear-gradient(90deg,transparent,var(--brand,#10b981),transparent);transform:translateX(-100%)}

/* --- QR contrast + scan reliability guarantees --- */
.qr-frame{
  background:#ffffff !important;      /* always opaque white */
  padding: clamp(18px, 5vw, 24px) !important; /* generous quiet zone around modules */
  overflow:visible !important;        /* never clip corner markers */
  isolation:isolate;                  /* keep glow/box-shadow off canvas pixels */
}
.qr-frame #qrCanvas{
  background:#ffffff;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter:none !important;             /* prevent any inherited blur/glow */
  mix-blend-mode: normal !important;
  position:relative;
  z-index:1;
}
/* Corner markers sit fully outside the quiet zone so they can't overlap modules */
.qr-corner{pointer-events:none;z-index:2}
/* Keep glow strictly as outer box-shadow — never inset, never on the canvas */
@keyframes qrGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0),0 12px 32px -12px rgba(0,0,0,.28)}
  50%   {box-shadow:0 0 22px 2px rgba(16,185,129,.22),0 12px 32px -12px rgba(0,0,0,.3)}
}

/* --- Idle pause for QR animations (smooth resume) --- */
.qr-card .qr-frame,
.qr-card .qr-corner,
.qr-card #qrCanvas{
  transition: box-shadow .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.qr-card.qr-idle .qr-frame,
.qr-card.qr-idle .qr-corner,
.qr-card.qr-idle #qrCanvas{
  animation-play-state: paused !important;
}

/* ==== Full prefers-reduced-motion support (overrides all forced animations) ==== */
@media (prefers-reduced-motion: reduce){
  /* Kill decorative loops */
  .qr-corner,
  #qrCanvas,
  .qr-frame,
  .blob,
  .badge .dot,
  .reveal,
  .pop{
    animation: none !important;
  }
  /* Keep frame readable with a static, gentle shadow instead of the pulsing glow */
  .qr-frame{
    box-shadow: 0 10px 28px -14px rgba(0,0,0,.28) !important;
    transform: none !important;
  }
  /* Corners visible but not pulsing */
  .qr-corner{ opacity:.9 !important; transform:none !important; }
  /* Ultra-short, functional transitions only */
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
    scroll-behavior: auto !important;
  }
  /* Skip generation shimmer/progress motion — just crossfade */
  .qr-frame.is-loading .sk-shimmer{ animation: none !important; opacity:.5 !important; }
  .qr-progress .qr-progress-bar{ animation: none !important; }
  /* Skip hover lifts */
  .chip:hover, .ghost-btn:hover, .cta:hover{ transform: none !important; }
  /* No entrance pop on QR */
  #qrCanvas.qr-in{ animation: none !important; }
}

/* --- Save QR button --- */
.save-qr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding: clamp(12px, 3.5vw, 14px) 16px;
  font-weight:600;font-size: clamp(14px, 3.8vw, 15px);
  border-radius:14px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.save-qr-btn:hover{ transform: translateY(-1px); }
.save-qr-btn.is-saved{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.55);
  color: var(--brand, #10b981);
  animation: saveTick .5s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes saveTick{
  0%{ transform: scale(1) }
  40%{ transform: scale(1.03) }
  100%{ transform: scale(1) }
}
@media (prefers-reduced-motion: reduce){
  .save-qr-btn:hover{ transform:none !important; }
  .save-qr-btn.is-saved{ animation:none !important; }
}

/* ==== GPU/CPU optimizations for QR animations ==== */
.qr-frame{
  contain: layout paint style;
  will-change: box-shadow, transform;
  transform: translateZ(0);              /* promote to its own layer */
  backface-visibility: hidden;
}
#qrCanvas{
  contain: strict;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.qr-corner{
  contain: layout paint style;
  will-change: transform, opacity;
  transform: translateZ(0);
}
/* Auto-pause when the QR is scrolled out of view (JS-controlled) */
.qr-card.qr-offscreen .qr-frame,
.qr-card.qr-offscreen .qr-corner,
.qr-card.qr-offscreen #qrCanvas{
  animation-play-state: paused !important;
}
/* Drop the heaviest bits on small phones */
@media (max-width: 480px){
  .qr-frame{
    /* box-shadow is expensive on low-end GPUs — use a lighter static shadow
       and let the CSS variable-driven glow animation still ride on top */
    box-shadow: 0 8px 22px -14px rgba(0,0,0,.28);
  }
  #qrCanvas{ animation-duration: 6s !important; }   /* slower = fewer paints */
  .qr-corner{ animation-duration: 4s !important; }
}
/* If the device advertises coarse pointer + low resolution, calm it further */
@media (hover: none) and (pointer: coarse) and (max-width: 380px){
  .qr-frame{ animation-duration: 5s !important; }
}

/* ==== Accessibility: focus-visible + skip link ==== */
.skip-link{
  position:fixed; top:-100px; left:12px; z-index:9999;
  background:var(--fg, #0b1220); color:var(--bg, #fff);
  padding:10px 14px; border-radius:10px; font-weight:700;
  text-decoration:none; box-shadow:0 8px 22px -8px rgba(0,0,0,.4);
  transition: top .18s ease;
}
.skip-link:focus{ top:12px; outline:2px solid currentColor; outline-offset:2px; }

:focus{ outline:none; } /* rely on :focus-visible for keyboard only */
:focus-visible{
  outline:2px solid var(--accent, #10b981);
  outline-offset:3px;
  border-radius:10px;
}
.cta:focus-visible,
.ghost-btn:focus-visible,
.pay-cta:focus-visible,
.chip:focus-visible,
.app-chip:focus-visible,
#copyBtn:focus-visible,
#saveQrBtn:focus-visible{
  outline:2px solid var(--accent, #10b981);
  outline-offset:3px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent, #10b981) 22%, transparent);
}
.chip[aria-pressed="true"]{
  border-color: var(--accent, #10b981);
  color: var(--accent, #10b981);
}
/* Larger tap targets for keyboard + touch */
.chip, .app-chip, .ghost-btn{ min-height:44px; }
.cta{ min-height:52px; }
/* Honour forced-colors (Windows high-contrast) */
@media (forced-colors: active){
  .cta, .ghost-btn, .pay-cta, .chip, .app-chip{
    border:1px solid CanvasText;
  }
  :focus-visible{ outline:2px solid Highlight; }
}

/* ==== Stable QR loading state — no layout shift / flicker ==== */
/* Reserve a fixed square footprint on the frame so the canvas can appear,
   resize, or crossfade without pushing surrounding cards around. */
.qr-frame{
  width: min(64vw, 260px);
  aspect-ratio: 1 / 1;
  box-sizing: content-box;                /* padding sits outside the square */
  display: grid;                          /* single-cell grid = perfect overlap */
  place-items: stretch;
  contain: layout paint style size;       /* isolate from surrounding layout */
}
.qr-frame > .qr-skeleton,
.qr-frame > #qrCanvas{
  grid-area: 1 / 1;                       /* stack skeleton + canvas exactly */
  width: 100%;
  height: 100%;
}
.qr-frame > #qrCanvas{
  max-width: 100%;
  aspect-ratio: 1 / 1;
}
/* Skeleton fully covers the square, no inset gap that would reveal a flash */
.qr-frame .qr-skeleton{ inset: 0; border-radius: 12px; }

/* Progress bar reserves its 3px row up front (opacity toggles only) */
.qr-progress{
  height: 3px !important;
  min-height: 3px;
  margin-top: 10px;
  visibility: visible;                    /* keep in flow, animate opacity only */
}

/* Prevent the pop-in from causing a size flicker: animate transform/opacity, not size */
.qr-frame{ transform-origin: center; }
@keyframes qrPopStable{
  from{ opacity: 0; transform: scale(.96); }
  to  { opacity: 1; transform: scale(1); }
}
.qr-card:not([hidden]) .qr-frame{
  animation: qrPopStable .35s cubic-bezier(.2,.9,.3,1.2) both,
             qrGlow calc(4s / var(--qr-speed, 1)) ease-in-out infinite .35s;
}

/* While loading, keep the canvas mounted so the frame keeps its size */
.qr-frame.is-loading > #qrCanvas{ opacity: 0; }
.qr-frame:not(.is-loading) > .qr-skeleton{ opacity: 0; }

/* Reduced motion: instant swap, still no shift */
:root[data-motion="reduced"] .qr-card:not([hidden]) .qr-frame{
  animation: none;
}
@media (prefers-reduced-motion: reduce){
  .qr-card:not([hidden]) .qr-frame{ animation: none; }
}

/* Small phones: keep the same square logic, just smaller */
@media (max-width: 380px){
  .qr-frame{ width: min(72vw, 240px); }
}

/* ==== Full prefers-reduced-motion support (final override) ==== */
@media (prefers-reduced-motion: reduce){
  /* Kill the forced QR loops that use !important elsewhere */
  #qrCanvas,
  .qr-frame,
  .qr-corner,
  .qr-card:not([hidden]) .qr-frame{
    animation: none !important;
    transition: opacity .12s linear, transform .12s linear !important;
    transform: none !important;
  }
  /* Replace the pulsing glow with a static, readable shadow */
  .qr-frame{
    box-shadow: 0 10px 26px -14px rgba(0,0,0,.35) !important;
  }
  /* Skeleton stays visible but stops shimmering; progress bar stays as a
     static indicator instead of a moving stripe */
  .qr-skeleton .sk-shimmer{ animation: none !important; opacity: .35 !important; }
  .qr-progress-bar{
    animation: none !important;
    transform: none !important;
    width: 100% !important;
    opacity: .7 !important;
  }
  /* Neutralize decorative background + card reveal animations too */
  .bg .blob,
  .grid-overlay,
  .reveal,
  .badge,
  .badge .dot,
  .chip.bump,
  .toast{
    animation: none !important;
    transition: opacity .12s linear !important;
  }
  /* Hover lifts flattened so nothing bounces on tap */
  .cta:hover, .ghost-btn:hover, .chip:hover, .app-chip:hover, .pay-cta:hover{
    transform: none !important;
  }
  /* Keep functional focus ring instant */
  :focus-visible{ transition: none !important; }
}

/* Also honour our data-motion="reduced" attribute the same way, so users
   who toggle it via JS/localStorage get an identical experience */
:root[data-motion="reduced"] #qrCanvas,
:root[data-motion="reduced"] .qr-frame,
:root[data-motion="reduced"] .qr-corner{
  animation: none !important;
  transform: none !important;
}
:root[data-motion="reduced"] .qr-frame{
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.35) !important;
}
:root[data-motion="reduced"] .qr-progress-bar{
  animation: none !important; transform: none !important; width: 100% !important; opacity: .7 !important;
}

/* ==== QR size presets + auto scaling ==== */
:root{
  /* Base target size — overridden by size chip. Auto-clamps to viewport. */
  --qr-target: 260px;
  --qr-min: 180px;
  --qr-vw: 64vw;
}
:root[data-qr-size="s"]  { --qr-target: 200px; --qr-vw: 52vw; }
:root[data-qr-size="m"]  { --qr-target: 260px; --qr-vw: 64vw; }
:root[data-qr-size="l"]  { --qr-target: 320px; --qr-vw: 74vw; }
:root[data-qr-size="xl"] { --qr-target: 380px; --qr-vw: 84vw; }

/* Fluid final size: never overflow viewport, never smaller than min */
.qr-frame{
  width: clamp(var(--qr-min), var(--qr-vw), var(--qr-target)) !important;
}

/* Size selector chips */
.qr-sizes{
  display: flex; gap: 6px; margin: 10px auto 4px;
  padding: 4px; border-radius: 999px;
  background: color-mix(in oklab, currentColor 6%, transparent);
  border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
  width: fit-content;
}
.size-chip{
  min-width: 40px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; border: 0; background: transparent;
  color: inherit; font: 600 13px/1 inherit; cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.size-chip:hover{ background: color-mix(in oklab, currentColor 8%, transparent); }
.size-chip.is-active{
  background: var(--brand, #10b981);
  color: #fff;
}
.size-chip:focus-visible{
  outline: 2px solid var(--brand, #10b981);
  outline-offset: 2px;
}
@media (max-width: 380px){
  .size-chip{ min-width: 36px; padding: 0 9px; font-size: 12px; }
}

/* ==== Validity indicator ==== */
.validity{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 4px auto 12px; width: fit-content; max-width: 100%;
  border-radius: 999px; font: 500 13px/1.2 inherit;
  border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
  background: color-mix(in oklab, currentColor 5%, transparent);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.validity .v-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .85;
  box-shadow: 0 0 0 0 currentColor;
}
.validity[data-state="idle"]    { color: color-mix(in oklab, currentColor 60%, transparent); }
.validity[data-state="invalid"] { color: #ef4444; border-color: color-mix(in oklab, #ef4444 40%, transparent); background: color-mix(in oklab, #ef4444 10%, transparent); }
.validity[data-state="warn"]    { color: #f59e0b; border-color: color-mix(in oklab, #f59e0b 40%, transparent); background: color-mix(in oklab, #f59e0b 10%, transparent); }
.validity[data-state="valid"]   { color: #10b981; border-color: color-mix(in oklab, #10b981 40%, transparent); background: color-mix(in oklab, #10b981 10%, transparent); }
.validity[data-state="valid"] .v-dot{ animation: vPulse 1.6s ease-in-out infinite; }
@keyframes vPulse{
  0%,100%{ box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 50%, transparent); }
  50%   { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce){
  .validity[data-state="valid"] .v-dot{ animation: none !important; }
}

/* ==== Theme + accent controls ==== */
:root[data-accent="emerald"]{ --brand:#10b981; --brand-2:#059669; }
:root[data-accent="blue"]   { --brand:#3b82f6; --brand-2:#2563eb; }
:root[data-accent="violet"] { --brand:#8b5cf6; --brand-2:#7c3aed; }
:root[data-accent="rose"]   { --brand:#f43f5e; --brand-2:#e11d48; }
:root[data-accent="amber"]  { --brand:#f59e0b; --brand-2:#d97706; }
:root[data-accent="cyan"]   { --brand:#06b6d4; --brand-2:#0891b2; }

.theme-controls{ position: relative; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tc-btn{
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center;
  background: color-mix(in oklab, currentColor 6%, transparent);
  border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
  color: inherit; padding: 0;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.tc-btn:hover{ background: color-mix(in oklab, currentColor 10%, transparent); }
.tc-btn:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }
.tc-btn .tc-ic-sun,.tc-btn .tc-ic-moon{ transition: opacity .2s ease, transform .3s ease; grid-area: 1/1; }
:root[data-theme="dark"]  #themeToggleBtn .tc-ic-sun { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="dark"]  #themeToggleBtn .tc-ic-moon{ opacity: 0; transform: rotate(-90deg) scale(.4); }
:root[data-theme="light"] #themeToggleBtn .tc-ic-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
:root[data-theme="light"] #themeToggleBtn .tc-ic-moon{ opacity: 1; transform: rotate(0) scale(1); }
#themeToggleBtn{ position: relative; }
#themeToggleBtn > svg{ position: absolute; inset: 0; margin: auto; }

.tc-swatch .sw-dot{
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: inset 0 0 0 2px color-mix(in oklab, #fff 25%, transparent);
}
.accent-menu{
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 10px; border-radius: 14px;
  background: color-mix(in oklab, var(--bg, #0b0b0f) 92%, transparent);
  border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.4);
  animation: acPop .18s ease-out;
}
:root[data-theme="light"] .accent-menu{ background: color-mix(in oklab, #ffffff 94%, transparent); }
@keyframes acPop{ from{ opacity:0; transform: translateY(-4px) scale(.96); } to{ opacity:1; transform:none; } }
.accent-menu[hidden]{ display: none; }
.ac-opt{
  width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--ac); border: 2px solid color-mix(in oklab, currentColor 20%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ac-opt:hover{ transform: scale(1.08); }
.ac-opt.is-active{ box-shadow: 0 0 0 2px var(--bg, #0b0b0f), 0 0 0 4px var(--ac); }
:root[data-theme="light"] .ac-opt.is-active{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ac); }
.ac-opt:focus-visible{ outline: 2px solid var(--ac); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  .accent-menu{ animation: none !important; }
  .ac-opt:hover, .tc-btn:hover{ transform: none !important; }
}

/* QR safety: never let accent bleed into the QR pixels or its white quiet-zone.
   Corners inherit accent (decorative only, outside scan area) which is fine. */
.qr-frame{ background: #fff !important; }

/* ==== Floating dark-mode FAB (top-right) ==== */
.dark-fab{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 50;
  width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  color: inherit; padding: 0;
  background: color-mix(in oklab, var(--bg, #0b0b0f) 70%, transparent);
  border: 1px solid color-mix(in oklab, currentColor 18%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.4);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
:root[data-theme="light"] .dark-fab{
  background: color-mix(in oklab, #ffffff 80%, transparent);
}
.dark-fab:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--brand) 50%, transparent); }
.dark-fab:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }
.dark-fab > svg{ grid-area: 1/1; transition: opacity .25s ease, transform .35s ease; }
:root[data-theme="dark"]  .dark-fab .fab-sun { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="dark"]  .dark-fab .fab-moon{ opacity: 0; transform: rotate(-90deg) scale(.4); }
:root[data-theme="light"] .dark-fab .fab-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
:root[data-theme="light"] .dark-fab .fab-moon{ opacity: 1; transform: rotate(0) scale(1); }
@media (prefers-reduced-motion: reduce){
  .dark-fab, .dark-fab > svg{ transition: none !important; }
  .dark-fab:hover{ transform: none !important; }
}

/* ==== QR expiry countdown ==== */
.qr-timer{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
  color: var(--brand, #10b981);
  border: 1px solid color-mix(in oklab, var(--brand, #10b981) 55%, transparent);
  background: color-mix(in oklab, var(--brand, #10b981) 10%, transparent);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.qr-timer::before{
  content: "Expires in";
  font: 600 10px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: .75; margin-right: 2px;
}
.qr-timer.is-expired::before{ content: "Status"; }


.qr-timer .timer-ico{ opacity: .9; }
.qr-timer .timer-ring{
  display: block;
  transform: rotate(-90deg);
  overflow: visible;
}
.qr-timer .timer-ring .tr-track{
  stroke: color-mix(in oklab, currentColor 20%, transparent);
}
.qr-timer .timer-ring .tr-fill{
  stroke: currentColor;
  transition: stroke .25s ease;
  filter: drop-shadow(0 0 4px color-mix(in oklab, currentColor 45%, transparent));
}
.qr-progress-timer{
  height: 6px; margin: 8px 2px 4px;
  border-radius: 999px; overflow: hidden;
  background: color-mix(in oklab, var(--brand, #10b981) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand, #10b981) 25%, transparent);
}
.qr-progress-timer-bar{
  height: 100%; width: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--brand, #10b981) 90%, #fff),
    var(--brand, #10b981));
  box-shadow: 0 0 10px color-mix(in oklab, var(--brand, #10b981) 55%, transparent);
  transition: background .3s ease, box-shadow .3s ease;
}
.qr-progress-timer.is-warn .qr-progress-timer-bar{
  background: linear-gradient(90deg, #fbbf24, #d97706);
  box-shadow: 0 0 10px color-mix(in oklab, #d97706 55%, transparent);
}
.qr-progress-timer.is-expired .qr-progress-timer-bar{
  background: #dc2626; box-shadow: none;
}
@media (prefers-reduced-motion: reduce){
  .qr-progress-timer-bar,
  .qr-timer .timer-ring .tr-fill{ transition: none !important; filter: none !important; }
}

.qr-timer .timer-txt{ font-variant-numeric: tabular-nums; }
.qr-timer.is-warn{
  color: #d97706;
  border-color: color-mix(in oklab, #d97706 45%, transparent);
  background: color-mix(in oklab, #d97706 10%, transparent);
}
.qr-timer.is-expired{
  color: #dc2626;
  border-color: color-mix(in oklab, #dc2626 55%, transparent);
  background: color-mix(in oklab, #dc2626 12%, transparent);
}
.qr-head{ align-items: center; gap: 10px; }
.qr-card.is-expired .qr-frame{ filter: grayscale(1) opacity(.55); }
.qr-card.is-expired .qr-frame::after{
  content: "Expired — tap Generate again";
  position: absolute; inset: auto 8px 8px; text-align: center;
  font: 600 12px/1.2 system-ui, sans-serif; color: #dc2626;
  background: color-mix(in oklab, var(--bg, #fff) 85%, transparent);
  padding: 6px 8px; border-radius: 8px;
}
.qr-card.is-expired .pay-cta{ pointer-events: none; opacity: .5; }
@media (prefers-reduced-motion: reduce){
  .qr-timer{ transition: none !important; }
}

/* ==== QR card entrance ==== */
.qr-card.pop{
  animation: qrCardIn .55s cubic-bezier(.2,.8,.2,1) both;
  transform-origin: center top;
}
.qr-card.pop .qr-head{ animation: qrRise .5s .06s cubic-bezier(.2,.8,.2,1) both; }
.qr-card.pop .qr-frame{ animation: qrFrameIn .6s .1s cubic-bezier(.2,.8,.2,1) both; }
.qr-card.pop .qr-progress-timer{ animation: qrRise .5s .18s cubic-bezier(.2,.8,.2,1) both; }
.qr-card.pop #qrTimer{ animation: timerIn .55s .22s cubic-bezier(.2,.8,.2,1) both; }
.qr-card.pop .pay-apps,
.qr-card.pop .pay-grid,
.qr-card.pop .qr-actions{ animation: qrRise .5s .28s cubic-bezier(.2,.8,.2,1) both; }

@keyframes qrCardIn{
  0%  { opacity: 0; transform: translateY(14px) scale(.985); }
  60% { opacity: 1; }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes qrRise{
  0%  { opacity: 0; transform: translateY(10px); }
  100%{ opacity: 1; transform: translateY(0); }
}
@keyframes qrFrameIn{
  0%  { opacity: 0; transform: translateY(8px) scale(.94); filter: blur(2px); }
  60% { filter: blur(0); }
  100%{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes timerIn{
  0%  { opacity: 0; transform: translateY(-6px) scale(.9); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}

/* Override existing frame-only pop so children stagger cleanly */
.qr-card.pop .qr-frame{ animation-name: qrFrameIn; }

@media (prefers-reduced-motion: reduce){
  .qr-card.pop,
  .qr-card.pop .qr-head,
  .qr-card.pop .qr-frame,
  .qr-card.pop .qr-progress-timer,
  .qr-card.pop #qrTimer,
  .qr-card.pop .pay-apps,
  .qr-card.pop .pay-grid,
  .qr-card.pop .qr-actions{ animation: none !important; }
}
[data-motion="reduced"] .qr-card.pop,
[data-motion="reduced"] .qr-card.pop *{ animation: none !important; }

/* ==== QR actions row (Save + Cancel) ==== */
.qr-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
  width: 100%;
}
.qr-actions .ghost-btn{
  width: 100%;
  justify-content: center;
  padding: clamp(11px, 3.2vw, 13px) 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: clamp(13px, 3.6vw, 14px);
  min-height: 44px;
}
.save-qr-btn{ margin-top: 0 !important; }
.cancel-qr-btn{
  margin-top: 0;
  color: #dc2626;
  border-color: color-mix(in oklab, #dc2626 40%, transparent);
  background: color-mix(in oklab, #dc2626 6%, transparent);
}
.cancel-qr-btn:hover{
  background: color-mix(in oklab, #dc2626 12%, transparent);
  border-color: color-mix(in oklab, #dc2626 60%, transparent);
}

/* ==== Tighter, consistent QR card alignment ==== */
.qr-head{ align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qr-head .qr-amount{ min-width: 0; }
.pay-apps-label{ margin-top: 6px; }
.pay-apps{ margin-top: 8px; }
.pay-cta{ align-self: stretch; }


/* ==== QR card precision alignment ==== */
.qr-card{ align-items: stretch; }
.qr-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.qr-head > div:first-child{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.qr-head .qr-amt{ line-height:1.15; }

/* Square, centered QR frame */
.qr-frame{
  align-self: center;
  width: min(72vw, 288px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 18px);
  box-sizing: border-box;
}
.qr-frame #qrCanvas{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0;
}
.qr-frame .qr-skeleton{ inset: clamp(14px, 4vw, 18px); }

/* Progress bar tracks the frame width */
.qr-progress{
  width: min(72vw, 288px);
  max-width: 100%;
  margin: 6px auto 0;
}
.qr-progress-timer{ width: 100%; }

/* Actions row full width like frame's parent */
.qr-actions{ margin-top: 2px; }

/* ---------- Payment status buttons ---------- */
.pay-status{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:12px;
}
.status-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 14px; border-radius:12px;
  font:600 14px/1 system-ui,-apple-system,sans-serif;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.status-done{ color:#10b981; border-color:color-mix(in oklab, #10b981 55%, transparent); background:color-mix(in oklab, #10b981 10%, transparent); }
.status-done:hover{ background:color-mix(in oklab, #10b981 18%, transparent); transform:translateY(-1px); }
.status-fail{ color:#ef4444; border-color:color-mix(in oklab, #ef4444 55%, transparent); background:color-mix(in oklab, #ef4444 10%, transparent); }
.status-fail:hover{ background:color-mix(in oklab, #ef4444 18%, transparent); transform:translateY(-1px); }
.status-btn:active{ transform:translateY(0) scale(.98); }

/* ---------- Payment result modal ---------- */
.pay-modal{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:20px; }
.pay-modal[hidden]{ display:none; }
.pay-modal__backdrop{
  position:absolute; inset:0;
  background:color-mix(in oklab, #000 55%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:pmFadeIn .25s ease-out both;
}
.pay-modal__card{
  position:relative; z-index:1;
  width:min(360px, 92vw);
  background:var(--card, #fff); color:var(--text, #0f172a);
  border:1px solid color-mix(in oklab, currentColor 12%, transparent);
  border-radius:20px; padding:26px 22px 22px;
  box-shadow:0 30px 80px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.15);
  text-align:center;
  animation:pmPop .38s cubic-bezier(.2,.9,.25,1.15) both;
}
.pay-modal__icon{ display:grid; place-items:center; margin:2px auto 14px; width:76px; height:76px; }
.pay-modal .pm-check, .pay-modal .pm-cross{ width:76px; height:76px; display:none; }
.pay-modal.is-success .pm-check{ display:block; }
.pay-modal.is-fail .pm-cross{ display:block; }
.pm-ring{ stroke:currentColor; opacity:.25; stroke-dasharray:151; stroke-dashoffset:151; animation:pmRing .55s ease-out .05s forwards; }
.pm-mark{ stroke:currentColor; stroke-dasharray:60; stroke-dashoffset:60; animation:pmMark .45s cubic-bezier(.7,.15,.3,1) .35s forwards; }
.pay-modal.is-success{ --pmColor:#10b981; }
.pay-modal.is-fail{ --pmColor:#ef4444; }
.pay-modal.is-success .pm-check, .pay-modal.is-fail .pm-cross{ color:var(--pmColor); filter:drop-shadow(0 6px 18px color-mix(in oklab, var(--pmColor) 45%, transparent)); }
.pay-modal__title{
  font:800 22px/1.2 system-ui,-apple-system,sans-serif;
  margin:6px 0 6px; letter-spacing:-.01em;
  animation:pmRise .35s ease-out .2s both;
}
.pay-modal.is-success .pay-modal__title{ color:#10b981; }
.pay-modal.is-fail .pay-modal__title{ color:#ef4444; }
.pay-modal__msg{
  font:500 14px/1.5 system-ui,-apple-system,sans-serif;
  color:color-mix(in oklab, currentColor 70%, transparent);
  margin:0 0 18px;
  animation:pmRise .35s ease-out .28s both;
}
.pay-modal__ok{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:120px; min-height:42px; padding:10px 22px;
  border-radius:10px; border:0; cursor:pointer;
  font:700 14px/1 system-ui,-apple-system,sans-serif; color:#fff;
  background:var(--pmColor, #10b981);
  box-shadow:0 8px 24px color-mix(in oklab, var(--pmColor,#10b981) 40%, transparent);
  transition:transform .15s ease, filter .15s ease;
  animation:pmRise .35s ease-out .34s both;
}
.pay-modal__ok:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.pay-modal__ok:active{ transform:translateY(0) scale(.98); }
.pay-modal.is-closing .pay-modal__backdrop{ animation:pmFadeOut .2s ease-in forwards; }
.pay-modal.is-closing .pay-modal__card{ animation:pmPopOut .22s ease-in forwards; }

@keyframes pmFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes pmFadeOut{ from{opacity:1} to{opacity:0} }
@keyframes pmPop{ 0%{opacity:0; transform:translateY(14px) scale(.92)} 60%{opacity:1; transform:translateY(-2px) scale(1.02)} 100%{opacity:1; transform:translateY(0) scale(1)} }
@keyframes pmPopOut{ to{opacity:0; transform:translateY(8px) scale(.96)} }
@keyframes pmRing{ to{stroke-dashoffset:0} }
@keyframes pmMark{ to{stroke-dashoffset:0} }
@keyframes pmRise{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

@media (prefers-reduced-motion: reduce){
  .pay-modal__backdrop, .pay-modal__card, .pay-modal__title, .pay-modal__msg, .pay-modal__ok{ animation:none !important; }
  .pm-ring, .pm-mark{ animation:none !important; stroke-dashoffset:0 !important; }
}

/* ---------- Smooth continuity between Generate → paying-to → QR ---------- */
.avatar{ position:relative; }
.avatar-letter{ position:relative; z-index:1; display:block; }
.avatar-check{
  position:absolute; right:-4px; bottom:-4px;
  width:22px; height:22px; border-radius:999px;
  background:#10b981; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 6px 16px color-mix(in oklab, #10b981 45%, transparent), 0 0 0 3px var(--card-bg-a, #0b1220);
  opacity:0; transform:scale(.4) rotate(-30deg);
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.9,.25,1.4);
  pointer-events:none;
}
.pay-to.is-success .avatar-check{ opacity:1; transform:scale(1) rotate(0); }
.pay-to.is-success .avatar::after{ animation-duration: 3s; }
.pay-to.is-active{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px -22px color-mix(in oklab, var(--brand) 45%, transparent), var(--shadow);
}

/* Bridge connector between payee card and QR card while generating */
.flow-bridge{
  display:none;
  justify-content:center; align-items:center; gap:6px;
  height:0; overflow:visible;
  margin:0 auto;
}
.flow-bridge .fb-line{
  display:block; width:2px; height:0;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--brand) 60%, transparent),
    color-mix(in oklab, var(--brand) 10%, transparent));
  border-radius:2px;
  transition:height .35s cubic-bezier(.2,.8,.2,1);
}
.flow-bridge .fb-dot{
  display:block; width:8px; height:8px; border-radius:999px;
  background:var(--brand, #10b981);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 20%, transparent),
             0 0 16px color-mix(in oklab, var(--brand) 55%, transparent);
  transform:scale(0); opacity:0;
  transition:transform .3s cubic-bezier(.2,.9,.25,1.4) .1s, opacity .25s ease .1s;
}
.flow-bridge.is-on{
  display:flex; flex-direction:column;
  padding:6px 0;
}
.flow-bridge.is-on .fb-line{ height:18px; }
.flow-bridge.is-on .fb-line:nth-child(3){ height:18px; transition-delay:.15s; }
.flow-bridge.is-on .fb-dot{ transform:scale(1); opacity:1; animation:fbPulse 1.4s ease-in-out .35s infinite; }
.flow-bridge.is-done .fb-dot{ animation:none; transform:scale(1.15); }

@keyframes fbPulse{
  0%,100%{ box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 20%, transparent), 0 0 16px color-mix(in oklab, var(--brand) 55%, transparent); }
  50%    { box-shadow:0 0 0 8px color-mix(in oklab, var(--brand) 10%, transparent), 0 0 22px color-mix(in oklab, var(--brand) 75%, transparent); }
}

/* CTA melt-away during generation for a continuous feel */
.cta.is-busy{
  transform: scale(.985);
  opacity:.7;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease, filter .35s ease;
  filter: saturate(.85);
}

/* QR card grows from the same visual axis as the payee card */
.qr-card.pop{ transform-origin: top center; }

@media (prefers-reduced-motion: reduce){
  .avatar-check, .flow-bridge .fb-line, .flow-bridge .fb-dot, .cta.is-busy{
    transition:none !important; animation:none !important;
  }
  .flow-bridge.is-on .fb-dot{ animation:none !important; }
}
[data-motion="reduced"] .avatar-check,
[data-motion="reduced"] .flow-bridge .fb-line,
[data-motion="reduced"] .flow-bridge .fb-dot,
[data-motion="reduced"] .cta.is-busy{ transition:none !important; animation:none !important; }

/* ===== Springy micro-interactions (hover + tap) ===== */
:root{
  --spring-ease: cubic-bezier(.34, 1.56, .64, 1);
  --spring-duration: 320ms;
}
.pay-cta, .cta, .pay-app, .amt, .amt-manual button,
.qr-actions button, .modal-close, .modal .btn,
.pay-to, .qr-card, .amount-card{
  transition: transform var(--spring-duration) var(--spring-ease),
              box-shadow 260ms ease,
              background-color 200ms ease,
              border-color 200ms ease,
              color 200ms ease;
  will-change: transform;
}
/* Buttons: lift + tiny scale on hover, punchy press on active */
.pay-cta:hover:not(:disabled),
.cta:hover:not(:disabled),
.pay-app:hover,
.amt:hover,
.amt-manual button:hover,
.qr-actions button:hover,
.modal .btn:hover{
  transform: translateY(-2px) scale(1.025);
}
.pay-cta:active:not(:disabled),
.cta:active:not(:disabled),
.pay-app:active,
.amt:active,
.amt-manual button:active,
.qr-actions button:active,
.modal .btn:active{
  transform: translateY(1px) scale(.96);
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(.2,.7,.3,1);
}
/* Selected amount chip gets a tiny bounce */
.amt.is-selected{ animation: chip-pop 380ms var(--spring-ease); }
@keyframes chip-pop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.08); }
  70%{ transform: scale(.98); }
  100%{ transform: scale(1); }
}
/* Cards: gentle lift */
.pay-to:hover, .qr-card:hover, .amount-card:hover{
  transform: translateY(-3px);
}
.pay-to:active, .qr-card:active, .amount-card:active{
  transform: translateY(0) scale(.995);
  transition-duration: 140ms;
}
/* Keyboard focus mirrors hover so it's discoverable */
.pay-cta:focus-visible, .cta:focus-visible, .pay-app:focus-visible,
.amt:focus-visible, .qr-actions button:focus-visible, .modal .btn:focus-visible{
  transform: translateY(-2px) scale(1.025);
}
/* Motion scale integration */
.pay-cta, .cta, .pay-app, .amt, .amt-manual button,
.qr-actions button, .modal .btn, .pay-to, .qr-card, .amount-card{
  transition-duration: calc(var(--spring-duration) * var(--motion-duration-scale, 1));
}
/* Reduced motion: kill springs, keep subtle feedback */
@media (prefers-reduced-motion: reduce){
  .pay-cta, .cta, .pay-app, .amt, .amt-manual button,
  .qr-actions button, .modal .btn, .pay-to, .qr-card, .amount-card{
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease !important;
    transform: none !important;
    animation: none !important;
  }
}
:root[data-motion="reduced"] .pay-cta,
:root[data-motion="reduced"] .cta,
:root[data-motion="reduced"] .pay-app,
:root[data-motion="reduced"] .amt,
:root[data-motion="reduced"] .amt-manual button,
:root[data-motion="reduced"] .qr-actions button,
:root[data-motion="reduced"] .modal .btn,
:root[data-motion="reduced"] .pay-to,
:root[data-motion="reduced"] .qr-card,
:root[data-motion="reduced"] .amount-card{
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease !important;
  transform: none !important;
  animation: none !important;
}

/* ===== Auto payment status checking pill ===== */
.pay-checking{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:14px; padding:12px 16px;
  border:1px solid var(--border, rgba(148,163,184,.35));
  border-radius:14px;
  background:color-mix(in oklab, var(--card, #fff) 92%, transparent);
  color:var(--fg, #0b1220);
  font-weight:600; font-size:14px;
  opacity:0; transform:translateY(4px);
  transition:opacity .28s ease, transform .28s ease;
}
.pay-checking.is-on{ opacity:1; transform:none; }
.pay-checking .pc-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid color-mix(in oklab, var(--fg, #0b1220) 20%, transparent);
  border-top-color: var(--brand, #10b981);
  animation: pc-spin .9s linear infinite;
}
@keyframes pc-spin{ to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .pay-checking{ transition:opacity .18s ease; transform:none; }
  .pay-checking .pc-spinner{ animation:none; border-top-color: var(--brand, #10b981); }
}
:root[data-motion="reduced"] .pay-checking .pc-spinner{ animation:none; }

/* Inline dark-mode toggle sitting next to the Verified badge */
.theme-inline{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin-left:6px; padding:0;
  border-radius:999px;
  border:1px solid var(--border, rgba(148,163,184,.35));
  background:transparent;
  color:inherit; cursor:pointer;
  transition:transform .25s var(--spring-ease, cubic-bezier(.34,1.56,.64,1)),
             background-color .2s ease, border-color .2s ease;
}
.theme-inline:hover{ transform:translateY(-1px) scale(1.06); }
.theme-inline:active{ transform:scale(.94); }
.theme-inline .fab-sun,
.theme-inline .fab-moon{ display:none; }
:root[data-theme="dark"] .theme-inline .fab-sun{ display:block; }
:root[data-theme="light"] .theme-inline .fab-moon{ display:block; }
/* Hide any legacy floating variant */
.dark-fab{ display:none !important; }
@media (prefers-reduced-motion: reduce){
  .theme-inline{ transition:background-color .2s ease, border-color .2s ease; transform:none !important; }
}

/* ===== Flow transitions between pay form and success/QR ===== */
/* Assign stable view-transition names so the browser matches elements
   across the DOM mutation and animates them smoothly. */
.pay-to     { view-transition-name: pay-to; }
.amount-card{ view-transition-name: amount-card; }
#qrCard     { view-transition-name: qr-card; }

/* Direction-aware slide+fade for the QR card during reveal / cancel */
:root[data-flow-transition="reveal"]::view-transition-old(qr-card),
:root[data-flow-transition="back"]::view-transition-new(qr-card){
  animation: flow-out 320ms cubic-bezier(.2,.7,.2,1) both;
}
:root[data-flow-transition="reveal"]::view-transition-new(qr-card){
  animation: flow-in-up 420ms cubic-bezier(.2,.7,.2,1) both;
}
:root[data-flow-transition="back"]::view-transition-old(qr-card){
  animation: flow-out-down 320ms cubic-bezier(.2,.7,.2,1) both;
}
/* The form / payee card gently crossfade so the two views feel continuous */
::view-transition-old(pay-to),
::view-transition-new(pay-to),
::view-transition-old(amount-card),
::view-transition-new(amount-card){
  animation: flow-crossfade 320ms ease both;
}

@keyframes flow-in-up{
  from{ opacity:0; transform: translateY(14px) scale(.985); }
  to  { opacity:1; transform: none; }
}
@keyframes flow-out-down{
  from{ opacity:1; transform: none; }
  to  { opacity:0; transform: translateY(10px) scale(.99); }
}
@keyframes flow-out{
  from{ opacity:1 } to{ opacity:0 }
}
@keyframes flow-crossfade{
  from{ opacity:0 } to{ opacity:1 }
}

/* Fallback crossfade for browsers without View Transitions API */
.shell.flow-xfade > *{
  animation: flow-in-up 380ms cubic-bezier(.2,.7,.2,1) both;
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(qr-card),
  ::view-transition-new(qr-card),
  ::view-transition-old(pay-to),
  ::view-transition-new(pay-to),
  ::view-transition-old(amount-card),
  ::view-transition-new(amount-card){
    animation: flow-crossfade 160ms linear both !important;
  }
  .shell.flow-xfade > *{ animation: none !important; }
}
:root[data-motion="reduced"] .shell.flow-xfade > *{ animation: none !important; }

/* ================ Latest Animations ================ */
.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background: currentColor; opacity:.28; transform:scale(0);
  animation: ripple .6s cubic-bezier(.2,.7,.2,1) forwards;
  mix-blend-mode: overlay;
}
@keyframes ripple{
  to{ transform:scale(2.2); opacity:0; }
}

.confetti-layer{
  position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:5;
}
.confetti-piece{
  position:absolute; left:50%; top:38%;
  width:8px; height:14px; border-radius:2px;
  transform: translate(-50%,-50%);
  animation: confetti-fly var(--dur, 1000ms) cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes confetti-fly{
  0%   { transform: translate(-50%,-50%) rotate(0);   opacity:1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) + 60px)) rotate(var(--rot)); opacity:0; }
}

/* Sheen sweep across primary CTA */
.pay-cta, #generateBtn, .btn-primary{
  position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.pay-cta::after, #generateBtn::after, .btn-primary::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events:none;
}
.pay-cta:hover::after, #generateBtn:hover::after, .btn-primary:hover::after{
  animation: sheen 1s ease forwards;
}
@keyframes sheen{ to{ transform: translateX(120%); } }

/* Aurora background drift on body */
body::before{
  content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(600px 400px at 15% 10%, color-mix(in oklab, var(--brand, #10b981) 18%, transparent), transparent 60%),
    radial-gradient(700px 500px at 85% 90%, color-mix(in oklab, #6366f1 14%, transparent), transparent 60%);
  filter: blur(30px);
  animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -1%, 0) scale(1.05); }
  100% { transform: translate3d(-2%, 1%, 0) scale(1.02); }
}

/* Animated gradient text for payee name */
.pay-to h2, .payee-name{
  background: linear-gradient(90deg, var(--fg, #0f172a), color-mix(in oklab, var(--brand, #10b981) 70%, var(--fg, #0f172a)), var(--fg, #0f172a));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradText 6s linear infinite;
}
@keyframes gradText{ to{ background-position: 200% 0; } }

/* Amount count-up subtle scale pop */
#qrAmount{
  display:inline-block;
  animation: amountPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes amountPop{
  0%{ transform: scale(.85); opacity:.4; }
  100%{ transform: scale(1); opacity:1; }
}

/* Verified badge sparkle */
.verified{ position:relative; }
.verified::after{
  content:""; position:absolute; top:-2px; right:-6px;
  width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle, #fff, transparent 70%);
  box-shadow: 0 0 8px 2px color-mix(in oklab, var(--brand, #10b981) 80%, transparent);
  animation: sparkle 2.6s ease-in-out infinite;
}
@keyframes sparkle{
  0%,100%{ opacity:0; transform: scale(.6); }
  50%{ opacity:1; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce){
  .ripple, .confetti-piece, body::before,
  .pay-to h2, .payee-name, #qrAmount, .verified::after,
  .pay-cta::after, #generateBtn::after, .btn-primary::after{
    animation: none !important;
  }
  .pay-to h2, .payee-name{ -webkit-text-fill-color: currentColor; color: inherit; background: none; }
}

/* ================ Status polling pill ================ */
.status-poll{
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px auto 0; padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand, #10b981) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand, #10b981) 35%, transparent);
  color: var(--fg, #0f172a);
  font-size: 13px; font-weight: 500;
  max-width: max-content;
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.status-poll.is-on{ opacity: 1; transform: translateY(0); }
.status-poll .sp-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand, #10b981);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand, #10b981) 60%, transparent);
  animation: sp-pulse 1.4s ease-out infinite;
}
.status-poll .sp-attempt{
  font-size: 11px; font-weight: 500; opacity: .7;
  padding-left: 8px; margin-left: 4px;
  border-left: 1px solid color-mix(in oklab, var(--fg, #0f172a) 15%, transparent);
}
@keyframes sp-pulse{
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand, #10b981) 60%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in oklab, var(--brand, #10b981) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand, #10b981) 0%, transparent); }
}

/* Unknown / fallback modal styling */
.pay-modal.is-unknown .modal-card{
  border-color: color-mix(in oklab, #f59e0b 55%, transparent);
  box-shadow: 0 10px 40px -10px color-mix(in oklab, #f59e0b 45%, transparent);
}
.pay-modal.is-unknown .modal-icon{
  color: #f59e0b;
  animation: unknownWobble .6s cubic-bezier(.34,1.56,.64,1);
}
.pay-modal.is-unknown .modal-icon::before{
  content: "?"; font-size: 40px; font-weight: 800; line-height: 1;
}
@keyframes unknownWobble{
  0%{ transform: scale(.6) rotate(-8deg); opacity: 0; }
  60%{ transform: scale(1.08) rotate(4deg); opacity: 1; }
  100%{ transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce){
  .status-poll .sp-dot{ animation: none; }
  .pay-modal.is-unknown .modal-icon{ animation: none; }
}

/* ================ Persistent payment status banner ================ */
.pay-status{
  display: flex; align-items: center; gap: 12px;
  margin: 14px auto 4px; padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: color-mix(in oklab, var(--fg, #0f172a) 4%, transparent);
  max-width: 100%;
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.pay-status.is-on{ opacity: 1; transform: translateY(0) scale(1); }
.pay-status .ps-icon{
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: currentColor; color: #fff;
}
.pay-status .ps-icon svg{ color: #fff; }
.pay-status .ps-icon svg path{
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: ps-draw .55s ease forwards .1s;
  display: none;
}
.pay-status.is-success .ps-icon{ color: #10b981; }
.pay-status.is-success .ps-icon .ps-check{ display: block; }
.pay-status.is-fail    .ps-icon{ color: #ef4444; }
.pay-status.is-fail    .ps-icon .ps-cross{ display: block; }
.pay-status.is-unknown .ps-icon{ color: #f59e0b; }
.pay-status.is-unknown .ps-icon .ps-q{ display: block; }
@keyframes ps-draw{ to{ stroke-dashoffset: 0; } }

.pay-status .ps-title{ font-weight: 700; font-size: 15px; color: var(--fg, #0f172a); }
.pay-status .ps-meta{ font-size: 12.5px; opacity: .7; margin-top: 2px; }

.pay-status.is-success{
  border-color: color-mix(in oklab, #10b981 45%, transparent);
  background: color-mix(in oklab, #10b981 10%, transparent);
  box-shadow: 0 8px 24px -12px color-mix(in oklab, #10b981 60%, transparent);
}
.pay-status.is-fail{
  border-color: color-mix(in oklab, #ef4444 45%, transparent);
  background: color-mix(in oklab, #ef4444 10%, transparent);
}
.pay-status.is-unknown{
  border-color: color-mix(in oklab, #f59e0b 45%, transparent);
  background: color-mix(in oklab, #f59e0b 10%, transparent);
}

/* When paid, tone down the QR so the status is the focal point */
#qrCard.is-paid #qrCanvas{ filter: grayscale(.4) opacity(.55); transition: filter .4s ease; }
#qrCard.is-paid .qr-frame::after{
  content: "PAID"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(28px, 8vw, 44px); font-weight: 900; letter-spacing: .12em;
  color: #10b981; transform: rotate(-14deg);
  text-shadow: 0 2px 8px color-mix(in oklab, #10b981 40%, transparent);
  pointer-events: none;
  animation: paidStamp .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes paidStamp{
  0%{ opacity: 0; transform: rotate(-14deg) scale(1.6); }
  100%{ opacity: 1; transform: rotate(-14deg) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .pay-status, .pay-status .ps-icon svg path,
  #qrCard.is-paid .qr-frame::after{ animation: none !important; transition: none !important; }
}

/* ---- Pending payment: subtle shimmer + scan-line over QR ---- */
.qr-frame{ position: relative; }
.qr-card.is-pending .qr-frame::before,
.qr-card.is-pending .qr-frame::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: inherit;
  mix-blend-mode: overlay;
}
/* Diagonal shimmer sweep */
.qr-card.is-pending .qr-frame::before{
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255,255,255,.55) 50%,
    transparent 65%);
  background-size: 220% 220%;
  animation: qrShimmer 2.6s linear infinite;
  opacity:.55;
  z-index: 3;
}
/* Horizontal scan line */
.qr-card.is-pending .qr-frame::after{
  background: linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--scan-y, 0%) - 8px),
    rgba(16,185,129,.0) calc(var(--scan-y, 0%) - 8px),
    rgba(16,185,129,.55) var(--scan-y, 0%),
    rgba(16,185,129,.0) calc(var(--scan-y, 0%) + 8px),
    transparent calc(var(--scan-y, 0%) + 8px),
    transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(16,185,129,.15);
  animation: qrScan 2.2s cubic-bezier(.6,.05,.4,.95) infinite;
  z-index: 4;
}
@keyframes qrShimmer{
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
@keyframes qrScan{
  0%   { --scan-y: -6%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { --scan-y: 106%; opacity: 0; }
}
@property --scan-y { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* Stop when paid, expired, or reduced-motion */
.qr-card.is-paid.is-pending .qr-frame::before,
.qr-card.is-paid.is-pending .qr-frame::after,
.qr-card.is-expired.is-pending .qr-frame::before,
.qr-card.is-expired.is-pending .qr-frame::after{ display:none; }

@media (prefers-reduced-motion: reduce){
  .qr-card.is-pending .qr-frame::before,
  .qr-card.is-pending .qr-frame::after{ animation: none; display:none; }
}

/* ---- Payment progress timeline ---- */
.pay-timeline{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 14px 4px 6px;
  margin: 6px 0 10px;
  position: relative;
  counter-reset: pt;
}
.pt-step{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted, #64748b);
  text-align: center;
  min-width: 0;
}
/* Connector line drawn as ::before on all but the first step */
.pt-step + .pt-step::before{
  content: "";
  position: absolute;
  left: -50%;
  right: 50%;
  top: 11px;
  height: 2px;
  background: color-mix(in srgb, var(--border, #e2e8f0) 100%, transparent);
  z-index: 0;
  transform-origin: left center;
}
.pt-step.is-done + .pt-step::before,
.pt-step.is-active::before{
  background: linear-gradient(to right, #10b981, #10b981);
  animation: ptLineGrow .5s ease-out both;
}
@keyframes ptLineGrow{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}
.pt-dot{
  position: relative;
  z-index: 1;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #fff);
  color: transparent;
  border: 2px solid color-mix(in srgb, var(--border, #cbd5e1) 100%, transparent);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pt-dot svg{ opacity: 0; transition: opacity .2s ease; }
.pt-step.is-done .pt-dot{
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.pt-step.is-done .pt-dot svg.pt-icon-ok,
.pt-step.is-done .pt-dot > svg:not(.pt-icon-fail){ opacity: 1; }
.pt-step.is-done .pt-label{ color: var(--text, #0f172a); }

/* Active (currently in-progress) step: pulsing ring */
.pt-step.is-active .pt-dot{
  background: var(--surface, #fff);
  border-color: #10b981;
  color: #10b981;
  animation: ptPulse 1.4s ease-in-out infinite;
}
.pt-step.is-active .pt-label{ color: #10b981; font-weight: 600; }
@keyframes ptPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(16,185,129,.55); transform: scale(1); }
  50%    { box-shadow: 0 0 0 6px rgba(16,185,129,0); transform: scale(1.08); }
}

/* Failed final step */
.pay-timeline.is-fail .pt-step[data-step="completed"] .pt-dot{
  background: #ef4444; border-color: #ef4444; color: #fff;
}
.pay-timeline.is-fail .pt-step[data-step="completed"] .pt-icon-ok{ display:none; }
.pay-timeline.is-fail .pt-step[data-step="completed"].is-done .pt-icon-fail{ opacity: 1; }
.pay-timeline.is-fail .pt-step[data-step="completed"] .pt-label{ color: #ef4444; }
.pay-timeline.is-fail .pt-step[data-step="completed"] + .pt-step::before,
.pay-timeline.is-fail .pt-step.is-done + .pt-step[data-step="completed"]::before{
  background: linear-gradient(to right, #10b981, #ef4444);
}

/* Update completed label text based on state */
.pay-timeline.is-fail .pt-step[data-step="completed"] .pt-label::after{ content: " (failed)"; }

@media (prefers-reduced-motion: reduce){
  .pt-step.is-active .pt-dot{ animation: none; }
  .pt-step + .pt-step::before{ animation: none !important; }
}

/* ---- Rich success screen animations ---- */
/* Confetti layer origin (defaults center) */
.confetti-layer{
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
  --ox: 50%;
  --oy: 45%;
}
.confetti-piece{
  position: absolute;
  left: var(--ox); top: var(--oy);
  width: 8px; height: 12px;
  border-radius: 2px;
  transform: translate(-50%,-50%);
  opacity: 0;
  animation: confettiFly var(--dur, 1100ms) cubic-bezier(.15,.7,.25,1) var(--delay,0ms) forwards;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.confetti-piece.is-ribbon{ width: 4px; height: 16px; border-radius: 6px; }
@keyframes confettiFly{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(0deg); }
  10%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) + 40px)) scale(1) rotate(var(--rot)); }
}

/* Modal backdrop: soft radial spotlight */
.pay-modal.is-success .pay-modal__backdrop{
  background: radial-gradient(60% 45% at 50% 40%,
    rgba(16,185,129,.28), rgba(0,0,0,.55) 70%);
  animation: pmBackdropIn .5s ease-out both;
}
@keyframes pmBackdropIn{ from{ opacity:0; } to{ opacity:1; } }

/* Card: floating entrance with soft bloom */
.pay-modal.is-success .pay-modal__card{
  animation: pmSuccessFloat .7s cubic-bezier(.2,.9,.3,1.15) both,
             pmFloatIdle 3.6s ease-in-out .8s infinite;
  box-shadow:
    0 30px 80px -20px rgba(16,185,129,.45),
    0 12px 28px -12px rgba(0,0,0,.25);
}
@keyframes pmSuccessFloat{
  0%   { opacity: 0; transform: translateY(28px) scale(.9) rotateX(6deg); filter: blur(6px); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.02) rotateX(0); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: blur(0); }
}
@keyframes pmFloatIdle{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-4px); }
}

/* Bloom halo behind the checkmark */
.pay-modal.is-success .pay-modal__icon{
  position: relative;
}
.pay-modal.is-success .pay-modal__icon::before,
.pay-modal.is-success .pay-modal__icon::after{
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 76px; height: 76px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(16,185,129,.55), rgba(16,185,129,0) 65%);
  animation: pmBloom 1.6s ease-out both;
}
.pay-modal.is-success .pay-modal__icon::after{
  animation-delay: .35s;
  background: radial-gradient(circle, rgba(52,211,153,.4), rgba(52,211,153,0) 65%);
}
@keyframes pmBloom{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.6); }
}

/* Checkmark draw effect */
.pay-modal.is-success .pm-check{
  animation: pmIconPop .5s cubic-bezier(.34,1.56,.64,1) .15s both;
}
.pay-modal.is-success .pm-check .pm-ring{
  stroke: #10b981;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: pmDraw .55s ease-out .2s forwards;
}
.pay-modal.is-success .pm-check .pm-mark{
  stroke: #10b981;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: pmDraw .35s cubic-bezier(.65,0,.35,1) .65s forwards;
}
@keyframes pmDraw{ to{ stroke-dashoffset: 0; } }
@keyframes pmIconPop{
  0%   { transform: scale(.3); opacity: 0; }
  70%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* Title + message staggered rise */
.pay-modal.is-success .pay-modal__title{
  animation: pmRise .5s ease-out .95s both;
}
.pay-modal.is-success .pay-modal__msg{
  animation: pmRise .5s ease-out 1.05s both;
}
.pay-modal.is-success .pay-modal__ok{
  animation: pmRise .5s ease-out 1.15s both;
}
@keyframes pmRise{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .pay-modal.is-success .pay-modal__card{ animation: none; }
  .pay-modal.is-success .pay-modal__icon::before,
  .pay-modal.is-success .pay-modal__icon::after{ display: none; }
  .pay-modal.is-success .pm-check,
  .pay-modal.is-success .pm-check .pm-ring,
  .pay-modal.is-success .pm-check .pm-mark,
  .pay-modal.is-success .pay-modal__title,
  .pay-modal.is-success .pay-modal__msg,
  .pay-modal.is-success .pay-modal__ok{ animation: none !important; stroke-dashoffset: 0 !important; }
}