*,*::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)}
.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-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 .3s 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,.85) 50%,transparent 70%);transform:translateX(-100%);animation:skShimmer 1.1s ease-in-out infinite}
@keyframes skShimmer{to{transform:translateX(100%)}}

.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-progress-bar{animation:none}
: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-progress-bar{animation:none}
  .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; }