/* v3.2.8: Banana Coin (BNNA) bar - slim, ONE line at every width, first thing on the page, scrolls away above the sticky header.
   Icon: the official round coin logo (static/img/bnna-64.png, shown at 22 px). Same colours in every theme (dark leaf green + banana Buy pill; text contrast >= 4.5:1). Safe areas: .wrap already pads left/right with
   max(16px, env(safe-area-inset-*)); the installed app adds the status-bar inset on top. */
.bnna-bar{position:relative;z-index:6;background:linear-gradient(90deg,#0d3528 0%,#13503a 55%,#0d3528 100%);color:#fff8d6;
  border-bottom:1px solid rgba(255,210,63,.4);font:600 13px/1.2 var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif)}
@media(display-mode:standalone){.bnna-bar{padding-top:env(safe-area-inset-top)}}
.bnna-bar [hidden]{display:none!important}
.bnna-row{display:flex;align-items:center;gap:10px;min-height:36px;white-space:nowrap;min-width:0}
.bnna-id{display:inline-flex;align-items:center;gap:6px;min-width:0}
.bnna-logo{display:block;width:22px;height:22px;flex:0 0 22px;border-radius:50%;object-fit:contain}
.bnna-sym{letter-spacing:.04em;color:#ffe27a}
.bnna-name{color:#cfe9da;font-weight:500}
.bnna-price{font-weight:800;font-variant-numeric:tabular-nums;color:#ffffff}
.bnna-chg{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.bnna-chg.up{color:#86efb4}.bnna-chg.down{color:#ffb4a8}
.bnna-info>summary{list-style:none;cursor:pointer;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  color:#cfe9da;font-size:14px;line-height:1;-webkit-user-select:none;user-select:none}
.bnna-info>summary::-webkit-details-marker{display:none}
.bnna-info>summary:hover,.bnna-info[open]>summary{background:rgba(255,255,255,.14);color:#fff}
.bnna-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:min(360px,calc(100vw - 24px));box-sizing:border-box;
  background:var(--panel,#fffdf4);color:var(--ink,#2b2208);border:1px solid var(--line,#f0dfa0);border-radius:12px;padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);white-space:normal;font-weight:500;font-size:13px;line-height:1.45;text-align:left}
.bnna-pop p{margin:0}.bnna-pop p+p{margin-top:6px}
.bnna-pop a{color:var(--brand,#c2410c);font-weight:700}
.bnna-chart{color:#cfe9da;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.bnna-chart:hover{color:#fff}
.bnna-buy{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 14px;border-radius:999px;
  background:#ffd23f;color:#2b2208!important;font-weight:800;font-size:13px;text-decoration:none;box-shadow:0 1px 0 rgba(0,0,0,.25);flex:0 0 auto}
.bnna-buy:hover,.bnna-buy:focus-visible{background:#ffc400;color:#2b2208}
.bnna-buy:active{transform:scale(.97)}
@media(max-width:720px){
  .bnna-name{display:none}
  .bnna-row{gap:8px;min-height:40px}
  .bnna-buy{min-height:32px;padding:0 13px}
  .bnna-info>summary{width:32px;height:32px}
}
@media(max-width:400px){.bnna-chart{display:none}.bnna-row{gap:7px}}
@media(max-width:360px){.bnna-row{gap:6px}.bnna-buy{padding:0 11px}.bnna-info>summary{width:28px}}
@media(max-width:340px){.bnna-chg{display:none}}
@media(prefers-reduced-motion:reduce){.bnna-buy:active{transform:none}}
@media print{.bnna-bar{display:none!important}}

/* v3.2.8: /bnna - one big Buy button, phone-first; big tap targets; safe areas come from .wrap (left/right) and the tab bar (bottom) */
.bnna-guide{max-width:560px;margin:0 auto}
.bg-hero{text-align:center;padding:18px 4px 6px}
.bg-logo{display:block;width:88px;height:88px;margin:0 auto 8px;border-radius:50%}
.bg-hero h1{margin:0;font-size:1.6rem;line-height:1.2}
.bg-sym{color:var(--muted);font-size:.8em;font-weight:700;letter-spacing:.04em}
.bg-price{margin:6px 0 14px;font-size:1.9rem;line-height:1.2;font-variant-numeric:tabular-nums;min-height:1.2em}
.bg-price .muted{font-size:1rem}
.bg-buy{display:flex;align-items:center;justify-content:center;width:100%;max-width:420px;min-height:60px;margin:0 auto;box-sizing:border-box;
  border-radius:999px;background:#ffd23f;color:#2b2208!important;font-weight:900;font-size:1.25rem;text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,.25),0 8px 24px rgba(255,196,0,.35)}
.bg-buy:hover,.bg-buy:focus-visible{background:#ffc400}
.bg-buy:active{transform:scale(.98)}
.bg-deep{display:none;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.bg-deep a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--chip);
  color:var(--ink);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
@media(pointer:coarse){.bg-deep{display:flex}}
html.bnna-has-wallet .bg-deep{display:none}
.bg-need{margin:16px 0 0;font-size:15px}
.bg-need a{font-weight:800}
.bg-add{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:14px auto 0;padding:0 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font:700 15px/1.2 var(--sans,system-ui,sans-serif);cursor:pointer;max-width:100%}
.bg-add:active{transform:scale(.98)}
.bg-tip{margin:8px auto 0;max-width:420px;font-size:14px;color:var(--muted)}
.bg-warn{margin:18px auto 0;max-width:460px;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.45;
  background:color-mix(in srgb,var(--coral,#ff6b57) 13%,var(--panel));border:1px solid color-mix(in srgb,var(--coral,#ff6b57) 45%,transparent)}
.bg-disc{margin:10px 0 0}
.bg-more{margin:22px 0 10px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.bg-more>summary{cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:center;font-weight:800;list-style:none}
.bg-more>summary::-webkit-details-marker{display:none}
.bg-more>summary::after{content:"▾";margin-left:6px}.bg-more[open]>summary::after{content:"▴"}
.bg-more-body{padding:0 16px 14px;font-size:15px;line-height:1.5}
.bg-more-body h2{font-size:1.05rem;margin:16px 0 4px}
.bg-more-body ul,.bg-more-body ol{margin:4px 0;padding-left:1.25em}.bg-more-body li{margin:4px 0}
.bg-more-body code{font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;word-break:break-all}
.bg-links a{font-weight:700}
@media(prefers-reduced-motion:reduce){.bg-buy:active,.bg-add:active{transform:none}}