.bottom-nav{background:var(--white);border-top:1px solid var(--border);width:100%;max-width:480px;padding:5px 10px;padding-bottom:calc(5px + env(safe-area-inset-bottom,0px));z-index:200;justify-content:space-between;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -2px 10px #0000000d}.nav-item,.nav-center-wrap{cursor:pointer;color:var(--text);flex-direction:column;flex:1;justify-content:flex-end;align-items:center;height:55px;padding:5px 0;text-decoration:none;transition:all .2s;display:flex;position:relative}.nav-item i{margin-bottom:4px;font-size:20px;transition:all .2s}.nav-item span,.nav-center-wrap span{font-size:12px;font-family:var(--font_b);line-height:1}.nav-item.active{color:var(--primary)}.nav-item.active i{transform:translateY(-2px)}.nav-center-wrap{position:relative}.nav-center-wrap.active{color:var(--primary)}.nav-center{background:var(--primary);width:50px;height:50px;color:var(--white);border:4px solid var(--white);border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:-24px;left:50%;transform:translate(-50%);box-shadow:0 4px 10px #2b63c366}.nav-center-wrap.active .nav-center{background:var(--primary)}.nav-center i{font-size:18px}