:root{
    --bb-h:64px;
    --bb-bg:rgba(17,22,45,.95);
    --bb-br:#26324b;
    --bb-accent:#00d4ff;
    --bb-text:#e7eaf3;
    --bb-muted:#9aa3b2;
    /* how much to lift the items; tweak -2px…-8px to taste */
    --bb-offset:-4px;
}

/* keep page content above the bar */
.with-bottom-pad{
    padding-bottom: calc(var(--bb-h) + env(safe-area-inset-bottom));
}

/* bottom bar */
.bottom-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:1000;
    height: calc(var(--bb-h) + env(safe-area-inset-bottom));
    background: var(--bb-bg);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bb-br);
    display:grid;
    grid-auto-flow:column;        /* lay items left→right */
    grid-auto-columns:1fr;        /* equal widths */
}

/* iOS safe-area filler */
.bottom-bar .bb-safearea{
    position:absolute; left:0; right:0; bottom:0;
    height: env(safe-area-inset-bottom); pointer-events:none;
}

/* items: icon + label in a row, lifted slightly */
.bb-item{
    position:relative;
    display:flex; align-items:center; justify-content:center; gap:8px;
    text-decoration:none;
    color: var(--bb-muted);
    font-weight:600; font-size:.82rem;
    transform: translateY(var(--bb-offset)); /* move higher */
}
.bb-item .rz-icon{ font-size:1.2rem; line-height:1; }
.bb-item.active{ color: var(--bb-accent); }

/* icon wrapper = badge anchor */
.bb-icon{
    position:relative; display:inline-grid; place-items:center;
    width:24px; height:24px;
}

/* badge hugs the icon */
.bb-icon .bb-badge{
    position:absolute; top:-4px; right:-8px;   /* adjust if needed */
    min-width:16px; height:16px; padding:0 4px;
    display:grid; place-items:center;
    background:#f56565; color:#0a0e27; border-radius:999px;
    font-size:.68rem; font-weight:800; border:1px solid rgba(0,0,0,.25);
}