* { box-sizing:border-box }
body { margin:0; background:radial-gradient(ellipse at top,#4e0c0b,#140505 80%) fixed; color:#fff6e5; font:16px/1.5 system-ui,sans-serif }
main { max-width:640px; margin:auto; background:#1b0505; box-shadow:0 0 60px #140000; padding-bottom:calc(76px + env(safe-area-inset-bottom)) }
main img { display:block; width:100%; height:auto }
.primary { display:grid; gap:4px; padding:8px }
a { display:block; text-decoration:none; color:inherit }
a[href]:hover { filter:brightness(1.09) }
:focus-visible { outline:3px solid white; outline-offset:-4px }
.panel { margin:10px 7px; padding:clamp(14px,3vw,23px); border:1px solid #e0ac4b; border-radius:18px; background:linear-gradient(145deg,#611110,#320507 60%,#260606) }
header,.list-title,li { display:flex; align-items:center; justify-content:space-between; gap:8px }
.brand { font:bold italic 21px/1 system-ui; color:#ffdf8c; letter-spacing:-1px }
.brand span { color:#ff7764 }
.demo,button { color:#ffe0a7; border:1px solid #a56947; background:#44100e; border-radius:20px; padding:4px 10px; font:inherit; font-size:12px }
.summary { text-align:center; padding:16px 0; border-bottom:1px solid #a25734 }
h1,h2 { margin:0; font-size:17px }
#total { color:#ffdd92; font-size:clamp(34px,9vw,54px); line-height:1.3; font-variant-numeric:tabular-nums }
.list-title { margin:16px 0 10px }
button { cursor:pointer }
ul { padding:0; margin:0; list-style:none }
li { padding:9px 11px; border:1px solid #753a2f; border-radius:10px; background:#350b0c; margin-top:5px }
li img { width:32px; height:32px; border-radius:7px }
.bank { flex:1; min-width:0; font-weight:650 }
small { display:block; color:#e0bcb0; font-size:11px }
.amount { text-align:right; font-weight:bold; color:#ffdc86 }
.amount small { color:#a7e7b2 }
.dock { position:fixed; bottom:0; width:min(100%,640px); left:50%; transform:translateX(-50%); display:flex; gap:6px; padding:8px 7px calc(8px + env(safe-area-inset-bottom)); background:#310707; border-top:1px solid #d79c46 }
.dock a { flex:1; padding:10px 0; text-align:center; border-radius:9px; border:1px solid #b5823d; font-size:clamp(13px,3vw,16px); font-weight:700 }
.dock a:nth-child(2) { background:linear-gradient(#ffe28a,#dfa237); color:#481009 }
.dock a:last-child { background:#087341; border-color:#39a36a }
#feed { overflow:hidden }
.panel { padding:8px; border:2px solid #c98f39; background:linear-gradient(138deg,#87181b,#3b040a 62%,#660b10); box-shadow:inset 0 0 0 2px #762a17 }
.summary,.list-title,.ledger { border:1px solid #d59e46; border-radius:14px; background:linear-gradient(125deg,#510c14,#280408) }
.summary { padding:12px 8px; text-align:center }
.live-brand { display:inline-block; color:#ffdb80; border:1px solid #b8883e; border-radius:20px; padding:2px 13px; font:bold 11px/1.7 system-ui }
.summary h1 { margin-top:5px; font-size:15px }
#total { display:block; color:#fff5d2; font-weight:850; text-shadow:0 0 12px #d18b4080 }
.list-title { margin:7px 0; padding:9px 12px; justify-content:flex-start }
.list-title b { margin-left:auto; border-radius:18px; padding:4px 9px; color:#ffd273; background:#710e1b; font-size:12px }
.list-title h2 { font-size:15px }
#signal { width:9px;height:9px;border-radius:50%;background:#bf9961 }
#signal.connected { background:#37e49c;box-shadow:0 0 7px #37e49c }
.ledger { padding:6px }
.ledger li { margin:0 0 5px; border-color:#a36d33; background:linear-gradient(110deg,#59131a,#31060b) }
.ledger li:last-child { margin:0 }
.bank { overflow-wrap:anywhere }
.amount small { display:table;margin-left:auto;padding:0 6px;background:#097942;color:#fff;border-radius:12px }
#empty { text-align:center; padding:26px 8px;color:#eed2b5;font-size:14px }
@media(prefers-reduced-motion:no-preference){.incoming { animation:slide .45s ease-out } @keyframes slide { from { transform:translateY(-12px);opacity:.2 } }}
#status[hidden] { display:none }