.ff-bottom-nav{
position:fixed; left:0; right:0; bottom:0; z-index:110;
background:linear-gradient(180deg, rgba(10,10,14,.85), rgba(10,10,14,.95));
backdrop-filter: blur(6px);
border-top:1px solid rgba(255,255,255,.06);
display:flex; justify-content:space-around; align-items:center;
padding:10px 10px calc(10px + env(safe-area-inset-bottom));
}
.ff-bottom-nav .ffbn-item{
appearance:none; background:none; border:none; cursor:pointer;
color:rgba(229,231,235,.72); text-decoration:none;
display:flex; flex-direction:column; align-items:center; gap:4px;
font-size:12px; line-height:1.1;
}
.ff-bottom-nav .ffbn-item i{ font-size:18px; }
.ff-bottom-nav .ffbn-item:hover,
.ff-bottom-nav .ffbn-item:active{ color:var(--chip-yellow,#E9FF3F); }
@media (min-width:1025px){ .ff-bottom-nav{ display:none; } } .filters-overlay{ position:fixed; inset:0; z-index:120; background:rgba(10,10,14,.92); backdrop-filter: blur(8px); }
.filters-overlay[hidden]{ display:none; }
.fo-lock{ overflow:hidden; }
.filters-overlay .fo-shell{
position:absolute; left:0; right:0; bottom:0;
background:#0f1014; border-top-left-radius:14px; border-top-right-radius:14px;
box-shadow:0 -10px 30px rgba(0,0,0,.4);
max-height:78vh; overflow:auto;
padding:16px 18px calc(18px + env(safe-area-inset-bottom));
}
.filters-overlay .fo-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.filters-overlay .fo-head h3{ font-size:26px; font-weight:800; margin:0; color:#e8eaf0; }
.filters-overlay .fo-close{
width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
border-radius:8px; border:1px solid rgba(255,255,255,.12); background:#14151b; color:#fff;
}
.fo-body-open{ display:flex; flex-direction:column; gap:14px; }
.fo-section-open{ border-bottom:1px solid rgba(255,255,255,.06); padding:6px 0 12px; }
.fo-section-open .fo-section-head{ color:#d7dbe6; font-weight:800; margin-bottom:8px; }
.fo-panel-open{ overflow:visible; }
.filters-overlay .fo-chips{ display:flex; flex-wrap:wrap; gap:10px; padding:8px 0 2px; }
.filters-overlay .chip{
display:inline-flex; align-items:center; gap:6px;
background:#171922; border:1px solid rgba(255,255,255,.08);
padding:8px 12px; border-radius:999px; color:#e5e7eb; text-decoration:none;
box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.filters-overlay .chip:hover{ border-color:var(--chip-yellow,#E9FF3F); color:#fff; }
.filters-overlay .chip .num{
display:inline-block; min-width:18px; padding:0 6px; height:18px; line-height:18px;
border-radius:999px; background:#0d0f14; border:1px solid rgba(255,255,255,.12); font-size:11px; opacity:.9;
}
@media (min-width:1025px){
.filters-overlay .fo-shell{
top:10vh; bottom:auto; left:50%; transform:translateX(-50%);
max-width:980px; border-radius:14px; padding:20px 22px 24px;
}
} .ff-bottom-nav{
position:fixed; left:0; right:0; bottom:0; z-index:110;
background:linear-gradient(180deg, rgba(10,10,14,.85), rgba(10,10,14,.95));
backdrop-filter: blur(6px);
border-top:1px solid rgba(255,255,255,.06);
display:flex; align-items:stretch;
padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.ff-bottom-nav .ffbn-item{
flex:1 1 25%;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
gap:6px;
text-decoration:none; cursor:pointer;
color:rgba(229,231,235,.72);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
padding:6px 0;
}
.ff-bottom-nav .ffbn-item i{
font-size:22px;
line-height:1;
height:22px;
display:block;
transform: translateY(1px);
}
.ff-bottom-nav .ffbn-item span{
font-size:13px;
line-height:16px;
height:16px;
display:block;
}
.ff-bottom-nav .ffbn-item:hover,
.ff-bottom-nav .ffbn-item:active{
color:var(--chip-yellow,#E9FF3F);
}
@media (min-width:1025px){
.ff-bottom-nav{ display:none; }
}
.ff-bottom-nav .ffbn-item:first-child { gap: 0px; }           
.ff-bottom-nav .ffbn-item:first-child i { transform: none; } .like-btn i.fa-heart{
font-size:16px;
line-height:1;
color: var(--chip-yellow, #E9FF3F);
}
.like-btn.liked i.fa-heart{
color: var(--accent-red, #d70003);
} .like-btn{ gap:8px; } .share-btn i{ margin-right:6px; font-size:16px; } .feed-head .avatar-link{display:inline-block; line-height:0}
.feed-head .avatar-link:focus{outline:2px solid var(--chip-yellow); outline-offset:2px}