/* Shared FUTPEPI menu layout for browsers and the native app. */
body.app-mode { padding-bottom: calc(76px + env(safe-area-inset-bottom)); padding-top: env(safe-area-inset-top); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
body.app-mode .back-to-top, body.app-mode .adsbygoogle, body.app-mode .black-friday-banner-container { display: none !important; }
body.app-mode .topMargin { margin-top: 10px !important; }
/* Keep navigation below Bootstrap's backdrop (1040) and dialogs (1050). */
.app-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: stretch; height: calc(76px + env(safe-area-inset-bottom)); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--fp-surface, #fff); border-top: 1px solid var(--fp-line, #e8ebe5); font-family: var(--fp-font, "Segoe UI", sans-serif); }
.app-tab { flex: 1 1 0; min-width: 0; padding: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--fp-muted, #646c61); font-size: 11px; line-height: 1.4; text-decoration: none !important; user-select: none; }
.app-tab-icon { display: grid; place-items: center; width: 38px; height: 29px; border-radius: 8px; }
.app-tab .fp-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-tab:hover, .app-tab:active { color: var(--fp-ink, #242821); }
.app-tab-active { color: var(--fp-ink, #242821); font-weight: 700; }
.app-tab-active .app-tab-icon { background: var(--fp-yellow, #ffc210); color: #28220b; }
.app-tab:focus-visible { outline: 3px solid var(--fp-ink, #242821); outline-offset: -3px; border-radius: 8px; }
@media (max-width: 360px) { .app-tabbar { padding-left: 2px; padding-right: 2px; } .app-tab { font-size: 10px; padding: 1px; } }

@media (max-width: 420px) { .app-tab { font-size: clamp(9px, 2.6vw, 11px); } }