<style>
/* BURGER */
.burger {
  cursor: pointer;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.burger svg line {
  stroke: #625855;
  stroke-width: 1.5;
}

.burger:hover svg line {
  stroke: #778e6f;
}

/* SIDEBAR DESKTOP */
.sidebar {
  position: fixed;
  left: 0; top: 0;
  width: 68px;
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  z-index: 9999;
  border-right: 1px solid rgba(0,0,0,.06);
}

body {
  padding-left: 68px;
}

.sidebar-home, .sidebar-actions, .sidebar-socials { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

.sidebar-logo { width: 32px; height: 32px; opacity: .6; }

.action-icon, .social-icon { 
  width: 30px; height: 30px; 
  border: 1px solid rgba(0,0,0,.15); 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #625855; 
  text-decoration: none; 
  cursor: pointer; 
  transition: all .2s; 
}

.action-icon:hover, .social-icon:hover { 
  border-color: #778e6f; 
  color: #778e6f; 
}

/* MENU MOBILE */
.mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  background: #f4efe5 !important;
  z-index: 9998 !important;
  transform: translateY(-100%) !important;
  transition: transform .3s ease !important;
  overflow-y: auto !important;
  padding: 60px 24px 40px !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.mobile-menu.open {
  transform: translateY(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-menu ul { 
  list-style: none; 
  display: flex; 
  flex-direction: column; 
  gap: 16px; 
}

.mobile-menu a { 
  font-size: 18px; 
  color: #625855; 
  text-decoration: none; 
}

.mobile-menu a:hover { 
  color: #778e6f; 
}

.menu-close {
  position: absolute;
  top: 20px; right: 24px;
  background: none; border: none;
  font-size: 32px; cursor: pointer;
  color: #625855;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  body { padding-left: 0; }
  .sidebar { display: none !important; }
  .burger { display: flex !important; position: fixed !important; top: 16px !important; left: 16px !important; z-index: 10000 !important; }
}

@media (min-width: 769px) {
  .burger { display: none !important; }
  .mobile-menu { display: none !important; visibility: hidden !important; }
}
</style>