/* Scan QR / My QR / Pay QR (2026-09-28) */
.qr-screen .segmented{margin:8px 0 18px;height:50px}
.qr-scanner{position:relative;width:100%;max-width:320px;aspect-ratio:1/1;margin:0 auto;border-radius:24px;overflow:hidden;background:#0b0b0c}
.qr-reader{position:absolute;inset:0}
.qr-reader video{width:100%!important;height:100%!important;object-fit:cover;display:block}
.qr-reader img[alt="Info icon"],.qr-reader #qr-shaded-region,.qr-reader div[id$="__dashboard"]{display:none!important}
.qr-reader canvas{display:none}
.qr-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;text-align:center;color:#fff;background:radial-gradient(circle at 50% 35%,#1f2a2e,#0b0b0c 70%)}
.qr-idle[hidden]{display:none}
.qr-idle>span svg{width:54px;height:54px;opacity:.9}
.qr-idle p{margin:0;font-size:14px;line-height:1.45;color:#d1d5db;max-width:220px}
.qr-idle .btn{width:auto;min-height:44px;padding:10px 22px;border:0;background:linear-gradient(120deg,#36ea37,#00cbb3 35%,#008cff 75%,#0057f5);color:#fff}
.qr-corner{position:absolute;width:38px;height:38px;border:4px solid #fff;pointer-events:none;z-index:2;opacity:.95}
.qr-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.qr-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 14px 0 0}
.qr-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 14px}
.qr-corner.br{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 14px 0}
.qr-status{min-height:20px;margin:12px 0 0;text-align:center;font-size:13px;color:#4b5058}
.qr-tools{gap:34px;margin:16px 0 18px}
.qr-tools button,.qr-gallery{display:grid;place-items:center;gap:6px;border:0;background:transparent;color:#0b0b0c;font:inherit;font-size:13px;cursor:pointer}
.qr-tools span{width:56px;height:56px;margin:0;border:1px solid #dfe2e7;border-radius:50%;display:grid;place-items:center;background:#fff}
.qr-tools span svg{width:22px;height:22px}
.qr-tools button:disabled{opacity:.4;cursor:default}
.qr-tools button.on span{background:#0b0b0c;color:#ffd84d;border-color:#0b0b0c}
.qr-tools [hidden]{display:none}
.qr-manual{margin:4px 0 12px;padding:14px;border:1px solid #e5e8eb;border-radius:14px;background:#fafbfc}
.qr-manual label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:#30353b}
.qr-manual>div{display:flex;gap:8px}
.qr-manual input{flex:1;min-width:0;height:46px;padding:0 12px;border:1px solid #d6d9de;border-radius:12px;font:inherit;font-size:15px;text-transform:uppercase;letter-spacing:.04em;background:#fff}
.qr-manual .btn{width:auto;min-height:46px;height:46px;padding:0 18px;border-radius:12px}

.my-qr-card{max-width:320px;margin:0 auto;padding:18px 18px 20px;border-radius:24px;text-align:center;color:#fff;border:3px solid transparent;background:linear-gradient(145deg,#1f2327,#0b1216 70%,#10362d) padding-box,conic-gradient(from 210deg,#0099f4,#66e333,#00d891,#006cff,#42e77b,#0099f4) border-box;box-shadow:0 12px 28px #0000001f}
.my-qr-brand{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.04em;margin-bottom:14px}
.my-qr-brand .brand-symbol{width:26px;height:26px}
.my-qr-brand b{color:#4fc32b}
.my-qr-code{width:100%;max-width:236px;aspect-ratio:1/1;margin:0 auto 14px;padding:14px;border-radius:18px;background:#fff;display:grid;place-items:center;color:#111;font-size:13px}
.my-qr-code svg{display:block;width:100%;height:100%}
.my-qr-card strong{display:block;font-size:19px;font-weight:700}
.my-qr-id{display:block;margin-top:3px;font-size:13px;letter-spacing:.06em;color:#b8bec6}
.my-qr-amount{margin:10px auto 0;display:inline-block;padding:5px 12px;border-radius:99px;background:#ffffff1a;font-size:13px;font-weight:600}
.my-qr-amount[hidden]{display:none}
.my-qr-request{max-width:320px;margin:18px auto 0}
.my-qr-request label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:#30353b}
.my-qr-request>div{display:flex;gap:8px}
.my-qr-request input{flex:1;min-width:0;height:46px;padding:0 12px;border:1px solid #d6d9de;border-radius:12px;font:inherit;font-size:15px}
.my-qr-request .btn{width:auto;min-height:46px;height:46px;padding:0 18px;border-radius:12px}
.my-qr-actions{max-width:320px;margin:12px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.my-qr-actions .btn{min-height:46px;height:46px;font-size:14px;gap:6px;border-radius:12px}
.my-qr-actions .btn svg{width:17px;height:17px}
.my-qr-help{max-width:320px;margin:10px auto 16px;text-align:center;font-size:12px;line-height:1.5;color:#6b7078}

.pay-to{display:flex;align-items:center;gap:14px;margin:6px 0 20px;padding:16px;border:1px solid #e5e8eb;border-radius:16px;background:#fafbfc}
.pay-avatar{width:48px;height:48px;flex:0 0 48px;border-radius:50%;display:grid;place-items:center;background:#0b0b0c;color:#fff;font-weight:700;font-size:19px}
.pay-to small{display:block;font-size:12px;color:#6b7078}
.pay-to strong{display:block;font-size:18px;font-weight:700}
.pay-to span:last-child{display:block;font-size:12px;color:#6b7078;letter-spacing:.03em}
.pay-form label{display:block;font-size:13px;font-weight:600;margin:0 0 8px;color:#30353b}
.pay-form label small{font-weight:400;color:#8a8f97}
.pay-amount{display:flex;align-items:center;gap:8px;padding:0 16px;border:1.5px solid #0b0b0c;border-radius:16px}
.pay-amount input{flex:1;min-width:0;height:64px;border:0;outline:0;background:transparent;font:inherit;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.pay-amount input[readonly]{color:#30353b}
.pay-amount span{font-size:14px;font-weight:600;color:#6b7078}
.pay-balance{margin:8px 0 18px;font-size:13px;color:#6b7078}
.pay-note{width:100%;height:48px;padding:0 14px;border:1px solid #d6d9de;border-radius:12px;font:inherit;font-size:15px}
.pay-fine{margin:14px 0 16px;font-size:12px;line-height:1.5;color:#6b7078}
.pay-form .btn:disabled{opacity:.6}
.pay-screen>.btn{margin-top:10px}
.pay-receipt{text-align:center;padding:12px 0 8px}
.pay-check svg{width:56px;height:56px;color:#00a86b}
.pay-receipt>p{margin:8px 0 2px;font-weight:600;color:#30353b}
.pay-receipt h2{margin:0 0 18px;font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}
.pay-receipt h2 small{font-size:15px;font-weight:500;color:#6b7078}
.pay-receipt dl{margin:0;text-align:left;border-top:1px solid #e5e8eb}
.pay-receipt dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 2px;border-bottom:1px solid #e5e8eb;font-size:14px}
.pay-receipt dt{color:#6b7078}
.pay-receipt dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere}
.pay-receipt dd small{display:block;font-weight:400;color:#8a8f97;font-size:12px}

/* P2M (2026-09-29) */
.pay-avatar.merchant{background:linear-gradient(135deg,#0f9f8f,#1a6fe0)}
.verified{color:#0f8a4f;font-weight:600}
.p2m-label{font-size:13px;font-weight:600;margin:18px 0 8px;color:#30353b}
.p2m-sources{display:grid;gap:8px}
.p2m-source{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid #dfe2e7;border-radius:14px;cursor:pointer;background:#fff}
.p2m-source.selected{border-color:#0b0b0c;box-shadow:0 0 0 3px #0b0b0c14}
.p2m-source.disabled{opacity:.5;cursor:not-allowed}
.p2m-source input{width:18px;height:18px;accent-color:#0b0b0c}
.p2m-source strong{display:block;font-size:15px}
.p2m-source small{display:block;font-size:12px;color:#6b7078}
.p2m-source em{font-style:normal;font-size:11.5px;font-weight:600;color:#0b6f65;background:#e8f6f3;padding:3px 8px;border-radius:99px;white-space:nowrap}
.p2m-summary{margin:14px 0 18px;padding:12px 14px;border-radius:14px;background:#f6f7f9}
.p2m-summary div{display:flex;justify-content:space-between;padding:4px 0;font-size:14px;color:#4b5058}
.p2m-summary div b{color:#0b0b0c;font-variant-numeric:tabular-nums}
.p2m-summary .total{border-top:1px solid #e3e6ea;margin-top:4px;padding-top:8px;font-weight:700;color:#0b0b0c}
.p2m-summary p{margin:6px 0 0;font-size:12.5px;color:#4b5058}.p2m-summary p:empty{display:none}.p2m-summary p.warn{color:#b42318}
/* Help & Support */
.support-h{font-size:16px;margin:18px 0 10px}
.support-list{display:grid;border-top:1px solid #e5e8eb}
.support-list a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid #e5e8eb;text-decoration:none;color:#0b0b0c}
.support-list small{display:block;color:#6b7078;font-size:12px;margin-top:2px}
.support-list b{font-size:11.5px;padding:3px 9px;border-radius:99px;background:#eef1f4;white-space:nowrap}
.support-list b.st-pending{background:#fff2dc;color:#9a5b00}.support-list b.st-resolved{background:#e5f6ec;color:#0f8a4f}
.support-body{height:auto!important;padding:12px 14px!important;resize:vertical}
select.pay-note{background:#fff}
.mt12{margin-top:12px!important}
.alert.ok{background:#e5f6ec;border-color:#bfe6cf;color:#0f8a4f}
.support-thread{display:flex;flex-direction:column;gap:10px;margin:8px 0 16px}
.support-thread>div{max-width:85%;padding:10px 12px;border-radius:14px;background:#f1f4f7;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.support-thread>div.mine{align-self:flex-end;background:#0b0b0c;color:#fff}
.support-thread small{display:block;font-size:11px;opacity:.7;margin-bottom:3px;white-space:normal}
.map-box{height:320px;border-radius:12px;background:#eef1f4;display:grid;place-items:center;text-align:center;color:#6b7680;padding:16px;overflow:hidden;border:1px solid #e4e8ee}.map-box.tall{height:460px}.map-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}.map-tools p{margin:0;color:#6b7680;font-size:12.5px;flex:1;min-width:180px}.map-info{font:13px/1.4 Inter,system-ui,sans-serif;color:#111;max-width:220px}.map-info b{display:block;margin-bottom:2px}.map-info a{display:inline-block;margin-top:6px;font-weight:600;color:#0b6f65}
.mm-filter select{width:100%;height:46px;padding:0 12px;border:1px solid #d6d9de;border-radius:12px;font:inherit;background:#fff;margin:10px 0 12px}.merchant-map-screen .map-box{height:300px;margin-bottom:6px}.mm-list{margin-top:10px}.mm-list b{background:#e8f6f3!important;color:#0b6f65}.mm-dir{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;color:#0b6f65}
.pay-form label.p2m-source{display:grid;margin:0}
/* In-app QR Ph for Buy Credits (2026-09-29) */
.tq-card{margin:4px 0 14px;padding:18px 18px 16px;border-radius:22px;text-align:center;background:#fff;border:3px solid transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from 210deg,#0099f4,#66e333,#00d891,#006cff,#42e77b,#0099f4) border-box;box-shadow:0 12px 28px #0000001a}
.tq-brand span{display:inline-block;font-weight:800;letter-spacing:.04em;font-size:14px;padding:4px 12px;border-radius:99px;background:#0b0b0c;color:#fff}
.tq-brand small{display:block;margin-top:6px;color:#6b7078;font-size:12px}
.tq-code{position:relative;width:min(100%,260px);aspect-ratio:1/1;margin:14px auto 10px}
.tq-code img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block}
.tq-void{position:absolute;inset:0;display:grid;place-items:center;background:#ffffffe6;font-weight:800;color:#b42318;font-size:18px;border-radius:12px}
.tq-void[hidden]{display:none}
.tq-amount{display:block;font-size:28px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tq-sub{margin:2px 0 8px;color:#6b7078;font-size:13px}
.tq-timer{display:inline-block;margin:0 0 6px;padding:4px 10px;border-radius:99px;background:#fff2dc;color:#9a5b00;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.tq-status{margin:4px 0 0;font-size:13.5px;color:#30353b;display:flex;align-items:center;justify-content:center;gap:8px}
.tq-dot{width:9px;height:9px;border-radius:50%;background:#f59e0b;display:inline-block;animation:tqPulse 1.2s ease-in-out infinite}
.tq-dot.ok{background:#0f8a4f;animation:none}
@keyframes tqPulse{50%{opacity:.25}}
.tq-card.expired .tq-code img{filter:grayscale(1) opacity(.35)}
.tq-card.paid{box-shadow:0 0 0 4px #0f8a4f33,0 12px 28px #0000001a}
.tq-actions{display:grid;gap:10px;margin-bottom:14px}
.tq-actions[hidden]{display:none}
.tq-steps{margin:6px 0 12px;padding-left:20px;color:#30353b;font-size:13.5px;line-height:1.55}
.tq-steps li{margin-bottom:6px}
@media (prefers-reduced-motion:reduce){.tq-dot{animation:none}}
