.navbar-brand-box {
    width: 38px; height: 38px; background: #000; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0;
  }
  .stat-icon-wrap {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .complaint-card { transition: box-shadow .15s; -webkit-transition: box-shadow .15s; -moz-transition: box-shadow .15s; -ms-transition: box-shadow .15s; -o-transition: box-shadow .15s; }
  .complaint-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
  #landing { display: block; }
  #dashboard { display: none; }
  .feature-icon-wrap {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .75rem;
  }
  .user-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: #6d28d9;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem; cursor: pointer;
  }

  /* Mobile Navigation Styles */
  @media (max-width: 1023px) {
    .mobile-menu-enter {
      animation: slideDown 0.3s ease-out;
    }
    
    .mobile-menu-leave {
      animation: slideUp 0.3s ease-out;
    }
    
    #mainMobileMenu {
      transition: all 0.3s ease-out;
    }
    
    #mainMobileMenu:not(.hidden) {
      animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes slideUp {
      from {
        opacity: 1;
        transform: translateY(0);
      }
      to {
        opacity: 0;
        transform: translateY(-10px);
      }
    }
  }

  /* Ensure proper spacing on mobile */
  @media (max-width: 640px) {
    .mobile-nav-container {
      padding: 0 1rem;
    }
  }