.mbb-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99990;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;box-sizing:border-box;min-height:74px;padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));background:var(--mbb-bg);border-radius:0 0 10px 10px;box-shadow:0 -2px 14px #0004;font-family:inherit;isolation:isolate}
.mbb-nav .mbb-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;min-width:0;min-height:58px;padding:0 2px 3px;color:var(--mbb-text);text-decoration:none;font-size:11px;font-weight:600;line-height:1.35;text-align:center;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.mbb-nav .mbb-icon{display:flex;align-items:center;justify-content:center;width:23px;height:23px;flex-shrink:0}
.mbb-nav svg{display:block;width:100%;height:100%;fill:currentColor}
.mbb-nav .mbb-active,.mbb-nav .mbb-item:hover{color:var(--mbb-accent)}
.mbb-nav .mbb-item:focus-visible{outline:2px solid var(--mbb-accent);outline-offset:-2px;border-radius:6px}
.mbb-nav .mbb-center{position:relative}
.mbb-nav .mbb-center .mbb-icon{position:absolute;top:-25px;width:58px;height:58px;border-radius:50%;color:#292516;background:var(--mbb-accent);box-shadow:0 7px 0 #8b692c,0 10px 15px #0006}
.mbb-nav .mbb-center svg{width:25px;height:25px}
.mbb-nav .mbb-label{max-width:100%;overflow-wrap:anywhere}
.mbb-nav .mbb-center .mbb-label{padding-top:34px}
.mbb-spacer{display:none;height:calc(100px + env(safe-area-inset-bottom,0px))}

/* Three dark designs */
.mbb-nav{border-top:1px solid #ffffff14;border-radius:0}
.mbb-nav .mbb-center .mbb-icon{background:var(--mbb-accent);color:var(--mbb-accent);box-shadow:0 5px 0 #080808,0 9px 18px #0007;border:1px solid #ffffff26;box-sizing:border-box}
.mbb-nav .mbb-center .mbb-label{color:var(--mbb-accent)}
.mbb-nav.mbb-floating{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:9px 6px;border:1px solid #ffffff24;border-radius:24px;box-shadow:0 12px 32px #0007}
.mbb-nav.mbb-floating .mbb-center .mbb-icon{top:-21px;border-radius:19px;box-shadow:0 5px 14px #0007}
.mbb-nav.mbb-floating .mbb-active:not(.mbb-center){background:#ffffff0b;border-radius:16px}
.mbb-nav.mbb-pill{padding-top:10px;border-radius:18px 18px 0 0;box-shadow:0 -6px 22px #0004}
.mbb-nav.mbb-pill .mbb-center{justify-content:center;gap:4px;border:1px solid #ffffff20;border-radius:20px;background:var(--mbb-accent);margin:0 2px;padding:5px 2px;box-shadow:0 3px 8px #0004}
.mbb-nav.mbb-pill .mbb-center .mbb-icon{position:static;width:23px;height:23px;border:0;box-shadow:none;background:transparent;border-radius:0}
.mbb-nav.mbb-pill .mbb-center svg{width:23px;height:23px}
.mbb-nav.mbb-pill .mbb-center .mbb-label{padding-top:0}

/* 4: glass; solid fallback for browsers without backdrop-filter */
.mbb-nav.mbb-glass{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-bottom:10px;border-radius:22px;background:var(--mbb-bg);border:1px solid #ffffff2a;box-shadow:0 10px 30px #0008}
@supports(backdrop-filter:blur(18px)){.mbb-nav.mbb-glass{background:color-mix(in srgb,var(--mbb-bg) 86%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}}
.mbb-nav.mbb-glass .mbb-center .mbb-icon{background:var(--mbb-accent);box-shadow:inset 0 1px 0 #ffffff44,0 6px 16px #0008}
/* 5: outline */
.mbb-nav.mbb-outline{border-top:2px solid var(--mbb-accent);background:var(--mbb-bg)}
.mbb-nav.mbb-outline .mbb-center .mbb-icon{background:var(--mbb-bg);border:2px solid var(--mbb-accent);box-shadow:0 0 0 5px var(--mbb-bg)}
.mbb-nav.mbb-outline .mbb-active:not(.mbb-center) .mbb-icon{border-bottom:2px solid var(--mbb-accent);padding-bottom:3px}
/* 6: split tiles */
.mbb-nav.mbb-split{padding-left:0;padding-right:0;padding-top:0;gap:0}
.mbb-nav.mbb-split .mbb-item{min-height:70px;padding-top:9px;border-right:1px solid #ffffff0f}
.mbb-nav.mbb-split .mbb-item:last-child{border-right:0}
.mbb-nav.mbb-split .mbb-center{background:var(--mbb-accent);justify-content:center}
.mbb-nav.mbb-split .mbb-center .mbb-icon{position:static;width:26px;height:26px;border:0;box-shadow:none;background:none}
.mbb-nav.mbb-split .mbb-center .mbb-label{padding-top:0}
/* 7: diamond */
.mbb-nav.mbb-diamond{border-radius:14px 14px 0 0}
.mbb-nav.mbb-diamond .mbb-center .mbb-icon{width:51px;height:51px;top:-24px;transform:rotate(45deg);border-radius:12px;background:var(--mbb-accent);border:1px solid var(--mbb-accent);box-shadow:4px 4px 12px #0008}
.mbb-nav.mbb-diamond .mbb-center svg{transform:rotate(-45deg)}
/* 8: soft */
.mbb-nav.mbb-soft{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-bottom:10px;border-radius:26px;border:1px solid #ffffff0d;box-shadow:0 10px 24px #0009}
.mbb-nav.mbb-soft .mbb-center .mbb-icon{background:var(--mbb-bg);border:0;box-shadow:6px 6px 12px #0009,-3px -3px 10px #ffffff13}
.mbb-nav.mbb-soft .mbb-item:not(.mbb-center) .mbb-icon{width:32px;height:32px;padding:7px;box-sizing:border-box;border-radius:12px;background:#ffffff04;box-shadow:inset 2px 2px 4px #0005,inset -1px -1px 3px #ffffff0d}
/* 9: compact horizontal center */
.mbb-nav.mbb-compact{grid-template-columns:1fr 1fr 1.5fr 1fr 1fr;min-height:64px;padding-top:6px}
.mbb-nav.mbb-compact .mbb-item{min-height:50px;font-size:10px}
.mbb-nav.mbb-compact .mbb-center{flex-direction:row;justify-content:center;gap:4px;align-self:center;min-height:42px;margin:0 3px;border-radius:12px;background:#ffffff0c;border:1px solid #ffffff1f;padding:5px}
.mbb-nav.mbb-compact .mbb-center .mbb-icon{position:static;width:18px;height:18px;background:none;border:0;box-shadow:none}
.mbb-nav.mbb-compact .mbb-center svg{width:18px;height:18px}
.mbb-nav.mbb-compact .mbb-center .mbb-label{padding-top:0}
/* 10: luxury */
.mbb-nav.mbb-luxury{border-top:2px solid var(--mbb-accent);background:var(--mbb-bg);box-shadow:0 -5px 25px #0007}
.mbb-nav.mbb-luxury .mbb-center .mbb-icon{top:-28px;width:62px;height:62px;border:2px solid var(--mbb-accent);background:var(--mbb-accent);box-shadow:0 0 0 4px var(--mbb-bg),0 7px 16px #0009}
.mbb-nav.mbb-luxury .mbb-item:not(.mbb-center){border-right:1px solid #ffffff0c}
.mbb-nav.mbb-luxury .mbb-item:last-child{border-right:0}
@media(prefers-reduced-transparency:reduce){.mbb-nav.mbb-glass{background:var(--mbb-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* 1.2.1: every design follows the saved colors. */
.mbb-nav .mbb-center .mbb-icon{background:var(--mbb-accent);color:var(--mbb-bg)}
.mbb-nav.mbb-pill .mbb-center,.mbb-nav.mbb-split .mbb-center,.mbb-nav.mbb-compact .mbb-center{background:var(--mbb-accent)}
.mbb-nav.mbb-pill .mbb-center .mbb-icon,.mbb-nav.mbb-split .mbb-center .mbb-icon,.mbb-nav.mbb-compact .mbb-center .mbb-icon{background:transparent;color:var(--mbb-bg)}
.mbb-nav.mbb-pill .mbb-center .mbb-label,.mbb-nav.mbb-split .mbb-center .mbb-label,.mbb-nav.mbb-compact .mbb-center .mbb-label{color:var(--mbb-bg)}
.mbb-nav.mbb-outline .mbb-center .mbb-icon{background:var(--mbb-bg);color:var(--mbb-accent)}
.mbb-nav.mbb-soft .mbb-center .mbb-icon{background:var(--mbb-accent);color:var(--mbb-bg)}
/* 1.3.0: explicit text and icon colors, scoped to this plugin. */
.mbb-nav a.mbb-item .mbb-label{color:var(--mbb-text) !important;text-shadow:none}
.mbb-nav a.mbb-item .mbb-icon{color:var(--mbb-icon) !important}
.mbb-nav a.mbb-item .mbb-icon svg,.mbb-nav a.mbb-item .mbb-icon svg path{fill:currentColor !important;color:inherit !important}
.mbb-nav a.mbb-item.mbb-active:not(.mbb-center) .mbb-label,.mbb-nav a.mbb-item.mbb-active:not(.mbb-center) .mbb-icon{color:var(--mbb-accent) !important}
.mbb-nav a.mbb-item.mbb-center .mbb-icon{color:var(--mbb-center-icon) !important}
.mbb-nav a.mbb-item.mbb-center .mbb-label{color:var(--mbb-text) !important}

/* 1.4.0: text and icons stay consistent on all five links, including current page. */
.mbb-nav a.mbb-item .mbb-label,
.mbb-nav a.mbb-item.mbb-center .mbb-label,
.mbb-nav a.mbb-item.mbb-active:not(.mbb-center) .mbb-label{color:var(--mbb-text) !important}
.mbb-nav a.mbb-item .mbb-icon,
.mbb-nav a.mbb-item.mbb-center .mbb-icon,
.mbb-nav a.mbb-item.mbb-active:not(.mbb-center) .mbb-icon{color:var(--mbb-icon) !important}