/* 帳本監看大螢幕（1920×1080）。以 rem 隨視窗等比縮放：1920×1080 時 1rem＝16px。 */
html { font-size: min(0.8334vw, 1.4815vh); }
body.ledger { height: 100vh; overflow: hidden; background: #f7f7f8; font-size: 1rem; }
.l-wrap { height: 100vh; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; }

/* 頂列 */
.l-top { display: flex; align-items: center; gap: 1.5rem; height: 5.75rem; padding: 0 2.25rem; background: #fff; border-bottom: 1px solid var(--line); }
.l-top .logo { height: 3.1rem; width: auto; }
.l-top .vr { width: 1px; height: 2.75rem; background: var(--line-2); }
.l-title b { display: block; font-size: 1.85rem; font-weight: 700; letter-spacing: .03em; line-height: 1.2; }
.l-title small { display: block; font-size: 1.05rem; color: var(--ink-3); }
.l-top .sp { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: .75rem; height: 3rem; padding: 0 1.1rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg-2); font-size: 1.15rem; color: var(--ink-2); white-space: nowrap; }
.chip b { color: var(--ink); font-weight: 600; font-size: 1.3rem; }
.chip .sep { width: 1px; height: 1.3rem; background: var(--line-2); }
.l-top .conn-pill { height: 3rem; padding: 0 1.1rem; font-size: 1.1rem; border-radius: 1.5rem; }
.sim-tag { font-size: 1rem; color: var(--bot-red); border: 1px solid var(--bot-red-20); background: var(--bot-redlight-10); border-radius: .4rem; padding: .3rem .7rem; white-space: nowrap; }
.l-top .btn { height: 3rem; font-size: 1.1rem; padding: 0 1.2rem; min-height: 0; }

/* 部位：四家銷售機構＋臺銀（發行機構） */
.l-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 1.1rem; padding: 1.2rem 2.25rem 0; }
.grp { position: relative; background: #fff; border: 1px solid var(--line); border-radius: .9rem; padding: .95rem 1.25rem 1rem; box-shadow: var(--shadow); transition: box-shadow .35s, border-color .35s, transform .35s; }
.grp-h { display: flex; align-items: center; gap: .6rem; font-size: 1.35rem; font-weight: 700; margin-bottom: .45rem; white-space: nowrap; }
.grp-h img { height: 2.1rem; width: 2.1rem; object-fit: contain; flex: none; }
.grp-h small { font-size: 1rem; font-weight: 400; color: var(--ink-3); }
.bk { border-top: .35rem solid var(--c); }
.bot { border-top: .35rem solid var(--bot-red); background: linear-gradient(180deg, #fff 0, #fff 60%, #fdf6f8 100%); }
.grp.hot { border-color: var(--c, var(--bot-red)); box-shadow: 0 0 0 .2rem var(--c, var(--bot-red)), 0 .8rem 2rem rgba(0, 0, 0, .12); transform: translateY(-.15rem); }
.bot.hot { --c: var(--bot-red); }
.grp.fail { box-shadow: 0 0 0 .2rem var(--roll), 0 .8rem 2rem rgba(196, 97, 15, .15); }
.hot-tag { margin-left: auto; font-size: .95rem; font-weight: 600; color: #fff; background: var(--c, var(--bot-red)); border-radius: .9rem; padding: .15rem .65rem; display: none; }
.grp.hot .hot-tag, .grp.fail .hot-tag { display: inline-block; animation: pop .35s ease; }
.grp.hot .grp-h small, .grp.fail .grp-h small { display: none; }
.grp.fail .hot-tag { background: var(--roll); }
.grp-n { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; }
.n { min-width: 0; position: relative; margin-top: .35rem; }
.n .k { font-size: 1.05rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n .v { display: flex; align-items: baseline; gap: .4rem; font-size: 2.15rem; font-weight: 600; line-height: 1.2; white-space: nowrap; letter-spacing: .01em; transition: color .4s; }
.n .v .u { font-size: 1.1rem; font-weight: 400; color: var(--ink-3); }
.n.hero .v { color: var(--bot-red); font-size: 2.9rem; }
.n .v.up, .bk-f span.up { color: var(--ok); }
.n .v.down, .bk-f span.down { color: var(--roll); }
.bk-f { display: flex; justify-content: space-between; gap: .5rem; margin-top: .55rem; padding-top: .5rem; border-top: 1px dashed var(--line-2); font-size: 1rem; color: var(--ink-3); white-space: nowrap; }
.bk-f b { color: var(--ink-2); font-weight: 600; }
.delta { position: absolute; right: 0; top: -.1rem; display: inline-block; height: 1.75rem; line-height: 1.75rem; padding: 0 .5rem; border-radius: .9rem; font-size: .98rem; font-weight: 700; opacity: 0; transform: translateY(.3rem); transition: opacity .3s, transform .3s; }
.delta.show { opacity: 1; transform: none; }
.delta.up { background: var(--ok-bg); color: var(--ok); }
.delta.down { background: var(--roll-bg); color: var(--roll); }

/* 同一本帳：每家機構接到同一條帳本 */
.l-bus { padding: 0 2.25rem; }
.taps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 1.1rem; height: 1.1rem; }
.tap { position: relative; }
.tap i { position: absolute; left: 50%; top: 0; bottom: 0; width: .3rem; margin-left: -.15rem; background: var(--line-2); border-radius: .15rem; }
.tap.on i { background: var(--bot-red); box-shadow: 0 0 .6rem var(--bot-red); animation: tapPulse 1.2s ease 3; }
.tap.fail i { background: var(--roll); }
@keyframes tapPulse { 50% { opacity: .35; } }
.bus { display: flex; align-items: center; gap: 1.25rem; height: 3.1rem; padding: 0 1.5rem; border-radius: .8rem; background: linear-gradient(90deg, #7d0030, #9a0036 40%, #b3264f); color: #fff; font-size: 1.12rem; box-shadow: 0 .4rem 1.2rem rgba(154, 0, 54, .2); }
.bus > b { font-size: 1.3rem; letter-spacing: .04em; white-space: nowrap; }
.bus > span { opacity: .92; white-space: nowrap; }
.bus .sp { flex: 1; }
.bus .mono { font-size: 1.05rem; }
.bus .mono b { font-weight: 700; color: #ffe3a8; }

/* 主區 */
.l-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1rem 2.25rem 1.1rem; min-height: 0; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: .9rem; box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel-h { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); }
.panel-h h2 { margin: 0; font-size: 1.55rem; font-weight: 700; }
.panel-h p { margin: 0; font-size: 1.05rem; color: var(--ink-3); }
.panel-h .sp { flex: 1; }
.panel-h .live { font-size: 1.05rem; }
.feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.vchip { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: .6rem; height: 2.3rem; padding: 0 .4rem 0 1rem; border-radius: 1.15rem; border: 1.5px solid #e2c27a; background: #fff8e6; color: #7a5600; font-size: 1.1rem; font-weight: 600; white-space: nowrap; }
.vchip b { font-family: var(--mono); font-size: 1.25rem; letter-spacing: .05em; color: var(--ink); }
.vchip em { font-style: normal; height: 1.7rem; line-height: 1.7rem; padding: 0 .7rem; border-radius: .85rem; background: #f0b429; color: #fff; font-size: 1rem; }
.vchip.REDEEMED { border-color: #c9d6cd; background: #f1f6f2; color: var(--ink-3); }
.vchip.REDEEMED b { color: var(--ink-3); text-decoration: line-through; }
.vchip.REDEEMED em { background: #2e7d4f; }
.vchip.changed { animation: vFlash 3.5s ease; }

/* 交易卡 */
.tx { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.25rem; padding: 1.1rem 1.5rem 1.1rem 1.25rem; border-bottom: 1px solid #f0f0f2; border-left: .4rem solid transparent; position: relative; }
.tx.enter { animation: txIn .6s cubic-bezier(.2, .7, .2, 1); }
.tx.fresh { background: #fffbea; border-left-color: var(--bot-red); transition: background 3s ease, border-color 3s ease; }
.tx.bad { border-left-color: var(--roll); background: #fffaf4; }
@keyframes txIn { from { opacity: 0; transform: translateY(-2.5rem); max-height: 0; } to { opacity: 1; transform: none; max-height: 20rem; } }
.blk { text-align: left; }
.blk span { display: block; font-size: .95rem; color: var(--ink-3); }
.blk b { display: block; font-size: 2.1rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.blk time { display: block; font-size: 1.05rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tx .h { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.tag { flex: none; display: inline-flex; align-items: center; height: 2.1rem; padding: 0 .8rem; border-radius: .4rem; font-size: 1.15rem; font-weight: 600; }
.tag.BUY { background: #e6f2ff; color: #0b5cad; }
.tag.SELL { background: #eef0ff; color: #4a3fb0; }
.tag.APPLY { background: var(--warn-bg); color: var(--warn); }
.tag.REDEEM { background: var(--bot-red-10); color: var(--bot-red); }
.tag.GENESIS { background: var(--bg-3); color: var(--ink-2); }
.tag.FAIL { background: var(--roll); color: #fff; }
.tx .t { font-size: 1.6rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-chip { flex: none; display: inline-flex; align-items: center; gap: .45rem; height: 2.1rem; padding: 0 .75rem 0 .3rem; border-radius: 1.05rem; border: 1.5px solid var(--c); color: var(--c); background: #fff; font-size: 1.12rem; font-weight: 700; white-space: nowrap; }
.who-chip img { width: 1.55rem; height: 1.55rem; object-fit: contain; }
.panel-h .vcount { font-size: 1.1rem; color: var(--ink-2); white-space: nowrap; }
.panel-h .vcount b { font-size: 1.35rem; color: var(--ink); }
.vc .from { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--ink); }
.vc .from img { width: 1.35rem; height: 1.35rem; object-fit: contain; }
.vc .arr { margin: 0 .45rem; color: var(--bot-red); font-weight: 700; }
.tx .d { font-size: 1.15rem; color: var(--ink-2); margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx .d.reason { color: var(--roll); font-weight: 500; }
.ksteps { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }
.st { display: inline-flex; align-items: center; gap: .55rem; height: 2.5rem; padding: 0 1rem 0 .45rem; border-radius: 1.25rem; background: var(--bg-3); color: var(--ink-3); font-size: 1.12rem; white-space: nowrap; transition: background .3s, color .3s; }
.st i { width: 1.65rem; height: 1.65rem; border-radius: 50%; border: 2px solid #c8c8cc; display: grid; place-items: center; background: #fff; transition: all .3s; }
.st i svg { width: 1.05rem; height: 1.05rem; opacity: 0; }
.st.on { background: var(--ok-bg); color: var(--ok); font-weight: 500; }
.st.on i { background: var(--ok); border-color: var(--ok); color: #fff; animation: pop .35s ease; }
.st.on i svg, .st.failed i svg { opacity: 1; }
.st.failed { background: #fdeaea; color: var(--bad); font-weight: 600; }
.st.failed i { background: var(--bad); border-color: var(--bad); color: #fff; animation: pop .35s ease; }
.st.skipped { text-decoration: line-through; color: var(--ink-4); }
.st.skipped i { border-style: dashed; }
@keyframes pop { 0% { transform: scale(.5); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.tx .hash { margin-top: .6rem; font-family: var(--mono); font-size: 1rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx .hash b { color: var(--ink-2); font-weight: 500; }
.stamp { position: absolute; right: 1.5rem; bottom: 1rem; border: 2px solid var(--roll); color: var(--roll); border-radius: .4rem; padding: .2rem .7rem; font-size: 1.1rem; font-weight: 700; transform: rotate(-4deg); background: #fff; opacity: 0; }
.tx.bad .stamp.show { opacity: 1; animation: pop .35s ease; }
.tx.compact .ksteps, .tx.compact .hash { display: none; }
.tx.compact { padding-top: .8rem; padding-bottom: .8rem; }
.tx.compact .blk b { font-size: 1.6rem; }

/* 提領憑證 */
.vc { padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f2; }
.vc.enter { animation: vFlash 3.5s ease; }
@keyframes vFlash { 0%, 30% { background: var(--new-bg); } 100% { background: #fff; } }
.vc .r1 { display: flex; align-items: center; gap: 1rem; }
.vc .s { font-family: var(--mono); font-size: 1.85rem; font-weight: 600; letter-spacing: .06em; }
.vc .badge { height: 2rem; padding: 0 .8rem; border-radius: 1rem; font-size: 1.05rem; margin-left: auto; }
.vc .r2 { font-size: 1.15rem; color: var(--ink-2); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc .r3 { font-size: .95rem; color: var(--ink-3); font-family: var(--mono); }
.vc.REDEEMED .s { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.l-empty { padding: 2.5rem 1.5rem; font-size: 1.2rem; color: var(--ink-3); text-align: center; }

/* 底部 */
.l-foot { display: flex; align-items: center; gap: 1.5rem; height: 4rem; padding: 0 2.25rem; background: #fff; border-top: 1px solid var(--line); font-size: 1.2rem; }
.l-foot .claim { font-weight: 700; color: var(--bot-red); font-size: 1.35rem; }
.l-foot .old { color: var(--ink-3); text-decoration: line-through; }
.l-foot .arrow { color: var(--bot-red); }
.l-foot .sp { flex: 1; }
.l-foot .sim-note { font-size: 1rem; margin: 0; }

/* 重置確認 */
.modal { width: min(30rem, 100%); }
.tx .body { min-width: 0; }