header {
    height: 60px;
    width:100%;
    background:#fff;
    position: fixed;
    left:0;
    top: 0;
    z-index:99999;
    border-bottom: 1px solid #eee;
}

header>div {
    height:100%;
    padding:0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

header .logo {height:24px;}
header .logo img {width:100%;height:100%;object-fit: cover;}
header .user-name { font-size: 16px; font-weight: 500; color: #222;}
header .user-name span { font-size: 18px; font-weight: 700; color: #222;}

header i {font-size:18px;padding-top:calc(50% - 10px);padding-bottom:calc(50% - 8px);padding-right:30px;}




header {
    position: fixed;
    top: 0;
    width: 100%;
    transition: top 0.3s;
    background-color: #fff;
    z-index: 1000;
}

header.header-hidden {
    top: -60px; /* header height */
}

header>div {position:relative;}

.page-name {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}




nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    z-index:99999;
}


nav { flex-shrink: 0; display: flex; height: 80px; background-color: #fff; box-shadow: 0 -2px 5px rgba(0,0,0,0.05); }
.nav-item { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; color: #333; font-size: 16px; gap: 10px; }
.nav-item.active { color: var(--primary-color); border-top: 3px solid var(--primary-color); padding-top: 3px; }
.nav-icon { width: 28px; height: 28px;}
.nav-icon img {width:100%;height:100%;object-fit: contain;}