.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; height: 75px; background-color: var(--primary-dark); border-radius: 40px 40px 0 0; display: flex; justify-content: space-around; align-items: center; z-index: 1000; box-shadow: 0 -4px 15px rgba(0,0,0,0.15); padding: 0 15px; }
.bottom-nav a:not(.nav-home-btn) { color: #ffffff; font-size: 26px; text-decoration: none; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; opacity: 0.6; width: 50px; height: 50px; border-radius: 16px; }

.bottom-nav a:not(.nav-home-btn) i {
    color: transparent !important;
    -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.7); 
}

.bottom-nav a.active:not(.nav-home-btn) i {
    color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
}
.nav-center-wrapper { position: relative; width: 75px; height: 75px; display: flex; justify-content: center; }

.nav-home-btn { 
    position: absolute; 
    top: -35px; 
    width: 75px; 
    height: 75px; 
    background-color: var(--primary-light) !important; 
    border-radius: 50%; 
    border: 6px solid var(--bg-light); 
    opacity: 1 !important; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: var(--text-light) !important; 
    box-shadow: 0 6px 12px rgba(0,0,0,0.2); 
    transition: transform 0.1s; 
    text-decoration: none !important;
}

.nav-home-btn i { font-size: 30px; }
.nav-home-btn:active { transform: scale(0.95); }

.sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 2000; opacity: 0; visibility: hidden; transition: 0.3s; }
.sidebar-overlay.active { opacity: 1; visibility: visible; }
.sidebar { position: fixed; top: 0; left: -300px; width: 280px; height: 100%; background: white; z-index: 2001; transition: 0.3s; box-shadow: 4px 0 20px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
.sidebar.active { left: 0; }
.sidebar-header { padding: 30px 20px 20px; background: var(--primary-dark); color: white; display: flex; justify-content: space-between; align-items: center; }
.btn-close-sidebar { background: none; border: none; color: white; font-size: 24px; cursor: pointer; }
.sidebar-menu { padding: 20px; display: flex; flex-direction: column; gap: 15px; flex: 1; }
.sidebar-link { text-decoration: none; color: var(--text-dark); font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 15px; padding: 10px 0; }
.sidebar-link i { color: var(--primary-light); width: 24px; text-align: center; font-size: 18px; }

.notif-wrapper { position: relative; display: inline-block; }
.btn-notif { background: rgba(255,255,255,0.15); border: none; border-radius: 12px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; cursor: pointer; position: relative; }
.notif-badge { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; background: #cb314c; border-radius: 50%; border: 2px solid var(--primary-dark); display: none; }
.notif-badge.active { display: block; }
.notif-dropdown { position: absolute; top: 55px; right: 0; width: 320px; background: white; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: none; z-index: 9999; overflow: hidden; }
.notif-dropdown.show { display: block; }
.notif-header { padding: 15px 20px; font-weight: 800; color: var(--primary-dark); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
.notif-list { max-height: 350px; overflow-y: auto; }
.notif-item { padding: 15px; display: flex; gap: 12px; border-bottom: 1px solid #f8fafc; }
.notif-item.unread { background: #f0f8ff; }