/* YUKI wallet in YukiChat (js/wallet.js). The balance card is a straight port of Yuki Wallet's .c3 card,
   scoped under .yk-cardwrap and always dark (as it is in Yuki Wallet's light theme). */

/* ---------- page (profile tokens, so .pv-act / .pv-card look exactly like a profile) ---------- */
#panel-wallet {
    background: var(--bg-base);
    --pv-text: var(--text-main); --pv-muted: var(--text-muted); --pv-label: var(--text-muted);
    --pv-card: color-mix(in srgb, var(--text-main) 6%, transparent); --pv-hair: color-mix(in srgb, var(--text-main) 9%, transparent);
    --pv-link: var(--primary); --yk-accent: #f26a3f;
}
#panel-wallet .panel-body { padding: 0 0 calc(40px + env(safe-area-inset-bottom, 0px)); }
.yk-page { max-width: 472px; margin: 0 auto; padding: 8px 0 0; }
.yk-loading { display: grid; place-items: center; min-height: 50vh; }
.yk-spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--primary); animation: yk-rot .8s linear infinite; }
@keyframes yk-rot { to { transform: rotate(360deg); } }
.yk-empty { padding: 60px 24px; text-align: center; color: var(--text-muted); }
.yk-glyph { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex-shrink: 0; }
.yk-logo { width: 18px; height: 18px; flex-shrink: 0; }

/* actions: the profile's round glass buttons, with a caption */
.yk-actions { margin-top: 22px; gap: 18px; }
.yk-act { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.yk-act small { font-size: 12.5px; font-weight: 500; color: var(--pv-muted); }
.yk-act .pv-act { position: relative; }
.yk-act .pv-act.yk-pri { color: var(--yk-accent); }

/* activity */
.yk-feed { padding: 12px 6px 6px; }
.yk-feed-h { padding: 0 12px 4px; }
.yk-none { padding: 14px 12px 12px; color: var(--pv-muted); font-size: 14.5px; }
.yk-tx { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; color: var(--pv-text); text-decoration: none; transition: background .15s; }
.yk-tx:hover { background: var(--bg-hover); }
.yk-tx:active { opacity: .7; }
.yk-tx-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--text-main) 8%, transparent); }
.yk-tx-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.yk-tx.in .yk-tx-ico { background: rgba(80, 200, 140, .14); color: #3fbf86; }
.yk-tx-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yk-tx-m b { font-size: 15px; font-weight: 600; }
.yk-tx-m small { font-size: 13px; color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yk-tx-a { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yk-tx.in .yk-tx-a { color: #3fbf86; }
.yk-tx.pend { opacity: .65; }
.yk-tx.pend .yk-tx-ico { animation: yk-blink 1.2s ease-in-out infinite; }
@keyframes yk-blink { 50% { opacity: .4; } }

/* "Get Yuki Wallet" */
.yk-get { display: flex; align-items: center; gap: 14px; padding: 14px 16px !important; color: var(--pv-text); text-decoration: none; }
.yk-get-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #0b1017; flex-shrink: 0; }
.yk-get-ico .yk-logo { width: 26px; height: 26px; }
.yk-get-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yk-get-t b { font-size: 15px; font-weight: 600; }
.yk-get-t small { font-size: 13px; color: var(--pv-muted); }

/* no wallet yet */
.yk-setup { padding: 24px 24px 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.yk-hero { position: relative; width: 120px; height: 120px; display: grid; place-items: center; margin: 18px 0 22px; color: var(--yk-accent); }
.yk-hero .yk-glyph { width: 76px; height: 76px; position: relative; z-index: 1; filter: drop-shadow(0 10px 30px rgba(242, 106, 63, .45)); animation: yk-bob 3.4s ease-in-out infinite; }
.yk-hero i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--yk-accent) 45%, transparent); animation: yk-ring 3s ease-out infinite; }
.yk-hero i:nth-child(3) { animation-delay: 1s; } .yk-hero i:nth-child(4) { animation-delay: 2s; }
@keyframes yk-ring { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes yk-bob { 50% { transform: translateY(-6px) rotate(-4deg); } }
.yk-setup h2 { font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.yk-setup p { color: var(--text-muted); font-size: 15px; line-height: 1.45; margin: 0 0 24px; max-width: 340px; }
.yk-setup-foot { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--text-muted); font-size: 14px; text-decoration: none; }
.yk-btn { margin-top: 10px; background: color-mix(in srgb, var(--text-main) 8%, transparent); color: var(--text-main); border: none; cursor: pointer; gap: 8px; font-family: inherit; }
.yk-btn-pri { background: var(--primary); color: var(--on-primary); }
.yk-btn:disabled { opacity: .6; pointer-events: none; }
.yk-link { margin-top: 14px; background: none; border: none; color: var(--primary); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; width: 100%; padding: 6px; }

/* Settings row value */
#set-wallet-bal { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
#set-wallet-bal .yk-glyph { color: var(--yk-accent, #f26a3f); width: 15px; height: 15px; }
.set-item.yk-pulse #set-wallet-bal { animation: yk-valpop .9s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes yk-valpop { 30% { transform: scale(1.18); color: #3fbf86; } }

/* ---------- the Yuki Wallet card ---------- */
.yk-cardwrap { padding: 0 16px; font-family: 'Onest', system-ui, sans-serif; color: #eaf0f4;
    --ink: #080b10; --hair: rgba(220, 235, 245, .09); --hair-2: rgba(220, 235, 245, .17);
    --snow: #eaf0f4; --snow-2: #aab7c3; --snow-3: #7c8995; --accent: #f26a3f; --accent-2: #ff7c52; --ok: #7fdcb0; --bad: #ff8a78;
    --ease: cubic-bezier(.23, 1, .32, 1); --head: 'Unbounded', sans-serif; --mono: 'JetBrains Mono', monospace; }
.yk-cardwrap .c3 { perspective: 1100px; touch-action: pan-y; outline: none; filter: drop-shadow(0 22px 30px rgba(10, 15, 25, .28)); }
.yk-cardwrap .c3-in { display: grid; transform-style: preserve-3d; will-change: transform; }
.yk-cardwrap .card { position: relative; overflow: hidden; border-radius: 26px; padding: 26px; min-height: 230px; display: flex; flex-direction: column; border: 1px solid transparent; }
.yk-cardwrap .card .lbl { font-size: 13.5px; color: var(--snow-2); display: flex; align-items: center; gap: 8px; }
.yk-cardwrap .card .bal { font: 700 52px/1.05 var(--head); letter-spacing: -.045em; margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yk-cardwrap .card .bal.l2 { font-size: 42px; } .yk-cardwrap .card .bal.l3 { font-size: 34px; } .yk-cardwrap .card .bal.l4 { font-size: 27px; }
.yk-cardwrap .card .bal small { font-size: .5em; letter-spacing: -.02em; color: var(--snow-2); margin-left: 2px; }
.yk-cardwrap .card .unit { font: 600 16px var(--head); color: var(--accent); margin: 0; }
.yk-cardwrap .balrow { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.yk-cardwrap .card .addr { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 6px; font: 13px var(--mono); color: var(--snow-2); }
.yk-cardwrap .card .addr button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: -6px -10px; border-radius: 99px; transition: background .2s; }
.yk-cardwrap .card .addr button:hover { background: rgba(255, 255, 255, .06); color: var(--snow); }
.yk-cardwrap .c3 .face { grid-area: 1/1; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); background: #0b1017; }
.yk-cardwrap .c3 .back { transform: rotateY(180deg); background: #0b1017; }
.yk-cardwrap .c3 .back, .yk-cardwrap .c3.flipped .face:not(.back) { pointer-events: none; }
.yk-cardwrap .c3.flipped .back { pointer-events: auto; }
.yk-cardwrap .c3 .holo { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.yk-cardwrap .c3 .holo b { position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; will-change: transform; background: linear-gradient(105deg, transparent 38%, hsla(190, 90%, 78%, .07) 44%, hsla(275, 85%, 78%, .09) 47.5%, hsla(22, 95%, 72%, .09) 51%, hsla(150, 80%, 74%, .07) 54.5%, transparent 61%); }
.yk-cardwrap .c3 .face > *:not(i) { position: relative; z-index: 3; }
.yk-cardwrap .c3 .mesh, .yk-cardwrap .c3 .grain, .yk-cardwrap .c3 .rim { position: absolute; pointer-events: none; }
.yk-cardwrap .c3 .mesh { inset: -25%; z-index: 0; will-change: transform; animation: yk-drift4 20s ease-in-out infinite alternate; }
.yk-cardwrap .c3 .mesh:before { content: ""; position: absolute; inset: 0; filter: blur(34px);
    background: radial-gradient(38% 42% at 24% 78%, rgba(255, 106, 56, 1), transparent 72%),
        radial-gradient(34% 40% at 82% 24%, rgba(140, 205, 240, .85), transparent 72%),
        radial-gradient(32% 34% at 80% 82%, rgba(255, 196, 100, .7), transparent 72%),
        radial-gradient(30% 36% at 44% 30%, rgba(40, 160, 165, .65), transparent 72%); }
.yk-cardwrap .c3 .back .mesh { animation-direction: alternate-reverse; }
.yk-cardwrap .c3 .back .mesh:before { background: radial-gradient(38% 42% at 76% 76%, rgba(255, 106, 56, .7), transparent 72%),
    radial-gradient(36% 40% at 22% 26%, rgba(140, 205, 240, .65), transparent 72%),
    radial-gradient(30% 34% at 26% 80%, rgba(40, 160, 165, .5), transparent 72%); }
@keyframes yk-drift4 { from { transform: translate(-4%, 3%) rotate(-6deg) scale(1); } to { transform: translate(4%, -3%) rotate(8deg) scale(1.08); } }
.yk-cardwrap .c3 .grain { inset: 0; z-index: 1; opacity: 1; background: linear-gradient(100deg, rgba(7, 10, 15, .42), rgba(7, 10, 15, .08) 60%, transparent); }
.yk-cardwrap .c3 .rim { inset: 0; z-index: 4; border-radius: inherit; padding: 1px;
    background: conic-gradient(from 210deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .04) 22%, rgba(242, 106, 63, .55) 45%, rgba(255, 255, 255, .04) 68%, rgba(143, 200, 230, .4) 85%, rgba(255, 255, 255, .42));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.yk-cardwrap .c-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.yk-cardwrap .c-chip { display: flex; align-items: center; gap: 7px; font: 600 11.5px var(--head); letter-spacing: .02em; color: var(--snow-2); padding: 5px 10px 5px 6px; border-radius: 99px; background: rgba(8, 12, 18, .45); border: 1px solid rgba(255, 255, 255, .12); }
.yk-cardwrap .c-flip { position: relative; margin-left: auto; width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair-2); background: rgba(255, 255, 255, .05); color: var(--snow-2); cursor: pointer; transition: background .2s, color .2s, transform .16s var(--ease); }
.yk-cardwrap .c-flip:before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.yk-cardwrap .c-flip:hover { background: rgba(255, 255, 255, .1); color: var(--snow); }
.yk-cardwrap .c-flip:active { transform: scale(.94); }
.yk-cardwrap .c-flip svg { width: 17px; height: 17px; }
.yk-cardwrap .c3 .face > .c-flip.bk { position: absolute; top: 16px; right: 16px; z-index: 5; }
.yk-cardwrap .c-back { display: flex; gap: 18px; align-items: center; height: 100%; }
.yk-cardwrap .c-back .lbl { margin-bottom: 8px; }
.yk-cardwrap .c-qr { flex: none; background: #eef3f6; border-radius: 16px; padding: 9px; min-width: 122px; min-height: 122px; }
.yk-cardwrap .c-qr img, .yk-cardwrap .c-qr canvas { display: block; width: 104px !important; height: 104px !important; }
.yk-cardwrap .chunks { display: grid; gap: 2px; font: 500 12.5px/1.5 var(--mono); color: var(--snow-2); }
.yk-cardwrap .chunks > span { display: flex; gap: .6em; white-space: nowrap; }
.yk-cardwrap .chunks em { font-style: normal; color: var(--snow-3); }
.yk-cardwrap .chunks b { color: var(--snow); font-weight: 600; }

/* ---------- bottom sheet ---------- */
.yk-sheet { position: fixed; inset: 0; z-index: 11500; }
.yk-sh-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .25s; }
.yk-sh-card { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px; max-height: 88vh; overflow-y: auto;
    background: var(--bg-panel); color: var(--text-main); border-radius: 26px 26px 0 0; padding: 8px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 50px rgba(0, 0, 0, .3); transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.show > .yk-sh-bg { opacity: 1 !important; }
.show > .yk-sh-card { transform: none; }
@media (min-width: 768px) {
    .yk-sh-card { top: 50%; bottom: auto; border-radius: 26px; transform: translateY(-46%) scale(.97); opacity: 0; transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s; padding-bottom: 22px; }
    .show > .yk-sh-card { transform: translateY(-50%); opacity: 1; }
    .yk-sh-grab { display: none; }
}
.yk-sh-grab { width: 38px; height: 5px; border-radius: 3px; background: var(--border); margin: 0 auto 8px; }
.yk-sh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
.yk-sh-head b { font-size: 18px; font-weight: 700; }
.yk-sub { color: var(--text-muted); font-size: 14.5px; line-height: 1.45; margin: 0 0 14px; }
.yk-amt-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 6px 0 12px; }
.yk-amt { width: 100%; min-width: 0; flex: 1; border: none; outline: none; background: none; color: var(--text-main); text-align: right;
    font: 700 52px/1.1 'Unbounded', sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; padding: 0; }
.yk-amt::placeholder { color: color-mix(in srgb, var(--text-main) 25%, transparent); }
.yk-amt-row span { flex: 1; font: 600 18px 'Unbounded', sans-serif; color: #f26a3f; }
.yk-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.yk-chips button { border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 99px;
    background: color-mix(in srgb, var(--text-main) 8%, transparent); color: var(--text-main); transition: transform .15s; }
.yk-chips button:active { transform: scale(.92); }
.yk-in { margin: 0 0 10px !important; }
.yk-ta { font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.6; resize: none; margin-bottom: 4px !important; }
.yk-avail { text-align: center; font-size: 13px; color: var(--text-muted); min-height: 18px; margin: 2px 0 6px; }
.yk-send-go { position: relative; overflow: hidden; }
.yk-send-go .yk-glyph { width: 20px; height: 20px; transition: transform .4s; }
.yk-send-go.busy .yk-glyph { animation: yk-flipcoin .7s linear infinite; }
.yk-send-go.done { background: #3fbf86; color: #fff; }
.yk-send-go.done span { opacity: 0; }
.yk-send-go.done::after { content: ""; position: absolute; width: 10px; height: 18px; border: solid #fff; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); animation: yk-check .3s ease-out both; }
@keyframes yk-check { from { transform: translateY(-2px) rotate(45deg) scale(0); } }
@keyframes yk-flipcoin { to { transform: rotateY(360deg); } }
.yk-shake { animation: yk-shake .4s; }
@keyframes yk-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* recovery phrase */
.yk-secret { position: relative; border-radius: 18px; background: color-mix(in srgb, var(--text-main) 5%, transparent); padding: 14px; cursor: pointer; margin-bottom: 4px; }
.yk-secret .yk-words, .yk-secret .yk-hex { filter: blur(7px); transition: filter .3s; }
.yk-secret.shown .yk-words, .yk-secret.shown .yk-hex { filter: none; }
.yk-reveal { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: 14.5px; transition: opacity .2s; }
.yk-secret.shown .yk-reveal { opacity: 0; pointer-events: none; }
.yk-words { list-style: none; counter-reset: w; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.yk-words li { counter-increment: w; font: 500 14px 'JetBrains Mono', monospace; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text-main) 6%, transparent); }
.yk-words li::before { content: counter(w); color: var(--text-muted); font-size: 11px; margin-right: 6px; }
.yk-hex { font: 13px/1.6 'JetBrains Mono', monospace; word-break: break-all; }

/* paid reaction picker */
.yk-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.yk-tips button { border: none; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px;
    border-radius: 18px; background: color-mix(in srgb, var(--text-main) 6%, transparent); color: var(--text-main); transition: transform .15s, background .15s; }
.yk-tips button .yk-glyph { width: 28px; height: 28px; color: #f26a3f; }
.yk-tips button b { font: 700 17px 'Unbounded', sans-serif; }
.yk-tips button:hover { background: color-mix(in srgb, #f26a3f 14%, transparent); }
.yk-tips button:active { transform: scale(.93); }

/* ---------- reactions ---------- */
.rx-pill.rx-yuki { gap: 5px; }
.rx-pill.rx-yuki .yk-glyph { width: 16px; height: 16px; color: #f26a3f; }
.rx-pill.rx-yuki.mine .yk-glyph, .msg-row.sent .rx-pill.rx-yuki .yk-glyph { color: currentColor; }
.rx-pill.rx-yuki.yk-glow::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 2px #f26a3f; opacity: 0; animation: yk-glow .9s ease-out; pointer-events: none; }
@keyframes yk-glow { 20% { opacity: 1; } to { opacity: 0; transform: scale(1.25); } }
.rxm.rxm-yuki { color: #f26a3f; }
.rxm.rxm-yuki .yk-glyph { width: 26px; height: 26px; }

/* ---------- payment card in chat (a centered service message) ---------- */
.msg-row:has(> .msg-bubble[data-mt="yuki"]), .msg-row:has(> .msg-stack > .msg-bubble[data-mt="yuki"]) { justify-content: center; }
#msgs .msg-row .msg-bubble[data-mt="yuki"], .msg-bubble[data-mt="yuki"] { background: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border: none !important; padding: 0 !important; max-width: min(300px, 86%) !important; }
.msg-bubble[data-mt="yuki"] > .msg-timestamp { justify-content: center; margin-top: 4px; color: var(--text-muted) !important; }
.msg-bubble[data-mt="yuki"] .rx-wrap { justify-content: center; }
.yk-pay { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
    width: 260px; max-width: 100%; padding: 22px 18px 16px; border-radius: 26px; text-decoration: none; color: #eaf0f4; background: #0b1017;
    box-shadow: 0 14px 34px rgba(10, 15, 25, .28), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.yk-pay-mesh { position: absolute; inset: -30%; z-index: -2; filter: blur(30px); animation: yk-drift4 16s ease-in-out infinite alternate;
    background: radial-gradient(40% 40% at 22% 80%, rgba(255, 106, 56, .9), transparent 72%), radial-gradient(36% 40% at 82% 22%, rgba(140, 205, 240, .7), transparent 72%),
        radial-gradient(30% 34% at 78% 84%, rgba(255, 196, 100, .55), transparent 72%); }
.yk-pay::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 10, 15, .15), rgba(7, 10, 15, .55)); }
.yk-pay-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%); transform: translateX(-120%); }
.yk-pay-coin { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; color: #fff;
    background: radial-gradient(circle at 35% 30%, #ffa074, #f26a3f 55%, #c9431b); box-shadow: 0 8px 22px rgba(242, 106, 63, .55), inset 0 2px 0 rgba(255, 255, 255, .35); }
.yk-pay-coin .yk-glyph { width: 30px; height: 30px; }
.yk-pay-amt { font: 700 30px/1.15 'Unbounded', sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.yk-pay-amt small { font-size: 13px; letter-spacing: 0; margin-left: 6px; color: #ffb08f; font-weight: 600; }
.yk-pay-who { font-size: 14px; color: rgba(234, 240, 244, .82); margin-top: 2px; }
.yk-pay-who b { color: #fff; font-weight: 600; }
.yk-pay-memo { font-size: 14px; margin-top: 8px; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); max-width: 100%; overflow-wrap: anywhere; }
.yk-pay-st { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: rgba(0, 0, 0, .28); color: rgba(234, 240, 244, .85); }
.yk-pay-st i { width: 7px; height: 7px; border-radius: 50%; background: #f2c46a; }
.yk-pending .yk-pay-st i { animation: yk-blink 1s ease-in-out infinite; }
.yk-ok .yk-pay-st i { background: #7fdcb0; box-shadow: 0 0 8px #7fdcb0; }
.yk-failed .yk-pay-st i { background: #ff8a78; }
.yk-failed .yk-pay-amt { text-decoration: line-through; opacity: .7; }
/* a fresh payment drops in, the coin spins, the foil sweeps; confirmed = a second sweep + coin hop */
.yk-fresh { animation: yk-in .7s cubic-bezier(.2, 1.3, .4, 1) both; }
.yk-fresh .yk-pay-coin { animation: yk-spin 1s cubic-bezier(.2, .8, .3, 1) .15s both; }
.yk-fresh .yk-pay-shine, .yk-land .yk-pay-shine { animation: yk-sweep 1.1s ease-in-out .35s; }
.yk-land .yk-pay-coin { animation: yk-hop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes yk-in { from { opacity: 0; transform: translateY(24px) scale(.85); } }
@keyframes yk-spin { from { transform: rotateY(-720deg) scale(.3); } }
@keyframes yk-sweep { to { transform: translateX(120%); } }
@keyframes yk-hop { 40% { transform: translateY(-10px) scale(1.12); } }

/* ---------- received banner + flying coins ---------- */
.yk-got { position: fixed; z-index: 12000; left: 50%; top: calc(14px + var(--safe-top, env(safe-area-inset-top, 0px))); transform: translate(-50%, -140%);
    display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 99px; cursor: pointer;
    background: #0b1017; color: #eaf0f4; box-shadow: 0 16px 40px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
    transition: transform .5s cubic-bezier(.2, 1.3, .4, 1); }
.yk-got.show { transform: translate(-50%, 0); }
.yk-got-coin { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #ffa074, #f26a3f 55%, #c9431b); animation: yk-spin 1s cubic-bezier(.2, .8, .3, 1) both; }
.yk-got-coin .yk-glyph { width: 22px; height: 22px; }
.yk-got b { display: block; font: 700 16px 'Unbounded', sans-serif; letter-spacing: -.02em; color: #7fdcb0; }
.yk-got small { font-size: 13px; color: #aab7c3; }
.yk-coin { position: fixed; z-index: 12001; pointer-events: none; color: #f26a3f; display: grid; place-items: center; will-change: transform, opacity; filter: drop-shadow(0 3px 6px rgba(242, 106, 63, .45)); }
.yk-coin .yk-glyph { width: 100%; height: 100%; }
.yk-coin-big { color: #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffa074, #f26a3f 55%, #c9431b); padding: 9px; }
.yk-plus { position: fixed; z-index: 12001; pointer-events: none; font: 700 18px 'Unbounded', sans-serif; color: #f26a3f; text-shadow: 0 2px 10px rgba(242, 106, 63, .5); }
@media (prefers-reduced-motion: reduce) { .yk-pay, .yk-pay *, .yk-hero *, .yk-cardwrap .mesh { animation: none !important; } }

/* wallet header: no separate bar, same background as the page */
#panel-wallet .panel-header { background: transparent; }
#panel-wallet .panel-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; }

/* "Show on my profile" */
.yk-toggle { display: flex; align-items: center; gap: 14px; padding: 14px 16px !important; cursor: pointer; }
.yk-toggle .ap-switch { flex-shrink: 0; }

/* wallet card on a profile */
#pv-yuki:empty { display: none; }
.yk-pw { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; cursor: pointer;
    color: #eaf0f4; background: #0b1017; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); animation: yk-in .5s cubic-bezier(.2, 1.2, .4, 1) both; text-align: left; }
.yk-pw::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(7, 10, 15, .6), rgba(7, 10, 15, .15)); }
.yk-pw:active { transform: scale(.98); }
.yk-pw .yk-pay-coin { width: 46px; height: 46px; margin: 0; flex-shrink: 0; }
.yk-pw .yk-pay-coin .yk-glyph { width: 26px; height: 26px; }
.yk-pw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yk-pw-t small { font-size: 12.5px; color: #aab7c3; }
.yk-pw-t b { font: 700 22px/1.2 'Unbounded', sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yk-pw-t b em { font-style: normal; font-size: 12px; letter-spacing: 0; color: #ffb08f; margin-left: 6px; }
.yk-pw-a { font: 12px 'JetBrains Mono', monospace; color: #7c8995; }
.yk-pw-send { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
    padding: 9px 14px; border-radius: 99px; color: #fff; background: linear-gradient(140deg, #ffa074, #f26a3f 55%, #d9481f); box-shadow: 0 6px 16px rgba(242, 106, 63, .4); }
.yk-pw-send .yk-glyph { width: 15px; height: 15px; }
.yk-pw-send:active { transform: scale(.94); }