/* My bullion demo: additions on top of the v0.3 base.css */
:root{--down:#F2A08B;--down-dim:#D98A76}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg)}
#app{position:relative;width:100%;max-width:430px;height:100%;min-height:600px;margin:0 auto;overflow:hidden}
.sb{height:max(47px,env(safe-area-inset-top));padding:0}
.scr{top:max(47px,env(safe-area-inset-top));bottom:max(84px,calc(50px + env(safe-area-inset-bottom)));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scr::-webkit-scrollbar{display:none}
.scr.lock{bottom:max(34px,env(safe-area-inset-bottom))}
.nav{height:max(84px,calc(50px + env(safe-area-inset-bottom)))}
.nav a{cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

/* lock */
.mark{width:72px;height:72px;border-radius:22px;background:linear-gradient(160deg,#1A2C46,#0E1A2C);border:1px solid rgba(226,184,79,.4);display:flex;align-items:center;justify-content:center;margin-top:40px;box-shadow:0 8px 28px rgba(0,0,0,.35);flex:none}
.appname{font-size:28px;font-weight:700;letter-spacing:-.5px;margin-top:14px}
.unlock{font-size:17px;font-weight:600;color:var(--ivory);margin-top:22px;letter-spacing:-.2px}
.dots{display:flex;gap:18px;margin-top:14px}
.dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--gold);display:block}
.dots i.on{background:var(--gold)}
.dots.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pin-msg{min-height:20px;margin-top:8px;font-size:14px;font-weight:600;color:var(--down);letter-spacing:-.1px;text-align:center}
.pin-msg.busy{color:var(--muted)}
.keypad{display:grid;grid-template-columns:repeat(3,70px);gap:12px 26px;margin-top:6px}
.keypad button{width:70px;height:70px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ivory);font:inherit;font-size:28px;font-weight:550;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.keypad button:active{background:#22385A}
.keypad button.del{background:transparent;border-color:transparent;color:var(--muted)}
.keypad button:disabled{opacity:.45}
.idle-note{margin-top:4px}
.lock-ex{margin-top:auto;margin-bottom:22px;padding-top:12px}

/* app */
.offline{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:600;color:var(--gold-soft);letter-spacing:-.1px;line-height:1.3}
.offline svg{flex:none}
.money.down .usd{color:var(--down)}
.money.down .cad{color:var(--down-dim)}
.seg button{cursor:pointer}
.chart-axis{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:var(--dim);margin-top:2px;padding:0 2px}
.place .toggle{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;font-weight:600;min-height:32px;padding:0;margin-top:6px;display:flex;align-items:center;gap:4px;cursor:pointer}
.place .toggle svg{transition:transform .15s}
.place .toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.place-items{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.place-items .item{background:#0C1726;min-height:64px;padding:8px 10px}
.buy .chip{height:24px;font-size:12px}
.buys-list{padding:2px 4px 2px}
.buy{padding:12px 0}
.invoice-note{font-size:14px;font-weight:550;color:var(--muted);letter-spacing:-.15px;line-height:1.35;padding:2px 0 10px}
.foot-note{font-size:12px;font-weight:500;color:var(--dim);text-align:center;margin:12px 0 4px;letter-spacing:-.05px}

/* PIN: 6+ digits or passphrase */
.pin-policy{margin-top:8px;font-size:13px;font-weight:500;color:var(--muted);text-align:center;letter-spacing:-.1px;line-height:1.35;max-width:280px}
.dots{flex-wrap:wrap;justify-content:center;max-width:280px}
.keypad button.ok{background:rgba(226,184,79,.16);border-color:var(--line-strong);color:var(--gold-soft);font-size:18px;font-weight:700}
.pass-wrap{display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px;margin-top:16px}
.pass-wrap[hidden]{display:none!important}
.pass-wrap input{height:48px;border-radius:12px;border:1px solid var(--line);background:var(--input);color:var(--ivory);font:inherit;font-size:16px;padding:0 12px;width:100%}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#pinToggle{margin-top:8px}