@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@keyframes pt-out-l { 50% { opacity: 1; } to { transform: translateX(-30%); opacity: 0; } }
@keyframes pt-in-r { from { transform: translateX(100%); } }
@keyframes pt-out-r { 50% { opacity: 1; } to { transform: translateX(30%); opacity: 0; } }
@keyframes pt-in-l { from { transform: translateX(-100%); } }
html.tn-fwd::view-transition-old(root) { animation: pt-out-l .35s ease both; }
html.tn-fwd::view-transition-new(root) { animation: pt-in-r .35s ease both; }
html.tn-back::view-transition-old(root) { animation: pt-out-r .35s ease both; }
html.tn-back::view-transition-new(root) { animation: pt-in-l .35s ease both; }
html.tn-fwd::view-transition-new(root), html.tn-back::view-transition-new(root) { z-index: 2; }
.receipt{ transition: box-shadow .3s ease; }
html.tn-fwd .receipt, html.tn-back .receipt{ box-shadow: none !important; }

/* 換頁載入中的骨架畫面 */
html.skel-on .receipt{ min-height:calc(100vh - 56px); }
html.skel-on header .gear-btn, html.skel-on header .sync-inv-btn, html.skel-on header .credit-ring{ pointer-events:none; }
#skel{ position:absolute; left:0; right:0; bottom:0; z-index:35; background:var(--t-surface,#fff); padding:0 22px; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
#skel .sk{ display:block; position:relative; overflow:hidden; background:var(--t-skel,#ececf0); border-radius:12px; }
#skel .sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation:sk-run 1.3s ease-in-out infinite; }
@keyframes sk-run{ to{ transform:translateX(100%); } }
#skel .sk-tot{ box-sizing:border-box; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--t-line,#e8e8ed); }
#skel .sk-ctl{ padding:14px 0; }
#skel .sk-seg{ height:36px; border-radius:10px; }
#skel .sk-tool{ display:flex; align-items:center; gap:8px; height:32px; }
#skel .sk-tool .sk{ height:32px; border-radius:980px; }
#skel .sk-tool-pad{ padding:8px 0 14px; }
#skel .sk-btns{ display:flex; gap:8px; margin:14px 0 20px; }
#skel .sk-btns .sk{ flex:1; height:80px; border-radius:18px; }
#skel .sk-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid transparent; }
#skel .sk-av{ flex:none; width:38px; height:38px; border-radius:50%; }
#skel .sk-col{ flex:1; display:flex; flex-direction:column; gap:7px; }
#skel .sk-card{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:6px 0; }
#skel .sk-card .sk-btns{ width:100%; margin:0; }
#skel .sk-gap{ height:12px; }
#skel .sk-date{ padding:16px 0 0; height:35px; box-sizing:border-box; }
#skel .sk-row-e{ padding:12px 2px; border-bottom:1px solid var(--t-line,#e8e8ed); }
#skel .sk-r{ flex:none; align-items:flex-end; gap:6px; }