.brand { background-color: #eef2f7; }
  .online-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
  }
  .user {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
    text-decoration: none;
    transition: transform 0.2s;
    position: relative;
  }
  .user img.avatar,
  .user picture img,
  .user > img:first-of-type {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #bbb;
    margin-right: 0.4rem;
  }
  .user img.hemei {
    width: 30px;
    border-radius: 0;     
    border: none;         
    object-fit: contain;  
    margin-left: -1rem; 
    position: relative;
    top: 0px;
  }
  .nickname {
    font-size: 0.72rem;
    color: #444;
    max-width: 6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0.4rem;
  }
  .inline-badge {
    font-size: 0.65rem;
    margin-left: -5px;
    vertical-align: middle;
  }
  .user:hover { transform: scale(1.04); }
  .guest-count {
    margin-left: auto;
    font-size: 0.8rem;
    color: #6c757d;
    padding-left: 1rem;
    align-self: center;
  }
  .user.seller { background: #ebfdce; }
  .user.store  { background: #fde7f9; }
  .user.admin  { background: #d4f6fc; }
  .user.superadmin { background: #fcf8d7; }
  @media screen and (max-width: 600px) {
    .online-bar { padding: 0.2rem 0.4rem; gap: 0.4rem; }
    .user { padding: 0.2rem 0.4rem; }
    .nickname { font-size: 0.68rem; max-width: 4.8rem; }
    .inline-badge { font-size: 0.55rem; }
  }
  #toggleDrawer strong {
    font-weight: normal;
    color: #828282;
    font-size: 12px;
  }
  #toggleDrawer i {
    color: #828282;
    font-size: 18px;
  }
@keyframes wiggleRotate {
  0%   { rotate: 0deg; }
  15%  { rotate: -10deg; }
  30%  { rotate: 10deg; }
  45%  { rotate: -10deg; }
  60%  { rotate: 10deg; }
  75%  { rotate: -5deg; }
  100% { rotate: 0deg; }
}
.hemei {
  width: 30px;
  height: 30px;
  object-fit: contain;
  margin-left: -0.2rem;
  margin-right: 0.4rem;
  rotate: 0deg;         
  transform: scaleX(1); 
}
.wiggle-once {
  animation: wiggleRotate 0.6s ease;
}