/* B4/B5-only primitives. The reviewed mobile shell and theme own geometry/typeface. */
body.b45-body { margin:0; }
body.b45-body *, body.b45-body *::before, body.b45-body *::after { box-sizing:border-box; }
.b45-page { position:relative; width:var(--mobile-shell-content-width); height:100%; margin:0 auto; color:var(--wm-color-ink); background:var(--wm-color-canvas); font-size:12px; line-height:1.5; }
.b45-page :where(button,input,select) { font:inherit; }
.b45-page button,.b45-page a { -webkit-tap-highlight-color:transparent; }
.b45-page button { cursor:pointer; }
.b45-page button:disabled { cursor:default; }
.b45-page a { color:inherit; text-decoration:none; }
.b45-page [hidden],.b45-overlay[hidden] { display:none!important; }
.b45-topbar { position:absolute; z-index:11; top:var(--mobile-shell-statusbar-height); left:0; right:0; height:56px; display:grid; grid-template-columns:40px minmax(0,1fr) 40px; align-items:center; padding:0 8px; background:var(--wm-color-surface); }
.b45-topbar h1 { margin:0; text-align:center; font-size:16px; font-weight:700; line-height:22px; }
.b45-back { width:40px; height:40px; display:grid; place-items:center; border:0; background:transparent; padding:0; }
.b45-back-icon { display:block; width:12px; height:12px; border-bottom:2px solid var(--wm-color-ink); border-left:2px solid var(--wm-color-ink); transform:translateX(3px) rotate(45deg); }
.b45-icon { display:inline-block; width:20px; height:20px; object-fit:contain; vertical-align:middle; flex:none; }
.b45-scroll { position:absolute; top:81px; bottom:0; left:0; right:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; padding:0 10px 24px; }
.b45-scroll::-webkit-scrollbar { display:none; }
.b45-page.has-footer .b45-scroll,.b45-scroll.has-footer { bottom:80px; }
.b45-footer { position:absolute; z-index:15; bottom:0; left:0; right:0; min-height:80px; padding:10px 12px 20px; background:var(--wm-color-surface); border-top:1px solid var(--wm-color-line); display:flex; align-items:center; gap:8px; }
.b45-primary { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 16px; border:0; border-radius:999px; background:var(--wm-color-primary-strong); color:#fff; font-size:15px; font-weight:600; line-height:20px; }
.b45-primary:disabled { background:var(--wm-color-disabled-strong); color:#fff; }
.b45-outline { background:#fff; color:var(--wm-color-action); border:1px solid var(--wm-color-primary); border-radius:999px; }
.b45-demo { display:inline-flex; align-items:center; gap:5px; color:var(--wm-color-action); background:var(--wm-color-primary-soft); border-radius:5px; padding:3px 8px; font-size:11px; font-weight:400; }
.b45-page :focus-visible,.b45-overlay :focus-visible { outline:2px solid var(--wm-color-primary); outline-offset:3px; }
.b45-toast { position:absolute; z-index:70; left:20px; right:20px; bottom:96px; padding:11px 14px; border-radius:10px; background:var(--wm-color-ink); color:white; font:12px/1.6 var(--wm-font-ui); text-align:center; box-shadow:0 4px 18px rgba(var(--wm-ink-rgb),.15); }
.b45-overlay { position:absolute; inset:0; z-index:60; background:rgba(20,30,46,.58); display:flex; align-items:center; justify-content:center; padding:22px; font-family:var(--wm-font-ui); }
.b45-dialog { background:var(--wm-color-surface); color:var(--wm-color-ink); border-radius:18px; padding:20px 18px; width:100%; max-height:85%; overflow:auto; }
.b45-dialog h2 { font-size:16px; line-height:22px; margin:0 0 12px; }
.b45-dialog p { margin:0 0 12px; font-size:12px; line-height:1.7; }
.b45-dialog .b45-dialog-note { padding:10px; background:var(--wm-color-primary-soft); border-radius:10px; color:var(--wm-color-muted-strong); }
.b45-dialog button { width:100%; margin-top:5px; font-family:inherit; }