.bottom-nav{
            position:fixed;
            bottom:0;
            left:0;
            width:100%;
            height:82px;
            background:var(--primary);
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            align-items:center;
            z-index:999;
            border-top-left-radius:30px;
            border-top-right-radius:30px;
            padding-bottom:env(safe-area-inset-bottom);
            box-shadow:0 -5px 18px rgba(0,0,0,0.15);
        }

        .bottom-nav-slot{
            position:relative;
            display:flex;
            justify-content:center;
            align-items:flex-end;
            height:100%;
            min-width:0;
            padding-bottom:10px;
        }

        .bottom-nav-link{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            text-align:center;
            color:#fff;
            font-size:13px;
            font-weight:500;
            text-decoration:none;
            border:none;
            background:transparent;
            cursor:pointer;
            width:100%;
        }

        a.bottom-nav-link:hover{
            color:#fff;
        }

        .bottom-nav-link i{
            display:block;
            font-size:24px;
            margin-bottom:3px;
        }

        .bottom-nav-link.is-active{
            position:absolute;
            left:50%;
            bottom:14px;
            transform:translateX(-50%);
            width:88px;
            height:88px;
            border-radius:50%;
            background:var(--secondary);
            border:8px solid var(--bg);
            box-shadow:0 10px 20px rgba(0,0,0,0.18);
            font-size:34px;
            font-weight:600;
            padding:0;
            z-index:2;
        }

        .bottom-nav-link.is-active i{
            font-size:34px;
            margin-bottom:0;
        }